[譯]HTML&CSS Lesson4: 盒子模型

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

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

元素是如何顯示的

在瞭解盒子模型以前，咱們先來了解一下元素是如何顯示的。在第二節課中，咱們學習了塊狀元素和內聯元素的差別。快速回顧一下，塊狀元素會另起一行，並佔據全部可用的寬度，無論內容有沒有。而內聯元素會並排顯示，寬度緊隨內容變化而變化。塊狀元素一般用在大塊的內容上，例如標題，結構元素。內聯元素用在小塊的內容上，好比將幾句話加粗或斜體顯示。

display屬性

元素如何顯示——例如塊狀元素，內聯元素和其餘元素——都由顯示屬性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屬性：

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

box-sizing

如今，在盒子模型中有一個附加屬性。若是你設置了元素的width爲400像素，並將padding設置爲20像素，將border設置爲10像素，那麼實際的盒子寬度爲460像素。記住，盒子的寬度是width,padding和border相加得到的。

可是在CSS3中，盒子模型有了一個不同的計算方式。CSS3推出了box-sizing屬性，徹底改變了盒子模型的運做模式和元素大小的計算方式。這個屬性有三個主要值——content-box，padding-box和 border-box——每一個值對盒子模型大小的計算稍微有些不同。

content-box

content-box這個屬性值是默認值。這個默認值和元素不加box-sizing屬性時的效果是一致的。元素從width和height屬性的值開始計算，加上padding，border和margin屬性值得到盒子的實際尺寸。

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

---

特定瀏覽器的屬性和值

上例中box-sizing屬性前的連字符和字母是什麼？

CSS3的推出後，瀏覽器逐步開始以加前綴的方式支持新屬性和值，包括box-sizing屬性。隨着部分CSS規範被瀏覽器普遍支持以及瀏覽器版本的更新，前綴的做用也愈來愈小，隨着時間的發展將再也不是一個問題。但在老版本瀏覽器中仍是不可或缺的。

屬性名和屬性值均可以添加前綴。例如，上例中的box-sizing屬性名加了前綴。瀏覽器能夠選擇何時加前綴何時不加前綴，所以有些屬性須要帶有某瀏覽器的前綴，有些屬性不須要。

接下來的課程中，若某個屬性或值須要前綴，只會在介紹那個屬性時添加使用（這有利於保持代碼的簡潔）。不過大家在實際寫代碼的時候不要忘記添加前綴。

最多見的幾個瀏覽器前綴歸納以下：

• Mozilla的火狐瀏覽器： -moz-
• 微軟的IE瀏覽器：-ms-
• Webkit（谷歌的Chrome瀏覽器和蘋果的Safari瀏覽器）：-webkit-

---

padding-box

屬性值padding-box時，元素將padding屬性值計算入width和height屬性值內，改變了盒子模型計算模式。例如，元素的width設置爲400像素，padding值設爲20像素，最終元素實際的寬度仍是400像素。隨着內邊距的擴大，元素的內容區域會隨着縮小，可是盒子實際大小並未發生改變。

若是咱們增長border或margin，那麼盒子的大小就是這些屬性值加上width和height的值。例如，咱們將元素的的width設置爲400像素，每一個方向的border都設置爲10像素，padding設置爲20像素，那麼元素的實際寬度就爲420像素。

div {
  box-sizing: padding-box;
}

---

值 padding-box 已被棄用

隨着CSS規範的更新，box-sizing的值padding-box已被棄用，咱們不該再使用它。

---

Border Box

最後一個屬性值是border-box，它將border和padding都算在元素的width和height屬性值內。例如，一個元素的width爲400像素，每邊的padding爲20像素，border爲10像素，最終元素的實際寬度仍然爲400像素。
若咱們還增長了margin屬性，在獲取盒子總大小時它的值須要作加法計算。無論box-sizing的屬性值是什麼， 計算盒子總大小時任何margin的值都須要作加法計入。

div {
  box-sizing: border-box;
}

使用box-sizing屬性

一般來講，box-sizing最佳屬性值爲border-box,這個屬性值更易計算。若是咱們將一個元素的width爲400像素，那麼無論你增長了邊框仍是內邊距，它的大小都仍是400像素。

另外，咱們也能夠輕鬆的相對值。若是咱們設置一個元素的寬度爲40%，元素每邊的padding值爲20像素，border值爲10像素。那麼儘管有地方設置了像素值，元素盒子的實際大小仍然爲40%。

惟一遺憾的是box-sizing是CSS3的屬性，並非全部瀏覽器都支持，尤爲是老版本瀏覽器。所幸隨着瀏覽器版本更新，影響會愈來愈小。咱們使用box-sizing的時候，須要留意哪些瀏覽器會出現兼容問題。

開發者工具

大多數瀏覽器都有開發者工具。咱們可使用這些工具查看頁面上的元素、這些元素的HTML結構
和CSS屬性及它們值。它們大部分都有盒子模型圖解。

在Chrome瀏覽器中打開菜單欄，找到「更多工具」選項中的「開發者工具」選項並點擊它，瀏覽器窗口的底部會顯示出一個視窗，其中提供了一些代碼檢查工具。

懸停或點擊視窗中的元素節點，能夠查看這個元素的信息。

選中一個元素後，在視窗右側選中「Computed」選項，咱們就能夠看到咱們選中的元素的盒子模型。

