在使用CSS進(jìn)行網(wǎng)頁(yè)布局時(shí)，我們一定離不開(kāi)的一個(gè)東西————盒子模型。盒子模型，顧名思義，盒子就是用來(lái)裝東西的，它裝的東西就是HTML元素的內(nèi)容。或者說(shuō)，每一個(gè)可見(jiàn)的 HTML 元素都是一個(gè)盒子，下面所說(shuō)的盒子都等同于 HTML 元素。這里盒子與現(xiàn)實(shí)中的盒子又有點(diǎn)不同，這里的盒子是二維的。

盒子的組成

---

一個(gè)盒子由外到內(nèi)可以分成四個(gè)部分：margin（外邊距）、border（邊框）、padding（內(nèi)邊距）、content（內(nèi)容）。會(huì)發(fā)現(xiàn)margin、border、padding是CSS屬性，因此可以通過(guò)這三個(gè)屬性來(lái)控制盒子的這三個(gè)部分。而content則是HTML元素的內(nèi)容。

盒子的大小

---

盒子的大小指的是盒子的寬度和高度。大多數(shù)初學(xué)者容易將寬度和高度誤解為width和height屬性，然而默認(rèn)情況下width和height屬性只是設(shè)置content（內(nèi)容）部分的寬和高。盒子真正的寬和高按下面公式計(jì)算：

盒子的寬度 = 內(nèi)容寬度 + 左填充 + 右填充 + 左邊框 + 右邊框 + 左邊距 + 右邊距

盒子的高度 = 內(nèi)容高度 + 上填充 + 下填充 + 上邊框 + 下邊框 + 上邊距 + 下邊距

為了顯得專(zhuān)業(yè)一點(diǎn)，我們還可以用帶屬性的公式表示：

盒子的寬度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

上面說(shuō)到的是 默認(rèn) 情況下的計(jì)算方法，另外一種情況下，width和height屬性設(shè)置的就是盒子的寬度和高度。盒子的寬度和高度的計(jì)算方式由box-sizing屬性控制。

box-sizing屬性值

content-box：默認(rèn)值，width和height屬性分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距、邊框、外邊距。

border-box：為元素設(shè)定的width和height屬性決定了元素的邊框盒。就是說(shuō)，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。通過(guò)從已設(shè)定的寬度和高度分別減去 邊框 和 內(nèi)邊距 才能得到內(nèi)容的寬度和高度。

inherit：規(guī)定應(yīng)從父元素繼承box-sizing屬性的值。

當(dāng)box-sizing：content-box時(shí)，這種盒子模型成為標(biāo)準(zhǔn)盒子模型，當(dāng)box-sizing: border-box時(shí)，這種盒子模型稱(chēng)為IE盒子模型。

盒子成分分析

---

margin

margin，盒子的外邊框，他是完全透明的，開(kāi)發(fā)者只可以設(shè)置它的邊距。

margin包含了上下左右四條邊，開(kāi)發(fā)者可以單獨(dú)設(shè)置每一條邊的邊距。

• margin-top：上邊距
• margin-buttom：下邊距
• margin-left：左邊距
• margin-right：右邊距

開(kāi)發(fā)者也可以直接使用簡(jiǎn)寫(xiě)屬性margin同時(shí)設(shè)置四條邊的寬度。

margin示例1

/*margin屬性后只跟一個(gè)值，同時(shí)設(shè)置四條邊的邊距相等*/ margin: 10px; /*下面樣式與上面的樣式等價(jià)*/ margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;

margin示例2

/*margin屬性后跟兩個(gè)值，第一個(gè)值設(shè)置上下邊距，第二個(gè)是設(shè)置左右邊距*/ margin: 10px 20px; /*下面樣式與上面的樣式等價(jià)*/ margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px;

margin示例3

/*margin屬性后跟三個(gè)值，第一個(gè)值設(shè)置上邊距，第二個(gè)是設(shè)置左右邊距，第三個(gè)值設(shè)置下邊距*/ margin: 10px 20px 30px; /*下面樣式與上面的樣式等價(jià)*/ margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 20px;

margin示例4

/*margin屬性后跟四個(gè)值，第一個(gè)值設(shè)置上邊距，第二個(gè)是設(shè)置右邊距，第三個(gè)值設(shè)置下邊距，第四個(gè)值設(shè)置左邊距*/ margin: 10px 20px 30px 40px; /*下面樣式與上面的樣式等價(jià)*/ margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 20px;

padding

