一揣苏、左右布局
1.table:table的li實現(xiàn)
實現(xiàn)原理：
table標簽是能夠具有實現(xiàn)左右布局的屬性，也是我們項目中使用最多的峻呕。table布局也是頁面布局中使用的最早的布局方式拴驮，隨著前端技術(shù)的發(fā)展，table布局由于自身的局限性逐漸被div布局取代凳寺。
查看代碼（主要代碼）：
代碼說明：
tr表示一行鸭津，td表示一列，先實現(xiàn)行再實現(xiàn)列肠缨，所以tr中可以添加td實現(xiàn)盒子的左右布局逆趋。另:由于table布局由于性能問題已經(jīng)逐漸被放棄使用，所以提供了table的li標簽實現(xiàn)晒奕，供參考闻书。
2.inline-block
實現(xiàn)原理：
display:inline-block屬性是介于行級元素(display:inline)和塊級元素(display：block)之間的屬性名斟，它可以像行級元素一樣水平布局，也可以像塊級元素設(shè)置寬高屬性魄眉，所以使用它可以進行左右布局砰盐。另：它不支持ie6、7瀏覽器坑律，請注意岩梳，但是可以使用inline進行hack處理。
查看代碼：
3.float實現(xiàn)左右布局
實現(xiàn)原理：
float屬性是css中關(guān)于布局的一個關(guān)鍵屬性晃择，其意為將該塊狀區(qū)域脫離父級標簽的文檔流冀值，left屬性值使該區(qū)域向父級標簽區(qū)域的左側(cè)邊界放置，right屬性值使該區(qū)域塊向父級標簽的右側(cè)邊界放置宫屠，如是利用該屬性可以實現(xiàn)左右布局列疗。 float屬性屬于布局屬性，其中有著很多重要應(yīng)用浪蹂。
float屬性的三個特性為：
a抵栈、包裹性：可以按照區(qū)域塊中子元素的實際寬度進行包裹；
b坤次、破壞性：float區(qū)域塊不會被父級區(qū)域塊包裹古劲，造成前端常見的高度塌陷問題，解決辦法是清除浮動浙踢；
c绢慢、占位性（個人稱呼），浮動區(qū)域塊雖然是脫離了父級區(qū)域洛波，但是它是要占用一定的正常流區(qū)域的胰舆，即如果不清除浮動，我們會看到它會占用它后面的同級元素（如果沒有會占用它父級后面的同級元素蹬挤，如果還是沒有則向上追溯）的區(qū)域缚窿，影響同級元素，所以常見清浮動焰扳。
查看代碼：
代碼說明：
float布局部分和inline-block布局部分比較相似倦零，但是其中最主要的區(qū)別是：將
.c1{height:60px}
以后就會發(fā)現(xiàn)float布局對于后面節(jié)點的布局采用交錯式的布局，inline-block采用正常式的布局吨悍。
二扫茅、左中右布局
1.?float+margin
2.?float+absolute
三、水平居中
1. text-align:center
.parent {width: 500px;height: 100px;border: 1px solid #ddd;text-align: center;}.child {display: inline-block;width: 100px;}<div class="parent"><span class="child">123</span></div>
該方法可以水平居中塊級元素中的行內(nèi)元素育瓜，如`inline`葫隙，`inline-block`；
對于塊級元素中的塊級元素躏仇，只會讓子元素中的內(nèi)容居中恋脚，子元素仍然是左對齊腺办，如上述例子中span改成`display：block`，則child會左對齊糟描，其中的文字會相對于span居中怀喉。
2. margin:0 auto
.parent {width: 500px;height: 100px;border: 1px solid #ddd;}.child {display: block;margin:0 auto;width: 100px;}<div class="parent"><span class="child">123</span></div>
對于已知width的塊級元素，可以用`margin：0 auto`來設(shè)置水平居中船响。
四躬拢、垂直居中
1. line-height
對于已知height的單行文本，設(shè)置line-height=height的值灿意，即可實現(xiàn)垂直居中估灿。
2. vertical-align: middle
模擬成表格屬性來實現(xiàn)居中崇呵。
.parent {display: table-cell; //模擬表格屬性vertical-align: middle;text-align: center;width: 500px;height: 100px;border: 1px solid #ddd;}.child {display: inline-block;width: 100px;}<div class="parent"><span class="child">123</span></div>
3. position：absolute + translate
對于height和width未知的元素可以采用該方法
.parent {position: relative;width: 500px;height: 100px;border: 1px solid #ddd;}.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #ddd;}<div class="parent"><span class="child">123<br>123<br>123</span></div>
4. flex布局
對于多個元素可以采用該布局方案缤剧，這應(yīng)該是目前為止用的最省心順手的方案了吧，這個可以參考阮一峰老師的文章（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool）域慷，上面寫得很詳細了荒辕，這里簡單舉個例子：
.parent {display: flex;// 左右對齊 flex-start | flex-end | center | space-between | space-aroundjustify-content: center;// 上下對齊 flex-start | flex-end | center | baseline | stretchalign-items: center;width: 500px;height: 100px;border: 1px solid #ddd;}.child {width: 30px;height: 30px;background: #ddd;}<div class="parent"><div class="child">1</div><div class="child">2</div><div class="child">3</div></div>
五、布局技巧
position屬性
1.說明
position屬性和float一樣犹褒，也是一種使元素脫離文檔流的屬性
position： static | relative | absolute | fixed |inherit
①absolute?：絕對定位抵窒；脫離文檔流的布局，遺留下來的空間由后面的元素填充叠骑。定位的起始位置為最近的父元素(postion不為static)李皇，否則為Body文檔本身。
②relative?：相對定位宙枷；文檔流的布局不變掉房，只改變自身的位置，在文檔流原先的位置遺留空白區(qū)域慰丛。定位的起始位置為此元素原先在文檔流的位置卓囚。
③fixed?：固定定位；類似于absolute诅病，但不隨著滾動條的移動而改變位置哪亿。
④static?：默認值；默認布局贤笆。
輔助屬性：
position屬性只是使元素脫離文檔流蝇棉，要想此元素能按照希望的位置顯示，就需要使用下面的屬性(position:static不支持這些)：
①left ： 表示向元素的左邊插入多少像素芥永，使元素向右移動多少像素篡殷。
②right ：表示向元素的右邊插入多少像素，使元素向左移動多少像素恤左。
③top ：表示向元素的上方插入多少像素贴唇，使元素向下移動多少像素搀绣。
④bottom ：表示向元素的下方插入多少像素，使元素向上移動多少像素戳气。
上面屬性的值可以為負链患，單位：px
2.對于四種定位屬性的解釋
對于以下代碼
<div? style="border: solid 5px #333; width:300px;"><div? id="redBox" style="height: 100px; width: 100px; background-color: Red;float:right; "></div><div id="greenBox" style="height: 120px; width: 100px; background-color: Green;"></div><div id="yellowBox" style="height: 100px; width: 100px; background-color: Yellow;"></div></div>
（static作為默認布局，不作解釋）
2.1使用relative屬性
相對定位瓶您；文檔流的布局不變麻捻，只改變自身位置，在文檔流原先的位置遺留空白區(qū)域呀袱。定位的起始位置為此元素原先在文檔流的位置贸毕，可以覆蓋其他元素。
然后將greenBox設(shè)置為position:relative; left:180px ;top:10px;會出現(xiàn)圖二
? ? ? ? ? ? ? ? ? 圖一
圖二??
圖三
2.2使用absolute屬性
絕對定位夜赵；脫離文檔流的布局明棍，遺留下來的空間由后面的元素填充。定位的起始位置為最近的父元素(postion不為static)寇僧，否則為Body文檔本身摊腋。
然后將greenBox設(shè)置為position:absolute; left:180px ;top:10px;會出現(xiàn)圖3
這里可能會發(fā)現(xiàn)，圖三top和relative間距是不同的嘁傀，然而top都是10px兴蒸，這是為什么呢？
重新回到對絕對定位的理解
絕對定位细办；脫離文檔流的布局橙凳，遺留下來的空間由后面的元素填充。定位的起始位置為最近的父元素(postion不為static)笑撞，否則為Body文檔本身岛啸。
看標紅的那句話，這也就是說娃殖，position的位置是相對于body而言的值戳，然而最外面的box和body距離10px，所以他們頂部才會重合
將父元素的position設(shè)置為relative或者absolute? 則會出現(xiàn)圖四
?????????????????? 圖四
絕對定位上的垂直居中問題
對于盒子模型炉爆，應(yīng)該有很深的理解堕虹，盒子模型可以對定寬元素使用margin:0? auto;來做到水平居中；
但是對于垂直居中芬首，使用類似的方法margin: auto 0;卻做不到赴捞，這是因為垂直方向上的外邊距等于零css會自動解讀為margin-top:0；
然而在absolute屬性中郁稍，垂直居中得到了一種很好的解決方式
使用{left:0; right : 0; margin:0 auto;}可以得到水平居中赦政，
使用{top:0; bottom:0;margin: auto 0; }可以得到垂直居中，
同樣的，使用{left:0; right : 0;top:0; bottom:0; margin: auto ;}可以得到垂直水平同時居中恢着。
<div style="border: solid 5px #333;position:absolute;height:300px; width:300px;"><div id="greenBox" style="height: 120px; width: 100px; background-color: Green;position:absolute;? ; left:0; right:0;top:0;bottom:0; margin: auto;"> absolute? ? ?
? ? ? ? </div></div>
2.3使用fixed屬性
固定定位桐愉；類似于absolute，但不隨著滾動條的移動而改變位置掰派。
fixed是相對與瀏覽器窗口的从诲，也就是固定在屏幕的某個位置，不能隨著滾動條移動靡羡。
3.相關(guān)屬性overflow系洛，z-index
overflow: scroll | hidden
scroll,超出元素塊的內(nèi)容以滾動條顯示，
hidden:超出部分隱藏
z-index：<integer>
因為position屬性的元素可以相互遮蓋略步，所以需要z-index屬性來改變默認的覆蓋先后順序描扯。
