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

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

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

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

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

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

p {
  display: block;
}

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

p {
  display: inline;
}

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

p {
  display: inline-block;
}

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

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

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

div {
  display: none;
}

了解元素如何顯示，以及怎么修改display屬性非常重要，因?yàn)樗鼤?huì)影響盒子模型的呈現(xiàn)效果。討論盒子模型的時(shí)候，我們會(huì)知道他們之間的差別，意義和影響。

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

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

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

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

我們來(lái)看例子：

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

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

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

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

寬度

元素的默認(rèn)寬度依賴(lài)于它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)元素
請(qǐng)記住內(nèi)聯(lián)元素不支持width和height屬性和與其相關(guān)的值。塊狀元素和內(nèi)嵌塊元素支持width和height屬性和與其對(duì)應(yīng)的值。

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

外邊距

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

div {
  margin: 20px;
}

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

內(nèi)邊距

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

div {
  padding: 20px;
}

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

內(nèi)聯(lián)元素的外邊距和內(nèi)邊距
內(nèi)聯(lián)元素對(duì)內(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)線(xiàn)上面或下面顯示(譯者注：內(nèi)聯(lián)元素加上垂直內(nèi)邊距之后，元素內(nèi)部的內(nèi)容部分在視覺(jué)上沒(méi)有產(chǎn)生偏移)。

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

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

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

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

div {
  margin: 20px;
}

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

div {
  margin: 10px 20px;
}

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

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

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

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

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

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

邊框在內(nèi)邊距和外邊距之間，畫(huà)出了元素輪廓。border屬性要求三個(gè)值：寬度，樣式，顏色。邊框?qū)傩院?jiǎn)寫(xiě)時(shí)值的順序?yàn)椋簩挾?，樣式，顏色。普通?shū)寫(xiě)方式下，邊框的三個(gè)屬性名為：border-width，border-style和border-color 。普通書(shū)寫(xiě)方式因?yàn)槭菃蝹€(gè)值，更容易修改和復(fù)寫(xiě)。

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

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

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

div {
  border: 6px solid #949599;
}

單側(cè)邊框

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

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

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

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

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

border-radius

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

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

思考border-radius多個(gè)值的順序時(shí)(包括margin和padding)，記住它們是從左上角開(kāi)始（margin和padding從上側(cè)開(kāi)始）按順時(shí)針?lè)较蚺判虻摹?/p>

div {
  border-radius: 5px;
}

border-radius屬性也允許我們使用普通方法書(shū)寫(xiě)單個(gè)屬性值。這些普通的屬性以border單詞開(kāi)通，跟著是邊角的垂直位置(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 - 一個(gè)簡(jiǎn)潔美觀的 Ghost 主題
• 下一篇：《深入理解ES6》筆記——代理（Proxy）和反射（Reflection）API（12）