垂直居中布局
? ? 1 display: flex 布局
flex?
? ? 2 絕對(duì)定位
子絕父相，知道子盒子寬高
子絕父相，不知道子盒子寬高
margin auto的方式
?3?塊元素的垂直居中
text-aling 和 line-height
結(jié)構(gòu)
左邊寬度固定，右邊自適應(yīng)
? ? 1 左側(cè)div設(shè)置成浮動(dòng)：float: left，右側(cè)div寬度會(huì)?拉升適應(yīng)
float: left
? ? 2 左側(cè)固定寬度，右側(cè) calc(100% - 寬度)
calc
里面的細(xì)節(jié) inline-block的坑
? ? 3 父元素 display:flex;? ? 自適應(yīng)元素設(shè)置為 flex： 1
display:flex;?
display:flex;?
4 絕對(duì)定位
?絕對(duì)定位
?絕對(duì)定位
九宮格布局
效果
? ? 1 display: flex + flex-wrap: wrap 布局
?flex-wrap: wrap?
? ?2?display:?grid 布局
?display:?grid
? ??????grid-template-rows?/?grid-template-columns?規(guī)定列和行的尺寸
? ??????grid-template-rows 規(guī)定網(wǎng)格布局中的行數(shù)（和高度）：?值是用空格分隔的列表，其中每個(gè)值指定相應(yīng)行的高度。
? ??????grid-template-columns 屬性規(guī)定網(wǎng)格布局中的列數(shù)（和寬度）：值是一個(gè)用空格分隔的列表，其中每個(gè)值指定相應(yīng)列的尺寸。
3 float: left 布局
float: left?
