摘要：而內(nèi)聯(lián)元素會并排顯示，寬度緊隨內(nèi)容變化而變化。但元素又按照內(nèi)聯(lián)元素顯示，不會另起一行。這種情況下，只能指定非內(nèi)聯(lián)元素的屬性值。如下是為非內(nèi)聯(lián)元素設(shè)置寬度的例子高度元素的默認(rèn)高度取決于它的內(nèi)容。

現(xiàn)在我們已經(jīng)熟悉了HTML和CSS。了解了它的基礎(chǔ)。現(xiàn)在我們來更深入的了解元素在頁面中的呈現(xiàn)和大小。

在這節(jié)課中，我們將會討論什么是盒子模型，它的工作模式是怎樣的。我們也會在課程中學(xué)習(xí)一些新的CSS屬性，并且將介紹三種長度單位。

在了解盒子模型之前，我們先來了解一下元素是如何顯示的。在第二節(jié)課中，我們學(xué)習(xí)了塊狀元素和內(nèi)聯(lián)元素的差異。快速回顧一下，塊狀元素會另起一行，并占據(jù)所有可用的寬度，不管內(nèi)容有沒有。而內(nèi)聯(lián)元素會并排顯示，寬度緊隨內(nèi)容變化而變化。塊狀元素通常用在大塊的內(nèi)容上，例如標(biāo)題，結(jié)構(gòu)元素。內(nèi)聯(lián)元素用在小塊的內(nèi)容上，比如將幾句話加粗或斜體顯示。

元素如何顯示——例如塊狀元素，內(nèi)聯(lián)元素和其他元素——都由顯示屬性display決定。每個元素都有一個默認(rèn)的display屬性值。和其他屬性值一樣，這個屬性值是可以被覆蓋的。display值有很多，其中最常用的是block，inline，line-block和none。

我們可以通過CSS選中元素并改變和重新聲明元素的display屬性值。 若值為block可以使元素成為塊狀元素顯示。

p {
  display: block;
}

將值設(shè)置為inline，可以將元素轉(zhuǎn)化為內(nèi)聯(lián)元素。

p {
  display: inline;
}

inline-block比較有意思，它可以使元素的所有塊狀元素的屬性生效。但元素又按照內(nèi)聯(lián)元素顯示，不會另起一行。

p {
  display: inline-block;
}

兩個內(nèi)嵌塊元素間的空隙

inline-block內(nèi)嵌塊元素有個重要的點(diǎn)，就是它們并非是首尾相接的。兩個內(nèi)嵌塊元素之間存在小空隙。這個空隙雖然很惱人，但這是正常現(xiàn)象。我們會討論為什么這個空隙存在，以及怎么消除。

最后是none屬性值，會完全隱藏元素，頁面渲染的時候會當(dāng)它不存在。任何被包裹在這個屬性值元素內(nèi)的元素都會被隱藏。

div {
  display: none;
}

了解元素如何顯示，以及怎么修改display屬性非常重要，因?yàn)樗鼤绊懞凶幽Ｐ偷某尸F(xiàn)效果。討論盒子模型的時候，我們會知道他們之間的差別，意義和影響。

根據(jù)盒子模型的概念，每個在頁面上的元素都是一個擁有寬，高，內(nèi)邊距，邊框和外邊距的長方形盒子。

頁面上每個元素都符合盒子模型的定義，所以它非常重要。我們使用一些新的CSS屬性來來熟悉它。

每個元素都是一個長方形盒子，有幾個屬性能確定這個盒子的大小。盒子的核心屬性是元素的寬高，這兩個值可能是由元素的display屬性、元素的內(nèi)容或具體的width，height屬性值生成的。內(nèi)邊距padding和邊框border拓展了元素的高寬。最后是我們定義的在邊框外的外邊距margin。

盒子模型對應(yīng)的CSS屬性為:width，height，padding，border，margin。

我們來看例子：

div {
  border: 6px solid #949599;
  height: 100px;
  margin: 20px;
  padding: 20px;
  width: 400px;
}

根據(jù)盒子模型，元素的總寬度計(jì)算如下：

margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

使用上述公式，就能算出示例中的高寬值

Width：492px = 20px + 6px + 20px + 400px + 20px + 6px + 20px

Height：192px = 20px + 6px + 20px + 100px + 20px + 6px + 20px

毫無疑問盒子模型是HTML和CSS很容易混淆的部分之一。
我們將width的值設(shè)置為400像素，但元素的實(shí)際寬度為492像素。默認(rèn)情況下，盒子模型是加法。因此想要確定盒子的實(shí)際大小，我們需要考慮將四面的內(nèi)邊距，邊框，外邊距都考慮進(jìn)去。寬度不僅僅是width屬性的值，也要加上左右兩側(cè)的內(nèi)邊距，邊框和外邊距。

