摘要：會在元素內(nèi)容而不是元素后插入一個偽元素使用意味著中新增的子元素會被清除左右浮動元素。這一篇主要介紹了盒子模型，浮動和清除。

這是CSS設(shè)計指南的讀書筆記，用于加深學(xué)習(xí)效果。

上一篇介紹了css 的工作原理，這一篇主要介紹盒子模型和浮動。

所謂盒子模型，就是瀏覽器為頁面中的每個HTML元素生成的矩形盒子。這些盒子們都要按照可見版式模型在頁面上排布。

可見的頁面版式主要由三個屬性控制：position、display和float。

position：控制頁面上元素的位置關(guān)系

display：控制元素是堆疊、并排還是不在頁面出現(xiàn)

float：提供控制的方式，以便吧元素組成多欄布局

元素盒子的屬性可以分成三組：

邊框(board)。可以甚至邊框的寬窄、樣式和顏色

內(nèi)邊距(padding)。可以甚至盒子內(nèi)容區(qū)與邊框的間距

外邊距(margin)。可以設(shè)置盒子與相鄰元素的間距

元素盒子還有一個背景層，可以改變顏色，也可以添加圖片。

CSS為邊框、內(nèi)邊距和外邊距分別規(guī)定了簡寫屬性，每個簡寫聲明中，屬性值得順序都是上、右、下、左。

比如：

{
  margin-top: 5px; 
  margin-right: 10px;
  margin-bottom: 12px; 
  margin-left: 8px;
}

使用簡寫則為這樣：

{
    margin: 12px 10px 12px 8px;
}

如果有一個值沒寫，那么則使用對邊的值。

比如：

{margin: 12px 10px 12px;}
/*等同于*/
{
    margin: 12px 10px 12px 10px;
}

如果只寫一個值，則4個邊都取這個值。

{margin: 12px;}
/*等同于*/
{margin: 12px 12px 12px 12px;}

另外每個盒子的屬性也分三個粒度，這三個粒度從一般到特殊分別舉例如下：

{
    border: 2px dashed red;
}

混合使用三種粒度的簡寫屬性達(dá)成設(shè)計目標(biāo)是很常見的。比如，想為盒子的上邊和下邊添加4像素的紅色邊框，為左邊添加1像素寬的紅色邊框，而右邊沒有。可以這么寫：

{border: 4px solid red;} /* 先給4條邊設(shè)置相同的樣式*/
{border-left-width: 1px;} /* 修改左邊框?qū)挾?/
{border-right: none;} /*移出右邊框*/

border 有三個相關(guān)屬性。

寬度（border-width)。可以使用thin、medium和thick等文本值，也可以使用除百分比和負(fù)值之外的任何絕對值。

樣式（border-style)。有none、hidden、dotted、dashed等文本值。

顏色（border-color）。可以使用任意顏色值，包括RGB、HSL、十六進(jìn)制顏色值和顏色關(guān)鍵字。

內(nèi)邊距是盒子內(nèi)容區(qū)與盒子邊框之間的距離。

上圖的樣式為：

p {
    font: 16px helvetica, sans-serif; 
    width: 220px; 
    border: 2px solid red; 
    background-color: #caebff;
}

可以看到在沒有設(shè)定內(nèi)邊距的情況下，內(nèi)容緊挨著邊框。

設(shè)定邊框后：

p {
    font: 16px helvetica, arial, sans-serif; 
    width: 220px; 
    border: 2px solid red; 
    background-color: #caebff; 
    padding: 10px;
}

效果如下，可以看到樣式舒服了很多：

內(nèi)邊距在盒子的內(nèi)部，所以也會取得盒子背景。也就是說，多出來的內(nèi)邊距并沒有擠壓文本內(nèi)容，實(shí)際是加在了聲明的盒子寬度之上。

上圖的例子中，第一組是默認(rèn)情況，第二組是在第一組基礎(chǔ)上添加了邊框，第三組是把第二組的外邊距設(shè)置為了0，標(biāo)題和段落全緊挨在一起了。