padding表示盒子的內(nèi)邊距（填充）。與外邊距不同，padding不是只能完全透明的，可以設(shè)置背景顏色和圖片。

與margin類(lèi)似，padding包含了上下左右四條邊，開(kāi)發(fā)者可以單獨(dú)設(shè)置每一條邊的邊距。

• padding-top：上部填充
• padding-bottom：下部填充
• padding-left：左部填充
• padding-right：右部填充

開(kāi)發(fā)者也可以直接使用簡(jiǎn)寫(xiě)屬性padding同時(shí)設(shè)置四條邊的寬度。這一部分的用法與上面的margin類(lèi)似，可以參考margin的四個(gè)實(shí)例。

border

border表示盒子的邊界，它可以設(shè)置成可見(jiàn)的，樣式多樣的。

最基本的，border像margin和padding一樣可以分別對(duì)每一條邊進(jìn)行設(shè)置，也可以使用簡(jiǎn)寫(xiě)屬性border進(jìn)行設(shè)置。

• border-top：上邊界
• border-bottom：下邊界
• border-left：左邊界
• border-right：右邊界

當(dāng)border屬性的色值不明確指定時(shí)，如border: 1px solid，邊框顏色與當(dāng)前元素的字體顏色color相同。

border實(shí)例1

/*使用簡(jiǎn)寫(xiě)屬性，同時(shí)設(shè)置四條邊界，四條邊界的寬度、樣式和顏色都是一樣的*/ border: 2px solid green; /*下面的樣式與上面的樣式等價(jià)*/ border-top: 2px solid green; border-bottom: 2px solid green; border-left: 2px solid green; border-right: 2px solid green;

除了可以單獨(dú)對(duì)每一條邊進(jìn)行樣式設(shè)置之外，還可以分別對(duì)邊界的寬度、樣式和顏色進(jìn)行設(shè)置（下面的屬性會(huì)對(duì)四條邊進(jìn)行設(shè)置），同樣可以使用簡(jiǎn)寫(xiě)屬性border進(jìn)行設(shè)置。

• border-width：邊界寬度
• border-style：邊界樣式
• border-color：邊界顏色

border-sytle屬性可取值：

• none：定義無(wú)邊框。
• hidden：與 “none” 相同。不過(guò)應(yīng)用于表時(shí)除外，對(duì)于表，hidden 用于解決邊框沖突。
• dotted：定義點(diǎn)狀邊框。在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線。
• dashed：定義虛線。在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線。
• solid：定義實(shí)線。
• double：定義雙線。雙線的寬度等于 border-width 的值。
• groove：定義 3D 凹槽邊框。其效果取決于 border-color 的值。
• ridge：定義 3D 壟狀邊框。其效果取決于 border-color 的值。
• inset：定義 3D inset 邊框。其效果取決于 border-color 的值。
• outset：定義 3D outset 邊框。其效果取決于 border-color 的值。
• inherit：規(guī)定應(yīng)該從父元素繼承邊框樣式。

border實(shí)例2

/*使用簡(jiǎn)寫(xiě)屬性設(shè)置寬度、樣式和顏色，同時(shí)作用于四條邊*/ border: 2px dotted green; /*下面的樣式與上面的樣式等價(jià)*/ border-width: 2px; border-style: dotted; border-color: green;

這還不算完，開(kāi)發(fā)者還可以對(duì)單獨(dú)一條邊界單獨(dú)設(shè)置寬度、樣式或顏色。以上兩組屬性都可以作為下面屬性的簡(jiǎn)寫(xiě)屬性。

• border-top-width：上邊界寬度
• border-top-style：上邊界樣式
• border-top-color：上邊界顏色
• border-bottom-width：下邊界寬度
• border-bottom-style：下邊界樣式
• border-bottom-color：下邊界顏色
• border-left-width：左邊界寬度
• border-left-style：左邊界樣式
• border-left-color：左邊界顏色
• border-right-width：右邊界寬度
• border-right-style：右邊界樣式
• border-right-color：右邊界顏色

border實(shí)例3

/*使用簡(jiǎn)寫(xiě)屬性設(shè)置寬度、樣式和顏色，同時(shí)作用于四條邊*/ border: 2px dotted green; /*下面的樣式與上面簡(jiǎn)寫(xiě)樣式等價(jià)*/ border-width: 2px; border-style: dotted; border-color: green; /*下面的樣式與上面簡(jiǎn)寫(xiě)樣式等價(jià)*/ border-top: 2px solid green; border-bottom: 2px solid green; border-left: 2px solid green; border-right: 2px solid green; /*下面樣式又與上面三個(gè)樣式的任意一個(gè)樣式等價(jià)*/ border-top-width: 2px; border-top-style: dotted; border-top-color: green; border-bottom-width: 2px; border-bottom-style: dotted; border-bottom-color: green; border-left-width: 2px; border-left-style: dotted; border-left-color: green; border-right-width: 2px; border-right-style: dotted; border-right-color: green;

