CSS布局--Grid布局
Grid布局
CSS 网格布局引入了二维网格布局系统，可用于布局页面主要的区域布局或小型组件Grid是由一系列水平及垂直的线构成的一种布局模式。根据Grid，能够将设计元素进行排列，设计一系列具有固定位置以及宽度的元素的页面，使网站页面更加统一。一个Grid布局通常具有许多的列（column）与行（row），以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter）。跟弹性盒子一样只需给父级盒子添加display:grid其子项会变成网格项。
grid-template-columns & grid-template-rows属性来定义网格中的行和列。这些属性定义了网格的轨道。一个网格轨道就是网格中任意两条线之间的空间。属性取值：repeat(3,1fr) === auto auto auto === 1fr 1fr 1fr </br>其中1fr是网格容器中可用空间的一等份,通过repeat()来设置重复值；3个auto属性意味着吧容器中的可用空间3等分；
grid-columns-gap & grid-row-gap属性来控制列和行之间的间隔； ...
CSS布局--浮动Float
Float 布局
把一个元素“浮动”(float) 起来，会改变该元素本身和在正常布局流（normal flow）中跟随它的其他元素的行为。这一元素会浮动到左侧或右侧，并且从正常布局流 (normal flow) 中移除，这时候其他的周围内容就会在这个被设置浮动 (float) 的元素周围环绕。</br>
属性值123float: none; //无浮动特性float: right; //向右float: left; //向左
清除浮动
clear 类 可选择 left、right、both 等值
123.cleared { clear: left; //可选择right/left/both来停止任何活动的右/左/左右浮动}
父级添加 overflow 属性，但是无法显示溢出区的部分
伪类 向包含浮动内容及其本身的盒子后方插入一些生成的内容，并将生成的内容清除浮动。
12345.wrapper::after { content: ""; //必须要有 clear: both; display: block;& ...
CSS布局--FlexBox
FlexBox
Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由 flex-direction 定义，另一根轴垂直于它。父级容器属性要设置成display:flex
Flex容器属性值
flex-direction -> 取值：row【从左到右】,row-reverse【从右到左】,column【从上到下】,column-reverse【从下到上】；1234.flex-container { display: flex; flex-direction: row;/*column,row-reverse,column-reverse*/}
flex-wrap -> 取值：wrap【自行换行】,nowrap【默认值，不换行】,wrap-reverse【自行换行，从下到上排列元素】；1234.flex-container { display: flex; flex-wra ...