本篇內(nèi)容主要講解“CSS盒模型的相關(guān)知識(shí)點(diǎn)有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS盒模型的相關(guān)知識(shí)點(diǎn)有哪些”吧!

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比城子河網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式城子河網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋城子河地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。

我們先看個(gè)例子：下面的 div 元素的總寬度是多少呢？

 
    



    
這里是盒子內(nèi)的實(shí)際內(nèi)容。有 10px 內(nèi)間距，20px 外間距、10px 黃色邊框。

要回答這個(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)邊距、邊框和外邊距對(duì)它們的影響。

• 如圖：

• 而在IE盒模型中，元素的寬度和高度包括內(nèi)邊距和邊框，因此設(shè)置寬度和高度時(shí)不需要考慮內(nèi)邊距和邊框?qū)λ鼈兊挠绊憽?img src="/upload/otherpic54/90814.jpg" alt="CSS盒模型的相關(guān)知識(shí)點(diǎn)有哪些">

• 如圖：

重要: 當(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盒模型。

到此，相信大家對(duì)“CSS盒模型的相關(guān)知識(shí)點(diǎn)有哪些”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！