CSS的常見布局
CSS常見布局使用display屬性（文檔流）+position屬性（定位）+float屬性（浮動）扁位。
inline-block
display:inline-block屬性既可以像行級元素一樣水平分布蜓陌，也可以像塊級元素一樣設(shè)置寬高练慕，如果空間夠就可以實(shí)現(xiàn)左右布局。
float（應(yīng)用較廣）
給要并排的子元素加上style=float:left(或right)距芬，他們的父元素添加class:clearfix敞峭，即可脫離文檔流，實(shí)現(xiàn)排排坐立由。clearfix的css為
.clearfix::after { content=" "; display:block; clear:both;}
flex（不能兼容ie）
flex是一種新的布局方式
a. flex布局與方向無關(guān)
b. 可實(shí)現(xiàn)空間的自動分配轧钓、自動對齊
1、左右布局
float百分比布局
.clearfix::after{content:' ';display:block;clear:both; }
.left{float:left;height:200px;width:2%;background: red; }
.right{float:left;height:200px;width:8%;background: blue; }
注：用于布局的div中不要添加其他margin锐膜、padding等毕箍，需要的話在里面再加元素。
flex布局
.content{display:flex; }
.left{float:left;height:200px;width:100px;background: red; }
.right{float:left;height:200px;background: blue;flex-grow:1; }
2枣耀、左中右布局
flex布局
.content{display:flex; }
.middle{height:200px;background:yellow;flex-grow:1;margin:010px; }
.left{height:200px;width:100px;background:red; }
.right{height:200px;width:150px;background:blue; }
3霉晕、水平居中：
div的左右margin為auto
內(nèi)聯(lián)元素的父元素加上text-align:center;
4庭再、垂直居中：單行元素line-height跟height相等就垂直居中
line-height+padding
5捞奕、flex的完美居中
display:flex;justify-content:center;align-items:center;
