版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/z_x_Qiang/article/details/82561797
浮动模块
布局模式分为三种:普通流(标准流)、浮动和定位;
1.普通流(标准流)
在此之前讲的布局都是普通流,块级元素竖行排列,行内元素水平排列;
2.浮动
目的:浮动的主要目的是将多个块级元素通行显示;
特点:
1.可以通过显示样式转换,转换成行内块元素显示,但是缺点是在各个块元素之间会有缝隙存在;
2.浮动就是将块元素浮起来,不占位置;然后下面的元素就会上移动抢位置;这样的话就失去了布局的意义了,所以往往是要在浮动的元素外面套一个块元素站位;里面的元素就可以做浮动效果了;
3.如果要一行显示所有的块,则这些块都要使用浮动属性才行;
4.浮动可以使得块元素变成行内块元素,可以使得行内元素也变成行内块元素;
3.定位position
定位属性分为两部分:定位模式和边偏移;
3.1定位模式:有四个属性
静态定位:static 一般是清空定位使用的;边偏移是不起作用的;
相对定位:relative 相对自己进行边偏移;但是以前的位置还继续占用,不脱坐标;
绝对定位:abssolute 完全脱标的,不占用空间的;
父级没有使用定位的话,子级使用的定位,坐标是以浏览器的左上角为基准点的;相反如果父亲有定位则以最近的父亲(一层一层往上找,直到找到有定位的父亲)的左上角作为基准点;
固定定位:fixed 认的是浏览器的,完全脱标,不占有位置,可以和边偏移一起使用;