上面的屬性是對(duì)各邊的寬度、樣式和顏色進(jìn)行設(shè)置，下面一些有趣的屬性可以讓盒子變得更加地有創(chuàng)意、更加好看。

首先，了解一下 邊界半徑 ，也就是圓角。邊界半徑由屬性border-radius進(jìn)行控制，這是一個(gè)簡(jiǎn)寫(xiě)屬性，像上面提到過(guò)的margin、padding等一樣，可以有一個(gè)、兩個(gè)、三個(gè)或四個(gè)值進(jìn)行設(shè)置。同樣也可以對(duì)盒子的每一個(gè)角的半徑進(jìn)行單獨(dú)設(shè)置。

• border-top-left-radius：左上角
• border-top-right-radius：右上角
• border-bottom-left-radius：左下角
• border-bottom-left-radius：右下角

邊界半徑可以使用 px、em 等長(zhǎng)度單位，也可以使用百分?jǐn)?shù)。

border-radius值的個(gè)數(shù)以及每個(gè)值對(duì)應(yīng)控制的位置：

• 一個(gè)值：設(shè)置四個(gè)角有相同的邊界半徑；
• 兩個(gè)值：第一個(gè)值設(shè)置左上角和右下角，第二個(gè)值設(shè)置右上角和左下角；
• 三個(gè)值：第一個(gè)值設(shè)置左上角，第二個(gè)值設(shè)置右上角和左下角，第三個(gè)值設(shè)置右下角；
• 四個(gè)值：第一個(gè)值設(shè)置左上角，第二個(gè)值設(shè)置右上角，第三個(gè)值設(shè)置右下角，第四個(gè)之設(shè)置左下角。

border實(shí)例4

/*以簡(jiǎn)寫(xiě)屬性的三個(gè)值為例*/ border-radius: 10px 20px 30px; /*下面樣式與上面簡(jiǎn)寫(xiě)屬性樣式等價(jià)*/ border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-right-radius: 30px; border-bottom-left-radius: 20px;

開(kāi)發(fā)者還可以設(shè)置x半徑和y半徑的不同，創(chuàng)建橢圓形角。x半徑表示水平半徑，y半徑表示垂直半徑。在border-radius屬性中，x半徑和y半徑用“/”分隔，在border-top-left等四個(gè)屬性中，傳入兩個(gè)值，第一個(gè)值表示x半徑，第二個(gè)值表示y半徑。

border實(shí)例5

/*簡(jiǎn)寫(xiě)屬性的x半徑設(shè)置兩個(gè)值，y半徑設(shè)置三個(gè)值*/ border-radius: 30px 20px / 20px 10px 30px; /*在簡(jiǎn)寫(xiě)屬性中設(shè)置角度時(shí)，值與盒子角的映射是x和y分開(kāi)的，按照上面提到的規(guī)則進(jìn)行映射*/ /*x半徑兩個(gè)值，第一個(gè)值控制左上角和右下角，第二個(gè)值控制右上角和左下角*/ /*y半徑三個(gè)值，第一個(gè)值控制左上角，第二個(gè)值控制右上角和左下角，第三個(gè)值控制右下角*/ border-top-left-radius: 30px 20px; border-top-right-radius: 20px 10px; border-bottom-right-radius: 30px 30px; border-bottom-left-radius: 20px 10px;

圖形邊界

圖形邊界是用圖形來(lái)作為盒子的邊界border。我將這一部分單獨(dú)作為一個(gè)小節(jié)的原因是，圖形邊界border-image是CSS3新增的內(nèi)容，實(shí)現(xiàn)起來(lái)比較復(fù)雜，而且只有一些版本比較新的主流瀏覽器支持。

在這只圖形邊界之前，需要先設(shè)置一個(gè)邊界，讓圖形有顯示的空間，同時(shí)也可以讓不支持圖形邊界的瀏覽器顯示這個(gè)預(yù)先設(shè)定好的非圖形邊界。然后，還需要將背景顏色和背景圖片限制在填充和內(nèi)容之內(nèi)（默認(rèn)情況下，背景顏色和背景圖片作用在border，padding和content，邊界的樣式浮在背景之上），這需要用到background-clip屬性。

