閱讀(289.5k) 書簽贊(84) 我要糾錯(cuò)

CSS Box Model (盒子模型)

2020-11-11 11:24 更新

CSS Box Model (盒子模型)

所有 HTML 元素可以看作盒子，在 CSS 中，"box model "這一術(shù)語是用來設(shè)計(jì)和布局時(shí)使用。

CSS 盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的 HTML 元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。

盒模型允許我們?cè)谄渌睾椭車剡吙蛑g的空間放置元素。

下面的圖片說明了盒子模型 (Box Model)：

不同部分的說明：

Margin（外邊距） - 清除邊框區(qū)域。Margin 沒有背景顏色，它是完全透明
Border（邊框） - 邊框周圍的填充和內(nèi)容。邊框是受到盒子的背景顏色影響
Padding（內(nèi)邊距） - 清除內(nèi)容周圍的區(qū)域。會(huì)受到框中填充的背景顏色影響
Content（內(nèi)容） - 盒子的內(nèi)容，顯示文本和圖像

為了在所有瀏覽器中的元素的寬度和高度設(shè)置正確的話，你需要知道的盒模型是如何工作的。

提示：在盒模型中，外邊距可以是負(fù)值，而且在很多情況下都要使用負(fù)值的外邊距。

提示：參考 CSS盒子模型的內(nèi)部結(jié)構(gòu) 可以了解更多的信息。

元素的寬度和高度

Remark 重要: 當(dāng)您指定一個(gè) CSS 元素的寬度和高度屬性時(shí)，你只是設(shè)置內(nèi)容區(qū)域的寬度和高度。要知道，完全大小的元素，你還必須添加填充，邊框和邊距。.

下面的例子中的元素的總寬度為 300px：

width:250px;

padding:10px;

border:5px solid gray;

margin:10px;

讓我們自己算算：
250px (寬)
+ 20px (左 + 右填充)
+ 10px (左 + 右邊框)
+ 20px (左 + 右邊距)
= 300px

試想一下，你只有 250 像素的空間。讓我們?cè)O(shè)置總寬度為 250 像素的元素：

實(shí)例

width:220px;
padding:10px;
border:5px solid gray;
margin:0px;

嘗試一下 ?

最終元素的總寬度計(jì)算公式是這樣的：

總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

元素的總高度最終計(jì)算公式是這樣的：

總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

瀏覽器的兼容性問題

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

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

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

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

CSS Box Model (盒子模型)

CSS Box Model (盒子模型)

所有 HTML 元素可以看作盒子，在 CSS 中，"box model "這一術(shù)語是用來設(shè)計(jì)和布局時(shí)使用。

元素的寬度和高度

實(shí)例

瀏覽器的兼容性問題

相關(guān)閱讀

推薦文章

推薦教程

推薦課程

所有 HTML 元素可以看作盒子，在 CSS 中，"box model "這一術(shù)語是用來設(shè)計(jì)和布局時(shí)使用。