CSS布局
display 是CSS中最重要的用于控制布局的屬性巧鸭。每個元素都有一個默認的 display 值，這與元素的類型有關麻捻。對于大多數元素它們的默認值通常是 block 或 inline 纲仍。一個 block 元素通常被叫做塊級元素呀袱。一個 inline 元素通常被叫做行內元素。
div 是一個標準的塊級元素郑叠。一個塊級元素會新開始一行并且盡可能撐滿容器夜赵。其他常用的塊級元素包括 p 、 form 和HTML5中的新元素： header 乡革、 footer 寇僧、 section 等等
span 是一個標準的行內元素。一個行內元素可以在段落中 <span> 像這樣 </span> 包裹一些文字而不會打亂段落的布局沸版。 a 元素是最常用的行內元素婉宰，它可以被用作鏈接。
居中布局
#main {
max-width: 600px;
margin: 0 auto;
}
設置塊級元素的 width 可以防止它從左到右撐滿整個容器推穷。然后你就可以設置左右外邊距為 auto 來使其水平居中心包。元素會占據你所指定的寬度，然后剩余的寬度會一分為二成為左右外邊距馒铃。
一.水平居中
對于行內元素(inline)：text-align: center;
對于塊級元素(block)：設置寬度且 marigin-left 和 margin-right 是設成 auto蟹腾，使用 max-width 替代 width。
對于多個塊級元素：對父元素設置 text-align: center;区宇，對子元素設置 display: inline-block;（vertical-alinga:top）娃殖；或者使用 flex 布局
二.垂直居中
1.對于知道高度的元素可以設置上下padding相等;
2.設置line-height和height相等
3.利用vertical-align,但是這屬性只在tr,td中適用,故可將元素放置入table中在居中
左右布局
float浮動，將該塊狀區(qū)域脫離父級標簽的文檔流议谷，left屬性值使該區(qū)域向父級標簽區(qū)域的左側邊界放置炉爆，right屬性值使該區(qū)域塊向父級標簽的右側邊界放置，如是利用該屬性可以實現左右布局卧晓。
不過使用浮動都會有一個BUG芬首。
需要在使用浮動的父親元素加一個clearfix屬性。
.clearfix::after {
content: '';
display: block;
clear: both;
}
左中右布局
三欄自適應布局：兩邊定寬逼裆，中間block寬度自適應郁稍。
可以使用浮動或者絕對定位。
當某些元素的位置要根據父元素的大小自適應胜宇，內容寬度無法確定時耀怜，建議使用浮動
當特定元素的位置是相對父元素固定，或者內容寬高確定桐愉，需要精確定位甚至以后要用js操作變換位置時财破，建議使用浮動。