background-clip屬性的值：

• border-box：背景延伸到邊框外沿（但是在邊框之下）。
• padding-box：邊框下面沒(méi)有背景，即背景延伸到內(nèi)邊距外沿。
• content-box：背景裁剪到內(nèi)容區(qū) (content) 外沿。
• text：背景被裁剪為文字的前景色(只有chrome支持)。

在圖形邊界中用到以下屬性：

• border-image：設(shè)置圖形邊界，簡(jiǎn)寫(xiě)屬性
• border-image-source：圖形的來(lái)源（路徑），可以接收一個(gè)URL函數(shù)或一個(gè)漸變作為值。
• border-image-slice：圖形的切片大小
• border-image-width：圖形邊界的寬度
• border-image-repeat：定義圖片如何填充邊框
• border-image-outset：定義邊界內(nèi)部和內(nèi)邊距之間的額外空間的大小

可能有很多小伙伴看不懂，沒(méi)關(guān)系，下面對(duì)以上屬性進(jìn)行詳細(xì)的解釋。

border-image-source

從圖形的來(lái)源開(kāi)始說(shuō)起。圖形的來(lái)源可以是一個(gè)圖片或者漸變顏色。設(shè)置圖片用URL(path)函數(shù)，設(shè)置漸變顏色用linear-gradient(to top|bottom|left|right, beginColor1, endColor2)函數(shù)。還有一個(gè)默認(rèn)值none，當(dāng)使用默認(rèn)值的時(shí)候，或者如果圖像無(wú)法顯示，則使用邊框樣式border-style。有了圖形還不行，還需要對(duì)圖形進(jìn)行切割，才能夠應(yīng)用到邊界上。

border-image-slice

該屬性將圖片切割成9個(gè)區(qū)域，包括四個(gè)角，四條邊以及中心區(qū)域。四條切片線，從它們各自的側(cè)面設(shè)置給定距離，控制區(qū)域的大小。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-88tKMWop-1575875310422)(https://developer.mozilla.org/files/3814/border-image-slice.png “圖片切割方法”)]

上圖中，四條切片線將圖片切成了9份。其中1、2、3、4為四個(gè)角區(qū)域，將會(huì)對(duì)應(yīng)應(yīng)用到盒子邊界的四個(gè)角；5、6、7、8為四個(gè)邊界區(qū)域，將會(huì)對(duì)應(yīng)應(yīng)用到盒子邊界的四條邊；區(qū)域9為中心區(qū)域，默認(rèn)情況下會(huì)被丟棄，但如果設(shè)置了fill關(guān)鍵字（可以被設(shè)置在屬性的任何一個(gè)位置(前面、后面或者兩個(gè)值之間)），則會(huì)將其作為背景圖形。

border-image-slice屬性的值可以是數(shù)字或百分?jǐn)?shù)，還有關(guān)鍵字fill。值的個(gè)數(shù)可以是1-4個(gè)，其規(guī)則與margin、padding等屬性一樣。

border-image-repeat

該屬性設(shè)置圖片在邊框的填充方式。值的個(gè)數(shù)可以是一個(gè)或兩個(gè)，一個(gè)值時(shí)設(shè)置所有的邊框，兩個(gè)值時(shí)分別設(shè)置水平與垂直的邊框。它具有下面的值：

• stretch：拉伸圖片以填充邊框。
• repeat：平鋪圖片以填充邊框。
• round：平鋪圖像。當(dāng)不能整數(shù)次平鋪時(shí)，根據(jù)情況放大或縮小圖像。
• space：平鋪圖像 。當(dāng)不能整數(shù)次平鋪時(shí)，會(huì)用空白間隙填充在圖像周?chē)?#xff08;不會(huì)放大或縮小圖像）
• inherit：繼承父級(jí)元素的計(jì)算值。

border-image-width

設(shè)置圖形邊界的寬度。當(dāng)border-image-width的值大于border-width時(shí)，圖形不會(huì)向margin方向擴(kuò)展，而是會(huì)向padding和content方向擴(kuò)展，覆蓋。

border-image-width屬性的值可以是長(zhǎng)度或百分?jǐn)?shù)，以及auto。值的個(gè)數(shù)為1-4個(gè)，其規(guī)則與margin、padding等屬性的規(guī)則一致。

border-image-outset

該屬性設(shè)置邊框圖像可超出邊框盒的大小。講的通俗一點(diǎn)，就是在圖像和padding之間增加一些填充，將邊框圖像往外擠。它的值可以是長(zhǎng)度或百分?jǐn)?shù)，值的個(gè)數(shù)為1-4個(gè)，其規(guī)則與margin、padding等屬性的規(guī)則一致。

