註：全文摘要自網路開發者網站，當然間隔也會整理一些思路和格式排版添加進去。

CSS框模型（譯者註：也被稱為“盒模型”）是網頁佈局的基礎 ——每個元素被表示為一個矩形的方框，框的內容、內邊距、邊界和外邊距像洋蔥的膜那樣，一層包著一層構建起來。瀏覽器渲染網頁佈局時，它會算出每個框的內容要用什麼樣式，周圍的洋蔥層有多大，以及框相對於其它框放在哪裡。在理解如何創建 CSS 佈局之前，你需要理解框模型。

框屬性

文檔的每個元素被構造成文檔佈局內的一個矩形框，框每層的大小都可以使用一些特定的CSS屬性調整。相關屬性如下:

【width 和 height】寬度和高度

width 和 height設置內容框（content box）的寬度和高度。內容框是框內容顯示的區域——包括框內的文本內容，以及表示嵌套子元素的其它框。

註意: 還有其他屬性可以更巧妙地處理內容的大小——設置大小約束而不是絕對的大小。這些屬性包括min-width、max-width、min-height 和 max-height。

【padding】內邊距

padding 表示一個 CSS 框的內邊距 ——這一層位於內容框的外邊緣與邊界的內邊緣之間。

該層的大小可以通過簡寫屬性padding一次設置所有四個邊，或用 padding-top、padding-right、padding-bottom和padding-left 屬性一次設置一個邊。

• padding-top 是指一個元素在內邊距區域（padding area）中上方的高度。

• padding-bottom 是指一個元素在內邊距區域（padding area）中下方的高度。

• padding-left 是指一個元素在內邊距區域（padding area）中左邊的寬度。

• padding-right 是指一個元素在內邊距區域（padding area）中右邊的寬度。

• 內邊距（padding）是指一個元素的內容和邊框之間的區域。和外邊距（margin）不同，內邊距（padding）是不允許有負值的。內邊距（padding）可以用四個值聲明一個元素的四個方向的內邊距（paddings），這是一種CSS縮寫屬性。

【border】邊界邊框

CSS的border屬性是一個用於設置各種單獨的邊界屬性的簡寫屬性。border可以用於設置一個或多個以下屬性的值： border-width, border-style, border-color。

CSS 框的邊界（border）是一個分隔層，位於內邊距的外邊緣以及外邊距的內邊緣之間。邊界的預設大小為0——從而讓它不可見——不過我們可以設置邊界的厚度、風格和顏色讓它出現。

border簡寫屬性可以讓我們一次設置所有四個邊，例如 border: 1px solid black;但這個簡寫可以被各種普通書寫的更詳細的屬性所覆蓋：

• border-top，border-right, border-bottom, border-left : 分別設置某一邊的邊界厚度／風格／顏色。

• border-width, border-style, border-color: 分別僅設置邊界的厚度／風格／顏色，並應用到全部四邊邊界。

• 你也可以單獨設置某一個邊的三個不同屬性，如 border-top-width, border-top-style, border-top-color，等。

附：

• border-top是屬性 border-top-color, border-top-style, 和border-top-width 的三者的縮寫。這些屬性都是在描述一個元素的上方的邊框border。

• border-right 是屬性border-right-color, border-right-style, 和border-right-width的三者的縮寫。這些屬性都是在描述一個元素的右邊的邊框border。

• border-bottom 簡寫屬性把下邊框的所有屬性： border-bottom-color，border-bottom-style 與 border-bottom-width設置到了一個聲明中。這些屬性描述了元素的下邊框樣式。

• border-left 是屬性border-left-color, border-left-style, 和border-left-width的三者的縮寫。這些屬性都是在描述一個元素的左邊的邊框border。

• border-style 是一個 CSS 簡寫屬性，用來設定元素所有邊框的樣式。

• border-color 是一個用於設置元素四個邊框顏色的快捷屬性： border-top-color, border-right-color, border-bottom-color, border-left-color

【margin】外邊距

