前端總結系列
- 前端總結·基礎篇·CSS（一）布局
- 前端總結·基礎篇·CSS（二）視覺
- 前端總結·基礎篇·CSS（三）補充
- 前端總結·基礎篇·JS（一）原型、原型鏈、構造函數和字符串（String）
- 前端總結·基礎篇·JS（二）數組深拷貝、去重以及字符串反序和數組（Array）
- 前端總結·基礎篇·JS（三）arguments、callee、call、apply、bind及函數封裝和構造函數
- 前端總結·基礎篇·JS（四）異步請求及跨域方案
- 前端總結·工具篇·管理（一）常用模塊化方案
目錄
這是《前端總結·基礎篇·CSS》系列的第一篇，主要總結一下布局的基礎知識。
一、顯示（display）
1.1 盒模型（box-model）
1.2 行內元素（inline） & 塊元素（block）
1.3 行內塊元素（inline-block IE8+ IE6-7/tools）
1.4 flex（IE11+ IE10/-ms-）
1.5 none
二、位置（position）
三、補充
3.1 浮動（float）
3.2 層疊（z-index）
3.3 溢出（overflow）
3.4 resize（notIE）（CSS3）
3.5 分欄（column）（IE10+ notOperaMini）（CSS3）
一、顯示（display）
1.1 盒模型（box-model）
看圖了解盒模
盒模型包括內容（content）、填充（padding）、邊框（border）、邊距（margin）。我們給元素設置的高度，是內容（content）的高度。再給元素添加填充（padding），元素看起來會更高。
以下是一個盒模型的演示實例，在谷歌瀏覽器中查看盒模型可以使用 右鍵>屬性>Computed 的方式進行查看。
<p class="box-model">box-model</p>
.box-model {
border: 1px solid red;
padding: 20px;
}
以邊框為界的盒模型
有些時候，我們不希望給元素添加填充（padding）時，元素的高度會改變，這樣不利於我們進行布局。可以把元素的盒模型，設置成以邊框（border）為界的盒模型（box-sizing:border-box;）。在IE的怪異模式下，默認使用了這種盒模型。
下面是一個示例。
<div class="box-model">box-model</div>
.box-model {
box-sizing: border-box; /* 設置成以邊框為界的盒模型 */
border: 1px solid red;
height: 80px;
padding: 10px;
}
1.2 行內元素（inline） & 塊元素（block）
布局一般都用塊元素
塊元素可以設置寬高，默認占據一行。行內元素不能設置寬高，寬度由其內容決定。
塊元素默認沒高度，有內容才會有高度。行內元素默認沒高度和寬度，有內容才會有。行內元素雖然不能設置寬高，但是設置成絕對定位（absolute）后，可以設置寬高。（定位在第二節講）
塊元素：div p ul li table form html5(header section footer)。
行內元素：a font(em strong i) img span。
塊元素可以變成行內元素
我們通常將li變成行內元素制作導航欄。
<ul class="nav">
<li>首頁</li>
<li>文章</li>
<li>留言</li>
</ul>
.nav li {
display: inline;
}
一行只有一個塊元素
但是，行內元素可以有多個。
空的塊元素將在布局中消失
在調試頁面的時候想要顯示元素在布局中的位置，我們通常會給元素添加一個高度。
行內元素內容為空也會在布局中消失（不推薦為空）。
1.3 行內塊元素（inline-block IE8+ IE6-7/tools）
兼容性是支持>=IE8，IE6-7請參見專注WEB前端開發。
清除兩元素間隙
兩元素間隙來源於元素間的空格，拼接元素即可消除。也可以用過使用模板來消除。更多討論請見知乎。
<ul class="nav">
<li>首頁</li><li>
文章</li><li>
留言</li>
</ul>
特殊情況下的元素對齊
三個li並列，都設置成inline-block。當對最左邊的元素設置display:none;時，其他兩個li會下沉到容器的底部。此時，需要對這兩個li設置頂部對齊（vertical-align:top;）。
<ul class="nav" id="nav">
<li class="left"><div class="hidden">首頁</div></li>
<li class="center"><div>文章</div></li>
<li class="right"><div>留言</div></li>
</ul>
.hidden {display: none;}
.left {height: 50px;}
.center,.right {vertical-align: top;}
1.4 彈性盒子（flex IE11+ IE10/-ms-）
兼容性是支持>=IE11，IE10需要添加瀏覽器私有前綴（-ms-）。
使用彈性布局
使用了彈性布局，float clear vertical將失效。更多請見阮一峰的博客。
display:flex; // 塊元素用
display:inline-flex; // 行內元素用
彈性布局設置
這些就暫時當作參考手冊吧。
flex-direction:row/row-reverse/column/column-reverse; // 方向
flex-wrap:nowrap/wrap/wrap-reverse; // 換行
flex-flow:direction/wrap; // 方向和換行的簡寫，默認為flex-flow:row nowrap;
justify-content:flex-start/center/flex-end/space-between/space-around; // 主軸（默認為水平軸）
align-items：flex-start/center/flex-end/baseline/stretch; // 交叉軸
align-contents:flex-start/center/flex-end/space-between/space-around/stretch; // 多條軸線的對齊方式（單條無效）
order:number; // 順序（默認為0）
flex-grow:number; // 寬度有余時放大比例（默認為0）
flex-shrink:number; // 寬度有余時縮小比例（默認為1）
flex-basis:number/auto; // 分配多余空間前，項目占據的主軸空間（默認auto）
flex:grow/shrink/basis; // grow shrink basis三個屬性的縮寫
align-self:auto/flex-start/center/flex-end/baseline/stretch;; // 單個項目的對齊方式，可覆蓋align-items（默認auto）
主軸（justify-content）只能居中單行元素
那多行怎么辦呢？我們可以把多行嵌套在一個div中，構造出單行元素。
下面是一個水平和垂直居中的一個實例。
<div class="parent">
<div class="child">
<p>兩行都會</p>
<p>居中</p>
</div>
</div>
.parent {
display: flex; /* 使用flex布局 */
align-items: center; /* 交叉軸居中 */
justify-content: center; /* 主軸（默認為水平軸）居中 */
background: red;
height: 200px;
}
1.5 none
隱藏元素
以下兩種方法都可以隱藏元素，但是display:none;會清除原本占用的布局空間。
visibility:hidden; // 隱藏元素
display:none; // 隱藏元素並清除原本占用的布局空間
二、位置（position）
絕對（absolute）、相對（relative）和固定（fixed）定位，都可以使用top，right，left，bottom元素。但是表示的意義卻各不相同。
清除布局空間的定位（absolute fixed）
固定定位（fixed）不會隨着鼠標的滾動而改變位置。他真的是固定屏幕的某一個位置的，比較常見的是網頁右下角的廣告。
絕對定位（absolute）的定位原點是非默認定位（static）的父節點。可以是absolute fixed relative，如果父節點沒有這些，那定位原點就是body了。使用了這兩種定位中的一種，元素原本占用的布局空間將會消失（脫離文檔流）。
下面是絕對定位（absolute）的一個例子。左圖是默認布局，右圖是使用絕對定位（absolute）之后的（元素原本的布局空間被清除）。
<p class="border">I'm in front of you.</p>
<div class="parent">Hello</div>
<p class="border">I'm next to you.</p>
.border {
border: 1px solid blue;
}
.parent {
position: absolute;
left: 20px;
top: 20px;
background-color: red;
padding: 5px;
}
保留布局空間的定位（relative）
元素原本占用的布局空間依舊保留在文檔流中。
相對定位（relative）相對原有位置定位。把上例中的absolute改成relative即可看到效果。使用這種方法，元素原本占用的布局會保留。
默認定位
默認定位為static。
巧用relative+absolute定位
父級采用relative，子代采用absolute。則子代的定位原點變為父級元素的左上角。
三、補充
3.1 浮動（float）
剛開始做頁面的時候，還不知道浮動用了之后得清除，只氣的想要砸鍵盤。現在好多了，知道了點技巧。更多技巧請見Tomson。
清除浮動（.clear）
這種方法需要在浮動元素后面添加一個空的節點，然后寫上clear屬性。兼容IE6需要添加zoom:1;。
<ul class="nav">
<li>首頁</li>
<li>文章</li>
<li>留言</li>
</ul>
<div class="clear"></div> <!--用來清楚浮動的空元素-->
<p>我是另外一行</p>
.nav li {
background-color: red;
float: left;
list-style-type: none;
}
.clear {
clear: both;
zoom:1; /* IE 6 */
}
清除浮動（overflow:hidden;）
使用這種方法意味着，浮動元素得有一個父元素，並給父元素添加overflow:hidden;屬性。
<ul class="nav">
<li>首頁</li>
<li>文章</li>
<li>留言</li>
</ul>
<p>我是另外一行</p>
.nav li {
background-color: red;
float: left;
list-style-type: none;
}
.nav {
overflow: hidden;
}
文字環繞
浮動元素的另外一個妙用是實現文字環繞。
<div class="article">
<div class="photo"></div>
<p>這段文字很長，是用來測試文字環繞的。圖片的占位將用div塊來模擬。這段文字很長，是用來測試文字環繞的。圖片的占位將用div塊來模擬。</p>
</div>
.article {
width: 200px;
}
.photo {
width: 60px;
height: 60px;
background-color: red;
float: right;
}
3.2 層疊（z-index）
層疊可以控制元素的上下放置關系。值越大越上面。
<div class="z zOne"></div>
<div class="z zTwo"></div>
.z {
position: absolute;
top: 200px;
left: 200px;
width: 60px;
height: 60px;
background-color: red;
opacity: .5; /* 設置透明度為0.5 */
}
.zTwo {
top: 220px; /* 和第一個塊錯開以看到效果 */
left: 220px;
background-color: blue;
opacity: .5;
}
3.3 溢出（overflow）
當頁面內存在多個業內選項卡的時候，從一個沒有右邊滾動條的頁面達到一個有滾動條的頁面，將會產生頁面跳動。解決辦法是默認設置顯示右邊的滾動條。
overflow-x:visibility;
3.4 resize（notIE）（CSS3）
定義用戶是否可調整當前元素的邊框大小。
resize: horizontal（水平）/vertical（垂直）/both/none/inherit;
3.5 分欄（column）（IE10+ notOperaMini）（CSS3）
兼容性是IE>=10，不支持opera mini。更多請見菜鳥教程。
<p>這一段文字用來測試分欄。這一段文字用來測試分欄。這一段文字用來測試分欄。</p>
p {
width: 200px; /* 把段落的寬度設短一點，便於效果的展現 */
column-count: 3; /* 設定需要分幾欄 */
column-gap: 20px; /* 設定兩欄間隔 */
}
結語
這一節主要參考了學習CSS布局，阮一峰的博客，Tomson，專注WEB前端開發，菜鳥教程，知乎和我在看的一本書《CSS設計指南》。
第一次寫前端方面的長文章。寫了改，改了寫，然后繼續改，又繼續寫。如此循環往復，只為讓用詞用句更加恰當一些。文中有什么不恰當的地方，還望指出。