推薦大家吧這條規(guī)則作為樣式表的第一條規(guī)則：

* {margin: 0; padding: 0;}

這條規(guī)則是把所有元素默認(rèn)的外邊距和內(nèi)邊距都設(shè)定為0。這樣，我們可以為那些真正需要添加邊距的元素設(shè)定邊距。

比如下邊這個樣式：

p {
    height: 50px;
    border: 1px solid #000;
    backgroundcolor: #fff;
    margin-top: 50px;
    margin-bottom: 30px;
}

如果我們把這個樣式應(yīng)用到3個前后相接的段落上，由于上邊距和下邊距相鄰，你可能會認(rèn)為他們之間的外邊距是80（50+30）像素，但是實(shí)際上是50像素，這就是邊距疊加。

垂直方向上外邊距會疊加 水平方向的不會
外邊距單位 根據(jù)經(jīng)驗(yàn)，水平邊距可以使用像素，以便該段文本始終與包含元素邊界保持固定間距，不受自豪變大或變小的影響。而對于上下外邊距，已em 為單位則可以讓段間距隨字號變化而相應(yīng)增大或縮小。

如果沒有顯式的設(shè)置元素的 width 屬性，我們就稱這個盒子沒有寬度。
如果沒有設(shè)定 width， 那么這個屬性的默認(rèn)值是 auto，會讓元素的寬度擴(kuò)展到與父元素同寬。

我們看個例子?：

 這個元素沒有設(shè)置寬度

設(shè)置樣式：

body {
    font-family: helvetica, arial, sans-serif;
    size: 1em;
    marging: 0px;
    background-color: #caebff;
}

p {
    margin: 0;
    background-color: #fff;
}

可以看到，不給段落設(shè)置寬度，段落會填滿 body 元素。

為了更加明顯，我給段落左右分別加一個邊框，再加一個外邊距。

p {
    margin:0 30px; 
    background-color:#fff; 
    padding:0 20px; 
    border: solid red; 
    border-width: 0 6px;
}

這時段落內(nèi)容區(qū)域變成了 288像素（我把瀏覽器寬度手動調(diào)成了400px，400-(20+6+30)x2）。

結(jié)論：沒有寬度的元素始終會擴(kuò)展到填滿其父元素的寬度為止。添加水平邊框、內(nèi)邊距和外邊距會導(dǎo)致內(nèi)容寬度減少，減少量等于水平邊框、內(nèi)邊距和外邊距的和。

還是上邊的例子，我們先把外邊距去掉，固定寬度400px；

p {
    width:400px; 
    margin:0; 
    padding:0 20px;  
    border:solid red;  
    border-width: 0 6px  0 6px;  
    background-color:#fff;
}

可以看到，盒子的寬度并不是400px，而是452像素（400+(20+6)*2）。

再給盒子加上外邊距：

p {
    width:400px; 
    margin:0 30px; 
    padding:0 20px;  
    border:solid red;  
    border-width: 0 6px  0 6px;  
    background-color:#fff;
}

可以看到，這時總寬度達(dá)到了512像素（30+6+20+400+20+6+30=512）

結(jié)論: 為設(shè)定了寬度的盒子添加邊框、內(nèi)邊距和外邊距，會導(dǎo)致盒子更寬。實(shí)際上盒子的 width 屬性設(shè)定的只是盒子內(nèi)容區(qū)的寬度，而非盒子整體的寬度

css 設(shè)計 float（浮動）屬性的主要目的是為了實(shí)現(xiàn)文本繞排圖片的效果，這個屬性也是創(chuàng)建多欄布局最簡單的方式。
我們先看一個例子：

..the paragraph text...

css 規(guī)則如下。

p {
    margin: 0;
    border: 1px solid red;
}
img {
    float: left;
    margin: 0 4px 4px 0;
}

這個例子的樣式如圖所示：