border-image

該屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，他可以設(shè)置上面提到的五個(gè)屬性，其基本語(yǔ)法如下：

<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

關(guān)于“||”、“?”等符號(hào)的意義可以查看CSS屬性值定義語(yǔ)法。

border-image實(shí)例

background:blue; background-clip: padding-box; border: 20px dotted green; border-image:url(https://mdn.mozillademos.org/files/13060/border-image.png) 40 / 10px / 20px round; /*其中border-image屬性可以用以下一組屬性代替*/ border-image-source: url(https://mdn.mozillademos.org/files/13060/border-image.png); border-image-slice: 40; border-image-width: 10px; border-image-outset: 20px; border-image-repeat: round;

盒子陰影

在盒子的組成成分之外，CSS3給盒子添加了陰影。盒子的陰影由box-shadow屬性控制，陰影的輪廓與盒子邊界border的輪廓一樣。該屬性的正規(guī)語(yǔ)法如下：

none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

• inset：默認(rèn)陰影在邊框外。使用 inset 后，陰影在邊框內(nèi)（即使是透明邊框），背景之上內(nèi)容之下。
• offset-x, offset-y：這是頭兩個(gè)長(zhǎng)度值，用來(lái)設(shè)置陰影偏移量，相對(duì)于border外邊線開(kāi)始計(jì)算。offset-x 設(shè)置水平偏移量，如果是負(fù)值則陰影位于元素左邊。offset-y 設(shè)置垂直偏移量，如果是負(fù)值則陰影位于元素上面。如果兩者都是0，那么陰影位于元素后面。這時(shí)如果設(shè)置了 blur-radius 或 spread-radius 則有模糊效果。
• blur-radius：這是第三個(gè)長(zhǎng)度值。值越大，模糊面積越大，陰影就越大越淡。 不能為負(fù)值。默認(rèn)為0，此時(shí)陰影邊緣銳利。
• spread-radius：這是第四個(gè)長(zhǎng)度值。取正值時(shí)，陰影擴(kuò)大；取負(fù)值時(shí)，陰影收縮。默認(rèn)為0，此時(shí)陰影與元素同樣大。
• color：如果沒(méi)有指定，則由瀏覽器決定——通常是color的值，不過(guò)目前Safari取透明。

設(shè)置多個(gè)陰影時(shí)，使用逗號(hào)將每個(gè)陰影的值隔開(kāi)。前面的陰影會(huì)在后面陰影之上，如果上層有透明度較低的部分，會(huì)與下層的顏色重疊，合成新顏色。

border-shadow實(shí)例

/* offset-x | offset-y | color */ box-shadow: 60px -16px teal;/* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black;/* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);/* inset | offset-x | offset-y | color */ box-shadow: inset 5em 1em gold;/* 多個(gè)陰影*/ box-shadow: 3px 3px red, -1em 0 0.4em olive, 5px 10px 5px 5px green;/*全局關(guān)鍵字*/ box-shadow: inherit; box-shadow: initial; box-shadow: unset;

瀏覽器兼容性

---

本部分內(nèi)容引用w3cSchool CSS教程的CSS盒子模型

一旦為頁(yè)面設(shè)置了恰當(dāng)?shù)?DTD，大多數(shù)瀏覽器都會(huì)按照上面的圖示來(lái)呈現(xiàn)內(nèi)容。然而 IE 5 和 6 的呈現(xiàn)卻是不正確的。根據(jù) W3C 的規(guī)范，元素內(nèi)容占據(jù)的空間是由 width 屬性設(shè)置的，而內(nèi)容周?chē)?padding 和 border 值是另外計(jì)算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標(biāo)準(zhǔn)模型。這些瀏覽器的 width 屬性不是內(nèi)容的寬度，而是內(nèi)容、內(nèi)邊距和邊框的寬度的總和。

雖然有方法解決這個(gè)問(wèn)題。但是目前最好的解決方案是回避這個(gè)問(wèn)題。也就是，不要給元素添加具有指定寬度的內(nèi)邊距，而是嘗試將內(nèi)邊距或外邊距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持 填充的寬度和邊框的寬度屬性設(shè)。

解決IE8及更早版本不兼容問(wèn)題可以在HTML頁(yè)面聲明 <!DOCTYPE html>即可。

參考

[1] w3cSchool CSS教程

[2] MDN Styling boxes

總結(jié)

以上是生活随笔為你收集整理的CSS盒子模型总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。