CSS 几种布局

垂直居中布局

    1 display: flex 布局

flex 

---

    2 绝对定位

子绝父相，知道子盒子宽高 子绝父相，不知道子盒子宽高 margin auto的方式

---

 3 块元素的垂直居中

text-aling 和 line-height 结构

---

左边宽度固定，右边自适应

    1 左侧div设置成浮动：float: left，右侧div宽度会⾃拉升适应

float: left

    2 左侧固定宽度，右侧 calc(100% - 宽度)

calc 里面的细节 inline-block的坑

    3 父元素 display:flex;    自适应元素设置为 flex： 1

display:flex;  display:flex; 

4 绝对定位

 绝对定位  绝对定位

---

九宫格布局

效果

    1 display: flex + flex-wrap: wrap 布局

 flex-wrap: wrap 

   2 display: grid 布局

 display: grid

        grid-template-rows / grid-template-columns 规定列和行的尺寸

        grid-template-rows 规定网格布局中的行数（和高度）： 值是用空格分隔的列表，其中每个值指定相应行的高度。

        grid-template-columns 属性规定网格布局中的列数（和宽度）：值是一个用空格分隔的列表，其中每个值指定相应列的尺寸。

3 float: left 布局

float: left