1.左右布局

上圖就是一個典型的左右布局，左圖，右content；

1.用一個<div>包裹住兩個<div>，兩個<div>在其中實現(xiàn)左右布局，一個放圖片，一個放文本；

2.主要用到兩個style：

? ? div{ float: left; }

? ??.clearfix::after{ content: ''; display: block; clear: both; }? ? /* 為了消除浮動 */

簡歷demo（檢查元素查看）

2.左中右布局

這個勉強也算作左中右布局的一種，兩邊留白，中間內(nèi)容居中，主要用到三個style：

????????max-width: 940px;

? ? ? ? margin-left: auto;

? ? ? ? margin-right: auto;

max-width是限定了中間內(nèi)容的最大寬度，由于當(dāng)前有布局居中需求，所以左右用auto來自適應(yīng)，如果不需要，可自擬。

3.水平居中

直接給<div>包裹住的內(nèi)聯(lián)文件一個style：

????text-align：center；

所以存在一個問題，如果<div>中包裹的也是<div>呢？

這種情況，就需要用到 display：inline-block; 將<div>元素轉(zhuǎn)變?yōu)閮?nèi)聯(lián)元素，再對其進(jìn)行居中；

4.垂直居中

? ??通過verticle-align:middle實現(xiàn)CSS垂直居中。

通過vertical-align:middle實現(xiàn)CSS垂直居中是最常使用的方法，但是有一點需要格外注意，vertical生效的前提是元素的display：inline-block。

? ? 方法有多種，這里取其一；

5.小技巧

????css的布局是否順利流暢很多時候與選擇器class的布局有關(guān)；

????遇到問題多往文檔流的方面思考。