外邊距（margin）代表 CSS 框周圍的外部區域，稱為外邊距，它在佈局中推開其它 CSS 框。其表現與 padding 很相似；簡寫屬性為 margin，單個屬性分別為 margin-top、margin-right、margin-bottom 和margin-left。

註意: 外邊距有一個特別的行為被稱作外邊距塌陷（margin collapsing）：當兩個框彼此接觸時，它們的間距將取兩個相鄰外邊界的最大值，而非兩者的總和。

• margin屬性為給定元素設置所有四個（上下左右）方向的外邊距屬性。這是四個外邊距屬性設置的簡寫。四個外邊距屬性設置分別是： margin-top， margin-right， margin-bottom 和 margin-left 。指定的外邊距允許為負數。

• margin-top 屬性用來設置元素的頂部外邊距，你也可以使用負值。

• margin-bottom 屬性用於設置元素的底部外邊距，允許設置負數值。一個正數值將讓它相對於正常流與鄰近塊更遠，而負數值將使得更近。

• margin-left 屬性 設置與元素相關聯的盒子模型的左外邊距。這個值可以為負值。

• 豎直排列相鄰的兩個盒子模型的外邊距會重疊，稱為 margin collapsing.

一些提示及想法

• 預設情況下background-color/background-image 延伸到了border的內邊緣。background-clip( background-clip 設置元素的背景（背景圖片或顏色）是否延伸到邊框下麵。) 屬性來改變。

• 如果content框變得比示例輸出視窗大，它將從視窗溢出，此時會出現滾動條，你可以滾動視窗來查看盒子剩餘的內容 。你可以使用overflow（overflow 屬性指定當內容溢出其塊級容器時,是否剪輯內容，顯示滾動條或顯示溢出的內容。)屬性來控制溢出。

• 框的高度不遵守百分比的長度；框的高度總是採用框內容的高度，除非指定一個絕對的高度（如：px 或者em），它會比在頁面上預設是100%高度更實用。

• border也忽略百分比寬度設置。

• 你應該註意的是框的總寬度是width, padding-right, padding-left, border-right, 以及 border-left 屬性之和。在一些情況下比較惱人（例如，假使你想要一個框占視窗寬度的50%，但邊界和內邊距是用像素來表示時該怎麼辦？），為了避免這種問題，有可能使用屬性box-sizing來調整框模型。使用值border-box，它將框模型更改成這個新的模型：

box-sizing 屬性用於更改用於計算元素寬度和高度的預設的 CSS 盒子模型。可以使用此屬性來模擬不正確支持CSS盒子模型規範的瀏覽器的行為。

高級的框操作

在設置框的width, height, border, padding 及margin之外， 還有一些其他的屬性可以改變它們的行為。本節討論這些其他的屬性。

溢流

當你使用絕對的值設置了一個框的大小（如，固定像素的寬/高），允許的大小可能不適合放置內容，這種情況下內容會從盒子溢流。我們使用overflow屬性來控制這種情況的發生。它有一些可能的值，但是最常用的是：

• auto: 當內容過多，溢流的內容被隱藏，然後出現滾動條來讓我們滾動查看所有的內容。
• hidden: 當內容過多，溢流的內容被隱藏。
• visible: 當內容過多，溢流的內容被顯示在盒子的外邊（這個是預設的行為）

該示例展示了這些設置是如何工作的：

首先是HTML代碼：

<p class="autoscroll">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

<p class="clipped">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

<p class="default">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
</p>

然後是應用到HTML的CSS代碼：

p {
  width  : 400px;
  height : 2.5em;
  padding: 1em 1em 1em 1em;
  border : 1px solid black;
}

.autoscroll { overflow: auto;    }
.clipped    { overflow: hidden;  }
.default    { overflow: visible; }

上邊的代碼給出了以下的結果：

背景裁剪（Background clip）

