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

Posted 2020-06-19 ismallboy

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

　　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属性来改变其前后位置）

　　　　

　　三、z-index作用

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

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

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

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

　　　　……