網(wǎng)站建設(shè)截圖中國女排聯(lián)賽排名
前言
CSS 盒模型是 CSS 基礎(chǔ)的重點(diǎn)難點(diǎn)，因此常被面試官們拿來考察候選人對前端基礎(chǔ)的掌握程度，這篇文章將對 CSS 盒模型知識點(diǎn)進(jìn)行全面的梳理。
我們先看個(gè)例子：下面的 div 元素的總寬度是多少呢？
js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <title>CSS 盒模型(https://github.com/webharry/fe-interview)</title>
<style>
div {background-color: lightgrey;width: 200px;border: 10px solid yellow;padding: 10px;margin: 20px;
}
</style>
</head>
<body><div>這里是盒子內(nèi)的實(shí)際內(nèi)容。有 10px 內(nèi)間距，20px 外間距、10px 黃色邊框。</div>
</body>
</html>要回答這個(gè)問題，我們首先得弄明白 CSS 盒模型。
什么是 CSS 盒模型？
每個(gè)HTML元素都由一個(gè)矩形框（盒子）組成，稱為盒模型。CSS 盒模型定義了一個(gè) HTML 元素的尺寸和邊距。
盒模型的各個(gè)部分
CSS 中組成一個(gè)盒子需要：
- Content box: 這個(gè)區(qū)域是用來顯示內(nèi)容，大小可以通過設(shè)置?
width?和?height。 - Padding box: 包圍在內(nèi)容區(qū)域外部的空白區(qū)域；大小通過?
padding?相關(guān)屬性設(shè)置。 - Border box: 邊框盒包裹內(nèi)容和內(nèi)邊距。大小通過?
border?相關(guān)屬性設(shè)置。 - Margin box: 這是最外面的區(qū)域，是盒子和其他元素之間的空白區(qū)域。大小通過?
margin?相關(guān)屬性設(shè)置。
如圖所示：
CSS 有兩種盒模型：標(biāo)準(zhǔn)盒模型和IE盒模型。
- 標(biāo)準(zhǔn)盒模型：元素的寬度和高度只包括內(nèi)容（content），不包括內(nèi)邊距（padding）、邊框（border）和外邊距（margin）。
- IE盒模型：元素的寬度和高度包括內(nèi)容（content）、內(nèi)邊距（padding）和邊框（border），但不包括外邊距（margin）。
兩種盒模型的區(qū)別是什么？
這兩種盒模型的區(qū)別在于它們?nèi)绾斡?jì)算元素的寬度和高度，以及如何處理元素的內(nèi)邊距、邊框和外邊距。
- 在標(biāo)準(zhǔn)盒模型中，元素的寬度和高度只包括內(nèi)容，因此設(shè)置寬度和高度時(shí)需要考慮內(nèi)邊距、邊框和外邊距對它們的影響。
- 如圖：
- 而在IE盒模型中，元素的寬度和高度包括內(nèi)邊距和邊框，因此設(shè)置寬度和高度時(shí)不需要考慮內(nèi)邊距和邊框?qū)λ鼈兊挠绊憽?
- 如圖：
重要:??當(dāng)您指定一個(gè) CSS 元素的寬度（width）和高度（height）屬性時(shí)，你只是設(shè)置內(nèi)容區(qū)域（content）的寬度和高度。
兩種盒模型間如何轉(zhuǎn)換？
可以通過設(shè)置 CSS 的 box-sizing 屬性來指定使用哪種盒模型。默認(rèn)情況下，box-sizing 屬性的值為 content-box，即使用標(biāo)準(zhǔn)盒模型?？梢詫⑵湓O(shè)置為 border-box，即使用IE盒模型。
寫在最后
現(xiàn)在，我們再來看文章開頭的例子，答案顯而易見。因?yàn)樵谀J(rèn)情況下，box-sizing 屬性的值為 content-box，即使用標(biāo)準(zhǔn)盒模型。所以例子中的 div 元素總寬度是 200+10x2+10x2=240px。
大廠面試題分享 面試題庫
前后端面試題庫 （面試必備） 推薦：★★★★★
地址：前端面試題庫??web前端面試題庫 VS java后端面試題庫大全