網(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后端面試題庫大全