摘要：你也可以多帶帶設(shè)置某一個邊的三個不同屬性，如，等。屬性設(shè)置與元素相關(guān)聯(lián)的盒子模型的左外邊距。首先是我們的代碼然后是代碼上述代碼產(chǎn)生以下結(jié)果輪廓輪廓最后，還有重要的一點，一個框的是一個看起來像是邊界但又不屬于框模型的東西。

注：全文摘要自網(wǎng)絡(luò)開發(fā)者網(wǎng)站，當(dāng)然間隔也會整理一些思路和格式排版添加進(jìn)去。

CSS框模型（譯者注：也被稱為“盒模型”）是網(wǎng)頁布局的基礎(chǔ) ——每個元素被表示為一個矩形的方框，框的內(nèi)容、內(nèi)邊距、邊界和外邊距像洋蔥的膜那樣，一層包著一層構(gòu)建起來。瀏覽器渲染網(wǎng)頁布局時，它會算出每個框的內(nèi)容要用什么樣式，周圍的洋蔥層有多大，以及框相對于其它框放在哪里。在理解如何創(chuàng)建 CSS 布局之前，你需要理解框模型。

【width 和 height】寬度和高度

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

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

【padding】內(nèi)邊距

padding 表示一個 CSS 框的內(nèi)邊距 ——這一層位于內(nèi)容框的外邊緣與邊界的內(nèi)邊緣之間。

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

• padding-top 是指一個元素在內(nèi)邊距區(qū)域（padding area）中上方的高度。

• padding-bottom 是指一個元素在內(nèi)邊距區(qū)域（padding area）中下方的高度。

• padding-left 是指一個元素在內(nèi)邊距區(qū)域（padding area）中左邊的寬度。

• padding-right 是指一個元素在內(nèi)邊距區(qū)域（padding area）中右邊的寬度。

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

【border】邊界邊框

CSS的border屬性是一個用于設(shè)置各種多帶帶的邊界屬性的簡寫屬性。border可以用于設(shè)置一個或多個以下屬性的值： border-width, border-style, border-color。

CSS 框的邊界（border）是一個分隔層，位于內(nèi)邊距的外邊緣以及外邊距的內(nèi)邊緣之間。邊界的默認(rèn)大小為0——從而讓它不可見——不過我們可以設(shè)置邊界的厚度、風(fēng)格和顏色讓它出現(xiàn)。

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

• border-top，border-right, border-bottom, border-left : 分別設(shè)置某一邊的邊界厚度／風(fēng)格／顏色。

• border-width, border-style, border-color: 分別僅設(shè)置邊界的厚度／風(fēng)格／顏色，并應(yīng)用到全部四邊邊界。

• 你也可以多帶帶設(shè)置某一個邊的三個不同屬性，如 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設(shè)置到了一個聲明中。這些屬性描述了元素的下邊框樣式。

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

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

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

【margin】外邊距

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

注意: 外邊距有一個特別的行為被稱作外邊距塌陷（margin collapsing）：當(dāng)兩個框彼此接觸時，它們的間距將取兩個相鄰?fù)膺吔绲淖畲笾?，而非兩者的總和?/p>

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

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

• margin-bottom 屬性用于設(shè)置元素的底部外邊距，允許設(shè)置負(fù)數(shù)值。一個正數(shù)值將讓它相對于正常流與鄰近塊更遠(yuǎn)，而負(fù)數(shù)值將使得更近。

• margin-left 屬性 設(shè)置與元素相關(guān)聯(lián)的盒子模型的左外邊距。這個值可以為負(fù)值。

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

一些提示及想法

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

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

• 框的高度不遵守百分比的長度；框的高度總是采用框內(nèi)容的高度，除非指定一個絕對的高度（如：px 或者em），它會比在頁面上默認(rèn)是100%高度更實用。

• border也忽略百分比寬度設(shè)置。

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

box-sizing 屬性用于更改用于計算元素寬度和高度的默認(rèn)的 CSS 盒子模型?？梢允褂么藢傩詠砟M不正確支持CSS盒子模型規(guī)范的瀏覽器的行為。

高級的框操作

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

溢流

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

• auto: 當(dāng)內(nèi)容過多，溢流的內(nèi)容被隱藏，然后出現(xiàn)滾動條來讓我們滾動查看所有的內(nèi)容。
• hidden: 當(dāng)內(nèi)容過多，溢流的內(nèi)容被隱藏。
• visible: 當(dāng)內(nèi)容過多，溢流的內(nèi)容被顯示在盒子的外邊（這個是默認(rèn)的行為）

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

首先是HTML代碼：

   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.



   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.



   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.

然后是應(yīng)用到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; }

上邊的代碼給出了以下的結(jié)果：

背景裁剪（Background clip）

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

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

然后是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; }

上述代碼產(chǎn)生以下結(jié)果：

輪廓(Outline)

最后，還有重要的一點， 一個框的 outline 是一個看起來像是邊界但又不屬于框模型的東西。它的行為和邊界差不多，但是并不改變框的尺寸（更準(zhǔn)確的說，輪廓被勾畫于在框邊界之外，外邊距區(qū)域之內(nèi)）

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

CSS 框類型

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

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

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

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

注意：默認(rèn)狀態(tài)下display屬性值，塊級元素display: block ，行內(nèi)元素display: inline

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

首先，HTML代碼：

   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.



  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.



  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.

現(xiàn)在我們加一些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; }

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

例：制作三角形盒子模型

HTML代碼如下：

CSS代碼：

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

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

end
2018-06-01