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

現在我們已經熟悉了HTML和CSS。了解了它的基礎。現在我們來更深入的了解元素在頁面中的呈現和大小。

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

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

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

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

p {
  display: block;
}

將值設置為inline，可以將元素轉化為內聯元素。

p {
  display: inline;
}

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

p {
  display: inline-block;
}

兩個內嵌塊元素間的空隙

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

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

div {
  display: none;
}

了解元素如何顯示，以及怎么修改display屬性非常重要，因為它會影響盒子模型的呈現效果。討論盒子模型的時候，我們會知道他們之間的差別，意義和影響。

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

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

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

盒子模型對應的CSS屬性為:width，height，padding，border，margin。

我們來看例子：

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

根據盒子模型，元素的總寬度計算如下：

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的值設置為400像素，但元素的實際寬度為492像素。默認情況下，盒子模型是加法。因此想要確定盒子的實際大小，我們需要考慮將四面的內邊距，邊框，外邊距都考慮進去。寬度不僅僅是width屬性的值，也要加上左右兩側的內邊距，邊框和外邊距。

到目前為止，上述屬性看著沒什么實際意義。因為這只是為了澄清所有形成盒子模型的屬性：width，height，padding，border和 margin。

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

寬度

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

div {
  width: 400px;
}

高度

元素的默認高度取決于它的內容。元素根據內容需要進行垂直擴展或收縮。我們可以使用height屬性為非內聯元素設置高度：

div {
  height: 100px;
}

調整內聯元素
請記住內聯元素不支持width和height屬性和與其相關的值。塊狀元素和內嵌塊元素支持width和height屬性和與其對應的值。

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

外邊距

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

div {
  margin: 20px;
}

margin有一個特殊的現象，就是在內聯元素中垂直外邊距margin-top和margin-bottom不生效，在塊狀元素和內嵌塊元素中有效。

內邊距

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

div {
  padding: 20px;
}

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

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

塊狀元素和內嵌塊元素的外邊距和內邊距的顯示是正常的。

外邊距和內邊距的聲明方式

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

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

div {
  margin: 20px;
}

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

div {
  margin: 10px 20px;
}

如果四個值都不一致，那么我們按照 上右下左 的順序輸入值。例如，我們為div設置10像素的頂部外邊距，20像素的右側外邊距，0像素的底部外邊距，以及15像素的左側外邊距：

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

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

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

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

外邊距和內邊距的顏色
margin和padding屬性是完全透明的，不可以設置顏色。但因為是透明的，所以透出了相關元素的背景色。元素外邊距部分看到的顏色為它父級元素的背景色。元素內邊距部分看到的顏色為該元素的背景色。

邊框在內邊距和外邊距之間，畫出了元素輪廓。border屬性要求三個值：寬度，樣式，顏色。邊框屬性簡寫時值的順序為：寬度，樣式，顏色。普通書寫方式下，邊框的三個屬性名為：border-width，border-style和border-color 。普通書寫方式因為是單個值，更容易修改和復寫。

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

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

以下是邊框設置示例：

div {
  border: 6px solid #949599;
}

單側邊框

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

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

另外，單側邊框的樣式也可以被細分，如下所示：

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

這些高度細分的邊框屬性名都由連字符分隔，由border單詞開頭，隨后是邊框的方向：top，right，bottom，left，最后是要設置的樣式：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從上側開始）按順時針方向排序的。

div {
  border-radius: 5px;
}

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

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;
}

• 上一篇：node.js平臺搭建
• 下一篇：一個用于學習的react項目