css 浮动 相对定位 绝对定位区别

时间:2022-11-26 16:28:20

  今天下班在地铁上看了一个样式教学视频,因为最近在学习前端。以前刚毕业的时候,感觉后台才是王道,但最近发现,前端也很重要,比如:自己接一些私单做的时候,自己要根据需求做好界面,才能更加符合客户需求,不然还得找人去做;不同的是,后台的就可以放心找人做,只要测试得没问题,效率还过得去就可以了,所以最近打算学好点前端,自己接一些单子来做。废话不多说,入正题:

  html是按照文件流(普通流)的方式加载的,但是全部是普通流的话,很多好看的样式是实现不了的,所以出现了浮动,相对定位,绝对定位的概念。

  一、首先,按照普通流和非普通流来分类:

    ①普通流:就是按照上下左右的顺序一行一行排列的,长度不够就会自动挤到下一行。

    ②非普通流:顾名思义就是脱离普通流的,在普通流上面是不占据位置的。css有position的样式,position包括:static,relative,absolute,fixed四种值。其中static是属于普通流;relative也是属于特殊的普通流,详细下面有介绍;absolute和fixed以及float就是属于非普通流的,加载的时候,也会顺序加载,但是会脱离普通流的位置。

  二、分别介绍static,relative,absolute,fixed和float(通过top,left,right,bottom来设置相对定位)

    ①static:就是默认的普通流,不手动设置position样式的话,默认就是static;

    ②relative:叫相对定位,指的是相对他自己原来的位置的相对位置,并且原来的位置还是占着的(所以说属于特殊的普通流),其他的元素不会填上去,但是设置好相对位置之后,他新的位置是不会挤压其他元素的,就像把该元素从原来的位置上抠出来,放在单独一层来布局。

    ③absolute:叫绝对定位,指的是①相对其父元素位置的绝对定位,但是他属于非普通流,②原来的位置是不会占着的,是单独的一层,脱离了普通流。除了以上两点,其他的和relative差不多。

    ④fixed:叫固定定位,指的是元素相对于浏览器窗口的定位(比如一些网站两边的广告),拉动滚动条,他也不会跟着动,也是属于非普通流,其他的跟relative差不多。

    ⑤float:叫浮动,是css单独的样式,有top,right,bottom,left四种常用值,以上四个是属于position的一种;float也是属于普通流,单会改变普通流。他只能和普通流在同一层,但是可以改变元素的位置,同样是占着位置的(和relative有点像),不会单独一层(而relative,absolute,fixed会单独一层,可以设置z-index属性来改变其前后位置)。使用float之后,元素则会脱离普通流,该元素则在普通流上不再占用位置,普通流的元素则会填补上去,这样如果不去设置的话则会出现重叠覆盖的情况;如果想使用了float的元素也占着普通流上的位置,该如何办呢?这时候,可以把应用了float样式的元素紧接着的元素应用clear样式,clear样式包括:both,right,left三个值。both表示right和left的float都清除掉,另外两个同理。这样子则可以清除在此之前的非普通流,让他们也占着普通流上的位置,但是这只是占着位置,其实该元素是不存在于该位置的,该位置不存在任何元素(详细自己google理解),但是这样子的话,紧接着的那个元素想设置margin等,是会出现问题的,因为应用了float样式的元素霸占的那个位置其实是什么东西也没有的,不存在边界,所以应用margin则不会以那个元素(应用了float的那个)为边界的,会跳过那个边界来计算,当然你也可以把margin设大点(也就是加上float元素的长度或者宽度)也可以达到效果。其实,可以在float后面的元素之前,单独加个 <div style="clear:both"> 清楚元素来专门用于清除浮动即可,接下来的元素应用margin则可以正常起效(补充:其实一般来说,可以在样式表里面单独设置 .clear{clear:both;} 这样的样式来专门用于清除浮动,避免重复,代码会规优雅规范很多)。

    

  三、z-index作用

    可以用来处理非普通流元素的前后位置,z-index越大,元素就在越前面(同时存在普通流和非普通流的时候才有意义)。

  四、块元素和行内元素一些差别

    ①块元素才有width,height属性,而行内元素没有;

    ②每个块元素默认自动占一行,而行内默认会挤满一行才会继续下一行;

    ③行内元素在css加上“display:block”则可以使该元素变成块元素;

    ……