這里我們給圖片加了 float: left 樣式，這時瀏覽器就會把圖片向上推，直到它碰到父元素的內(nèi)邊界（也就是body）。后面的內(nèi)容不再認(rèn)為浮動元素在它的前邊，所以它會占據(jù)父元素左上角的位置。不過，它的內(nèi)容會繞開浮動的圖片。

在上面的基初上如何使內(nèi)容分欄呢？
只要再用一float 屬性就可以了。

p {
    float: left; /* 加上這兩行*/
    width: 200px;
    ...
}

這樣同時浮動圖片和有寬度的段落，會使圖片繞排效果消失，而浮動的段落也向左向上移動。變成了多欄的效果。

看下這個例子：

    
    
It"s fun to float.

應(yīng)用樣式如下：

section {
    border: 1px solid blue;
    margin: 0 0 10px 0;
}
p {
    marging: 0;
}
footer {
    border: 1px solid red;
}

效果如圖：

但這并不是我們想要的，我們并不想讓footer 被提到上邊。
浮動元素脫離了原來的文檔流，不受父元素的控制。如果我們想讓父元素還包含浮動的子元素，怎么做呢？
有三種方法：

只需要在 section 加上這個樣式：

section {
    overflow: hidden;
    ...
}

現(xiàn)在效果如圖：

實(shí)際上，overflow: hidden 聲明凱真正用途是防止包含元素被超大內(nèi)容撐大。也就是說應(yīng)用上這個之后，包含元素（父元素）會保持其設(shè)定的寬度，如果子元素過大，會被截掉。

第二種方法是讓父元素和子元素同時浮動。

section {
    float: left;
    width: 100%;
    border: 1px solid blue;
}
img {
    float: left;
}
footer {
    border: 1px solid red;
    clear: left;
}

浮動section 后，不管其子元素是否浮動，都會被包圍。因此需要用 width: 100% 讓section 與瀏覽器同寬。由于section 也浮動，所以footer 會往它旁邊擠，這時需要使用 clear: left 以保證不會被提升到浮動的元素旁邊。

第三種方法是給父元素添加一個非浮動的子元素，然后清除該子元素。

這種方式可以生效是因?yàn)楦冈匾欢〞鼑歉幼釉兀仪宄龝屵@個子元素處于最下。

這里我們使用神奇的 clearfix 規(guī)則：

.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
    }

這個 clearfix 規(guī)則最早是由程序員 Tony Aslett 發(fā)明的，它只添加了一個清除的包含句點(diǎn)作為非浮動元素（必須有內(nèi)容，句點(diǎn)是最小的內(nèi)容）。規(guī)則中其他生命是為了確保這個偽元素沒有高度，而且不可見。

after 會在元素內(nèi)容（而不是元素后插入一個偽元素）
使用clear: both 意味著 section 中新增的子元素會被清除左右浮動元素。

我們看了三種方法圍住浮動元素的方式。

那如果沒有父元素，如果清除浮動呢？

比如下邊這個例子：

    
    
This text sits next to the image and because the text extends below the bottom of the image, the next image positions itself correctly under the previous image.
    
    
This text is short, so the next image can float up beside this one.
    
    
Because the previous image"s text does not extend below it, this image and text move up next to the previous image. This problem can be solved by the use of the clear property.

樣式如下：

section {
    width:300px; b
    order:1px solid red;
}
img {
    float:left; 
    margin:0 4px 4px 0;
}
p {
    font-family:helvetica, arial, sans-serif; 
    margin:0 0 5px 0;
}

效果如圖所示：

由于第二張圖下方有空間，所以第三張圖及說明文字會上浮到第二張圖片右側(cè)，這并不是我們想要的結(jié)果。

我們想要的效果是如下圖這樣：

那怎么實(shí)現(xiàn)呢？ 還是應(yīng)用 clearfix 規(guī)則。為每個段落加上clearfix 類。通過clearfix類清除元素后，布局就是我們希望的了。

這一篇主要介紹了盒子模型，浮動和清除。下一篇介紹css 布局。

最后，感謝女朋友支持。