到目前為止，上述屬性看著沒什么實(shí)際意義。因?yàn)檫@只是為了澄清所有形成盒子模型的屬性：width，height，padding，border和 margin。

每個元素都有默認(rèn)的高度和寬度。雖然寬度和高度都有可能是0像素，但默認(rèn)情況下，瀏覽器會渲染每個元素的大小。元素的默認(rèn)寬度和高度依賴于元素是怎么顯示的。如果元素是頁面布局的關(guān)鍵元素。那么它就需要設(shè)置具體的width和height屬性值。這種情況下，只能指定非內(nèi)聯(lián)元素的屬性值。

寬度

元素的默認(rèn)寬度依賴于它display屬性的值。塊狀元素的默認(rèn)寬度為100%，占據(jù)整行空間。內(nèi)聯(lián)元素和內(nèi)嵌塊元素的寬度都隨著元素的內(nèi)容變化而變化。內(nèi)聯(lián)元素不具備固定的大小，所以width和height屬性只有在非內(nèi)聯(lián)元素上才能生效。如下是為非內(nèi)聯(lián)元素設(shè)置寬度的例子：

div {
  width: 400px;
}

高度

元素的默認(rèn)高度取決于它的內(nèi)容。元素根據(jù)內(nèi)容需要進(jìn)行垂直擴(kuò)展或收縮。我們可以使用height屬性為非內(nèi)聯(lián)元素設(shè)置高度：

div {
  height: 100px;
}

調(diào)整內(nèi)聯(lián)元素
請記住內(nèi)聯(lián)元素不支持width和height屬性和與其相關(guān)的值。塊狀元素和內(nèi)嵌塊元素支持width和height屬性和與其對應(yīng)的值。

瀏覽器會根據(jù)元素設(shè)置其默認(rèn)的外邊距和內(nèi)邊距，使其更清晰易讀。我們使用基于文本的元素來看一下這個現(xiàn)象。不同瀏覽器和不同元素之間的默認(rèn)外邊距和內(nèi)邊距可能存在差異。我們在第一課中有討論過CSS重置,將這些差別調(diào)低，或使其為零。這樣我們就可以從頭開始定義我們需要的樣式。

外邊距

margin屬性設(shè)置一個元素的周圍空間大小。外邊距在元素邊框外并且是完全透明的。外邊距可以幫助我們將元素定位在頁面的特定位置，并且可以與其他元素保持距離。 示例如下：

div {
  margin: 20px;
}

margin有一個特殊的現(xiàn)象，就是在內(nèi)聯(lián)元素中垂直外邊距margin-top和margin-bottom不生效，在塊狀元素和內(nèi)嵌塊元素中有效。

內(nèi)邊距

padding屬性和margin屬性相似，只不過它在邊框內(nèi)部，padding是為元素提供內(nèi)部空間。示例如下：

div {
  padding: 20px;
}

padding屬性和margin屬性不一致的地方是垂直內(nèi)邊距在內(nèi)聯(lián)元素中同樣有效；雖然垂直內(nèi)邊距顯示在元素基準(zhǔn)線之上或之下，但是它確實(shí)是存在的。

內(nèi)聯(lián)元素的外邊距和內(nèi)邊距
內(nèi)聯(lián)元素對內(nèi)邊距和外邊距的實(shí)現(xiàn)和塊狀元素與內(nèi)嵌塊元素不同。外邊距只有橫向margin-left和margin-right有效。內(nèi)邊距在內(nèi)聯(lián)元素中完全生效，但是垂直內(nèi)邊距padding-top和padding-bottom在元素基準(zhǔn)線上面或下面顯示(譯者注：內(nèi)聯(lián)元素加上垂直內(nèi)邊距之后，元素內(nèi)部的內(nèi)容部分在視覺上沒有產(chǎn)生偏移)。

塊狀元素和內(nèi)嵌塊元素的外邊距和內(nèi)邊距的顯示是正常的。

外邊距和內(nèi)邊距的聲明方式

在CSS中，很多屬性都有多種聲明方法。普通的寫法，就是一個屬性一個值，一個個地列出來。但我們也可以使用簡寫，一個屬性包含多個值。不是所有的屬性都有簡寫，所以我們必須確保寫出的屬性和值的結(jié)構(gòu)是正確的。

margin和padding有普通和簡寫兩種書寫方式。當(dāng)元素四面設(shè)置相同的外邊距時，可以使用margin屬性，并只指定一個值：

div {
  margin: 20px;
}