Chrome， Firefox，Safari以及其餘瀏覽器中都有開發者工具。查看源代碼能夠學到不少東西。我在編寫HTML和CSS的時候一般都會打開開發者工具，也經常用它查看分析其餘網站的源代碼。

練習

如今咱們回到以前作的「樣式討論會」網站，並未它添加更多的內容。

• 首先，在main.css文件中添加一個box-sizing屬性，值設置爲border-box，這樣可使咱們的元素更容易控制。在文件的頁面重置樣式下，添加一條註釋，有助於網站佈局。把它放在樣式重置代碼之下，是使其放在正確的層疊關係上。
  在這裏，咱們可使用通配符選擇器*，後面跟隨帶僞元素的選擇器*:before和*:after,這樣就能夠選中頁面中全部的元素，將其box-sizing值設置爲border-box。請記住，box-sizing是有前綴的，由於它是一個較新的屬性。

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

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

• 接下來咱們要建立一個能夠做爲咱們元素容器的class屬性。用它在不一樣的元素上設置共同的width，padding屬性，並將元素居中。 在咱們通配符選擇器下，建立一個新的class選擇器名爲container。在選擇器中將width設置爲960像素，padding-left和padding-right設置爲30像素，上下外邊距設置爲0，左右外邊距設爲auto。
  container告訴瀏覽器全部使用了這選擇器的元素的寬度。左右外邊距值設爲auto，再加之設好的寬度值，可讓瀏覽器自動計算出左右相等的外邊距，元素就相對於頁面居中了。最後設置左右內邊距，使內容不緊貼元於素的邊緣，爲內容提供一點喘息的空間。

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

• 如今container已經可使用，咱們把它添加到全部頁面的<header>和<footer>元素上，全部頁面包括index.html，speakers.html，schedule.html，venue.html以及register.html頁面。

<header class="container">...</header>

<footer class="container">...</footer>

• 接下來，咱們將container添加到介紹會議的<session>元素和包含<section>做爲子元素的`<section>元素上。

<section class="container">...</section>

• 另外，也將container添加到其餘頁面中包含有<h1>元素的<section>元素上。

<section class="container">
  <h1>...</h1>
</section>

• 稍後咱們還會再回來調整這些元素和class屬性。如今咱們先作另外一件事。
• 如今咱們的內容已經居中顯示，接下來爲元素建立縱向的間隔。咱們先把標題和段落的底部外邊距設置爲22像素。咱們將這個排版樣式以及它的註釋放在以前的容器樣式之下。

/*
  ========================================
  Typography
  ========================================
*/

h1, h3, h4, h5, p {
  margin-bottom: 22px;
}

• 咱們在此跳過了<h2>和<h6>元素，由於設計中<h2>不須要外邊距，<h6>此次咱們不會用到。
• 如今咱們在頁面第一個<section>的底部放置一個按鈕，併爲其設置邊框和圓角。
  咱們先添加一個<a>元素，並將其的class屬性值設爲btn和btn-alt.

<a class="btn btn-alt">...</a>

• 接下來咱們在排版樣式之下爲這兩個屬性值添加樣式。
• 首先建立一個能被全部按鈕共享的樣式的class選擇器btn。咱們但願全部的按鈕的border-radius爲5像素，display爲inline-block，並移除全部外邊距。

/*
  ========================================
  Buttons
  ========================================
*/

.btn {
  border-radius: 5px;
  display: inline-block;
  margin: 0;
}

• 咱們使用btn-alt爲當前按鈕設置特殊的樣式。咱們增長1像素的灰色邊框，而且設置上下內邊距爲10像素，左右內邊距爲30像素

.btn-alt {
  border: 1px solid #dfe2e5;
  padding: 10px 30px;
}

• 咱們在同一<a>元素中使用了btn和btn-alt，那麼相應的樣式都會渲染上去。
• 在主頁上，咱們爲包含上述<a>元素的<section>元素設置padding樣式。咱們經過在其上添加一個class屬性值hero來實現。

<section class="hero container">
  ...
</section>

• 最後，咱們在CSS文件分隔出一塊專門設置主頁的樣式，而後hero添加padding屬性。

/*
  ========================================
  Home
  ========================================
*/

.hero {
  padding: 22px 80px 66px 80px;
}

如今咱們的網站更加完整了，尤爲是主頁。

---

通配符選擇器

在此練習的第一步，咱們提到了通配符選擇器*，它會選中全部的元素。相比於一一列出全部能想到的單個元素，不如使用它來選中全部的元素。

咱們也在第一步中提到了僞元素:before和:before，它們能夠在CSS中動態生成元素。咱們不會當前項目中使用它。不過在通配符選擇器中使用僞元素是很經常使用的作法。

---

演示源代碼

這是練習的源代碼。點擊下載

總結

休息一下咱們再繼續。

將盒子模型全部內容學完並不容易。這些概念雖然只是簡單介紹，卻花了不少時間來掌握它。

這節課所學內容歸納以下：

• 元素是如何顯示的
• 什麼是盒子模型，它爲何很重要
• 怎麼修改元素的大小，包括寬度和高度
• 怎麼添加元素的外邊距，內邊距和邊框
• 怎麼修改元素box-sizing及其對盒子模型的影響

如今咱們對如何顯示元素和設置尺寸有了更好的瞭解，接下來咱們深刻了解一下元素的定位。

文章來源

http://learn.shayhowe.com/htm...