框的背景是由顏色和圖片組成的，它們堆疊在一起(background-color, background-image）。 它們被應用到一個盒子里，然後被畫在盒子的下麵。預設情況下，背景延伸到了邊界外沿。這通常是OK的，但是在一些情況下比較討厭（假使你有一個平鋪的背景圖，你只想要它延伸到內容的邊沿會怎麼做？），該行為可以通過設置盒子的background-clip屬性來調整。

讓我們通過一個示例來看看這個是怎麼工作的。首先是我們的HTML代碼：

<div class="default"></div>
<div class="padding-box"></div>
<div class="content-box"></div>

然後是CSS代碼:

div {
  width  : 60px;
  height : 60px;
  border : 20px solid rgba(0, 0, 0, 0.5);
  padding: 20px;
  margin : 20px 0;

  background-size    : 140px;
  background-position: center;
  background-image   : url('https://mdn.mozillademos.org/files/11947/ff-logo.png');
  background-color   : gold;
}

.default     { background-clip: border-box;  }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }

上述代碼產生以下結果：

輪廓(Outline)

最後，還有重要的一點， 一個框的 outline 是一個看起來像是邊界但又不屬於框模型的東西。它的行為和邊界差不多，但是並不改變框的尺寸（更準確的說，輪廓被勾畫於在框邊界之外，外邊距區域之內）

Note: 使用 outline 屬性的時候要註意，它一般只在需要可用性的一些情況才被使用，例如在一些用戶點擊它的時候使用 outline 來表示高亮、可用，如果你要使用 outline，請確保不要因為它看起來像鏈接的高亮讓用戶迷惑。

CSS 框類型

之前我們說的所有對於框的應用都表示的是塊級元素的，然而，CSS還有一些表現不同的其他框類型。我們可以通過display屬性來設定元素的框類型。display屬性有很多的屬性值。在本篇文章，我們將關註三個最常見的類型：block, inline, and inline-block。

• 塊框（ block box）是定義為堆放在其他框上的框（例如：其內容會獨占一行），而且可以設置它的寬高，之前所有對於框模型的應用適用於塊框 （ block box）

• 行內框（ inline box）與塊框是相反的，它隨著文檔的文字（例如：它將會和周圍的文字和其他行內元素出現在同一行，而且它的內容會像一段中的文字一樣隨著文字部分的流動而打亂），對行內盒設置寬高無效，設置padding, margin 和 border都會更新周圍文字的位置，但是對於周圍的的塊框（ block box）不會有影響。

• 行內塊狀框（inline-block box） 像是上述兩種的集合：它不會重新另起一行但會像行內框（ inline box）一樣隨著周圍文字而流動，而且他能夠設置寬高，並且像塊框一樣保持了其塊特性的完整性，它不會在段落行中斷開。（在下麵的示例中，行內塊狀框會放在第二行文本上，因為第一行沒有足夠的空間，並且不會突破兩行。然而，如果沒有足夠的空間，行內框會在多條線上斷裂，而它會失去一個框的形狀。）

註意：預設狀態下display屬性值，塊級元素display: block ，行內元素display: inline

這些東西在短時間聽起來可能讓你很混亂，現在讓我們來看一些簡單的小例子。

首先，HTML代碼：

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <span class="inline">Mauris tempus turpis id ante mollis dignissim.</span>
   Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="inline-block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

現在我們加一些CSS:

p {
  padding : 1em;
  border  : 1px solid black;
}

span {
  padding : 0.5em;
  border  : 1px solid green;

  /* That makes the box visible, regardless of its type */
  background-color: yellow;
}

.inline       { display: inline;       }
.block        { display: block;        }
.inline-block { display: inline-block; }

上面的代碼給出了這個結果，說明瞭顯示類型的不同效果：

例：製作三角形盒子模型

HTML代碼如下：

<!--製作三角形-->
<div class="triangle"></div>

CSS代碼：

.triangle{
            width: 0;
            height: 0;
    
/*只定義盒子的下方和左右兩邊的border且讓它們重合就生成了三角形*/
            border-bottom: 30px solid red;
            /*transparent 完全透明*/
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
        }

效果如圖，當然你還可以更改color及三條邊的長度來做出等腰三角形等：

end
2018-06-01