如果上下外邊距的值一致，左右外邊距的值一致，我們可以輸入兩個值。 設(shè)置上下外邊距的值在前面。以下例子將上下外邊距設(shè)置為10像素，將左右外邊距設(shè)置為20像素：

div {
  margin: 10px 20px;
}

如果四個值都不一致，那么我們按照 上右下左 的順序輸入值。例如，我們?yōu)?b>div設(shè)置10像素的頂部外邊距，20像素的右側(cè)外邊距，0像素的底部外邊距，以及15像素的左側(cè)外邊距：

div {
  margin: 10px 20px 0 15px;
}

若我們要設(shè)置多個值，優(yōu)先考慮用margin和padding。但我們也可以用普通寫法，輸入一一對應(yīng)的屬性和值。每個屬性名（該例子中是外邊距和內(nèi)邊距）后跟隨一個破折號-以及要設(shè)置值的盒子的方向：top，bottom，right和left。
例如，padding-left屬性只接受一個值，設(shè)置元素的左側(cè)內(nèi)邊距；margin-top只接受一個值，設(shè)置元素的頂部外邊距。

div {
  margin-top: 10px;
  padding-left: 6px;
}

當(dāng)我們只想設(shè)置單邊的margin和padding值時，這種普通寫法是最好的選擇。保持代碼的精確性可以防止出現(xiàn)混淆。例如，我們是否只想將元素的上右左三側(cè)的外邊距設(shè)為0，是否只想將底部外邊距設(shè)為10像素？
普通寫法輸入屬性和值可以讓目標(biāo)更明確。當(dāng)處理三個或以上的值時，縮寫更有幫助。

外邊距和內(nèi)邊距的顏色
margin和padding屬性是完全透明的，不可以設(shè)置顏色。但因?yàn)槭峭该鞯模酝赋隽讼嚓P(guān)元素的背景色。元素外邊距部分看到的顏色為它父級元素的背景色。元素內(nèi)邊距部分看到的顏色為該元素的背景色。

邊框在內(nèi)邊距和外邊距之間，畫出了元素輪廓。border屬性要求三個值：寬度，樣式，顏色。邊框?qū)傩院唽憰r值的順序?yàn)椋簩挾龋瑯邮剑伾Ｆ胀〞鴮懛绞较拢吙虻娜齻€屬性名為：border-width，border-style和border-color 。普通書寫方式因?yàn)槭菃蝹€值，更容易修改和復(fù)寫。

邊框的寬度和顏色能分別使用第三節(jié)課中討論過的長度單位和色值。

邊框有很多不同樣式。最常用的樣式值為solid，dashed，dotted和none，但你可以在列表中看到很多其他的樣式。

以下是邊框設(shè)置示例：

div {
  border: 6px solid #949599;
}

單側(cè)邊框

和margin，padding屬性一樣，也可以一次只設(shè)置元素一個方向的邊框。使用屬性名：border-top， border-right，border-bottom和border-left。它們的屬性值和border的屬性值一樣有三個：寬度，樣式和顏色。如下所示：

div {
  border-bottom: 6px solid #949599;
}

另外，單側(cè)邊框的樣式也可以被細(xì)分，如下所示：

div {
  border-bottom-width: 12px;
}

這些高度細(xì)分的邊框?qū)傩悦加蛇B字符分隔，由border單詞開頭，隨后是邊框的方向：top，right，bottom，left，最后是要設(shè)置的樣式：width，style，color。

border-radius

border-radius可以使元素的邊角變圓。

border-radius接受多種長度單位，如百分比，像素，確定元素邊角變圓的半徑。單個值表示四個角的弧度一直，兩個值按分別表示top-left/bottom-right和top-right/bottom-left，輸入四個值按順序分別表示：top-left，top-right，bottom-right和bottom-left。

思考border-radius多個值的順序時(包括margin和padding)，記住它們是從左上角開始（margin和padding從上側(cè)開始）按順時針方向排序的。

div {
  border-radius: 5px;
}

border-radius屬性也允許我們使用普通方法書寫單個屬性值。這些普通的屬性以border單詞開通，跟著是邊角的垂直位置(top或bottom),再是邊角的橫向位置(left或right)，最后是半徑radius。例如，要設(shè)置

div {
  border-top-right-radius: 5px;
}

div {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

div {
  box-sizing: padding-box;
}

div {
  box-sizing: border-box;
}

/*
  ========================================
  Grid
  ========================================
*/

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.container {
  margin: 0 auto;
  padding-left: 30px;
  padding-right: 30px;
  width: 960px;
}

• 上一篇：Wonderland - 一個簡潔美觀的 Ghost 主題
• 下一篇：《深入理解ES6》筆記——代理（Proxy）和反射（Reflection）API（12）