目录
布局方法
一、标准流（文档流）
1.块级元素排列（图中为div标签）
2.行内元素排列（图中为a标签）
二、浮动布局(float)
三、定位布局 (position)
1.静态定位
2.绝对定位
3.相对定位
4.固定定位
5.粘性定位
四、伸缩布局（flex）
1.基础概念
2.使用步骤
3.详细图解
五、网格布局（grid）
1.基础概念
2. 属性讲解
(1)网格容器的属性
(2)网格元素的属性
(3)网格元素的命名
六、多列式布局
1.多列属性
（1）文本列数
（2）列与列的间距
（3）列边框
（4）指定列的宽度
（5）指定元素是否可以跨列
编辑
2.适配写法
注意事项
一、边距塌陷
二、清除浮动 （float）
布局方法
一、标准流（文档流）
标准流是默认的布局方式。元素会自上而下，自左而右排列，行内元素在一行显示，碰到父级元素的边框换行。
1.块级元素排列（图中为div标签）
2.行内元素排列（图中为a标签）
二、浮动布局(float)
顾名思义，这类布局会使元素 "浮动" 起来。因此，使用用这个属性的元素可以超脱标准流的限制进行布局，而且浮动的元素不会再占据原来的位置（脱标）。
代码如下：
float: left | right ;简单的左右浮动：
在这里我们引入一个属性 “z-index”，在元素上填写这个属性，属性值越大的将会显示在属性值小于它的元素上方
三、定位布局 (position)
定位布局可以利用坐标将元素精准的放在页面的某处。
1.静态定位
position:static;这是 position 的默认值，不书写这段代码它也存在（说白了就是标准流）
2.绝对定位
position:absolute;在需要定位的元素上写下这段代码，然后在后面接上：
top：xxx px
left：xxx px
right：xxx px
bottom：xxx px这些关于定位的属性，除了单位我们也可以使用百分比（会按照你上一级元素的尺寸计算），正常的开发中我们不需要将 top bottom left right 全部使用，根据实际情况在前两者和后两者各取其一即可。
需要注意的是，不配合相对定位使用的话，元素的定位是以html为基准的，而且使用绝对定位后元素将不会占据原来的位置（脱标）。
3.相对定位
position:relative;一般配合绝对定位使用，对父级元素使用相对定位之后，再对子元素使用绝对定位（子绝父相）。这样，子元素就会以父元素为基准进行精准布局。
4.固定定位
position：fixed;固定定位也是配合 top bottom left right 这些定位元素使用，固定定位位置从html出发，而且不会占据原来的位置。
永远在一个地方待着，页面移动它也不会动
看下面这张图，注意右边的滚轮 ：
接下来我们移动滚轮 ：
我们发现页面发生移动，而有固定定位的元素还在那里待着 ，这就是固定定位。
5.粘性定位
position:sticky粘性定位只可以使用 top bottom left right 中的一个属性，例如一个父元素中有四个子元素，你将第四个子元素设置为：
position:sticky;
bottom:200px;那么它就会以你的视口为基准定位到距视口下方200px的地方,当元素移动到这个位置前，它会随着浏览器的滚轮正常移动，移动到这个位置之后，它就会像固定定位一样不会再移动了，直到它将要超出父元素是她才会继续移动.
屏幕录制 2025-01-06 195307
