【華為云全棧成長計劃】CSS盒模型 — 標準盒模型和怪異盒模型

一、CSS盒模型(Box Model)

你可以將每個 HTML 元素/標簽 都當作是一個盒子。然后大盒子里面包裹小盒子，就跟俄羅斯套娃一樣一層包裹一層，這就是所謂的盒模型。

而這個盒子模型，一共是由四個部分組成：

屬性

內容含義

下面這張圖個人覺得很好的說明了盒子模型(Box Model)的構成:

（圖源來自：菜鳥教程）

二、標準盒模型和IE盒模型

盒模型還分為：W3C標準盒模型和IE盒模型（也叫怪異盒模型）。

1、W3C標準盒模型：

W3C標準盒模型的范圍（組成）包括了margin、border、padding、content；但是，content部分并不包括其他組成部分。如下demo：

.box{ ????width:?300px; ????height:?300px; ????margin:?20px; ????border:?20px?solid?red; ????padding:?20px } 按照?W3C標準盒模型?來解析，那么： 這個盒子（box元素）需要占據的位置為： width?=?margin*2?+?border*2?+?padding*2?+?content.width?=?20*2?+?20*2?+?20*2?+?300?=?420px height?=?margin*2?+?border*2?+?padding*2?+?content.height?=?20*2?+20*2?+?20*2?+?300?=?420px 這個盒子（box元素）的實際大小為： width?=?border*2?+?padding*2?+?content.width?=?20*2?+?20*2?+?300?=?380px height?=?border*2?+?padding*2?+?content.height?=?20*2?+?20*2?+?300?=?380px

2.IE盒模型（怪異盒模型）：

IE盒模型（怪異盒模型）的范圍（組成）包括了margin、border、padding、content； 但是，content部分包括了border、content和padding部分。如下demo：

.box{ ????width:?300px; ????height:?300px; ????margin:?20px; ????border:?20px?solid?red; ????padding:?20px } 按照?IE盒模型?來解析，那么： 這個盒子（box元素）需要占據的位置為： width?=?margin*2?+?content.width?=?20*2?+?300?=?380px height?=?margin*2?+?content.height?=?20*2?+?300?=?380px 這個盒子（box元素）的實際大小為： width?=?content.width?=?300px height?=?content.height?=?300px

三、關于box-sizing屬性

W3C給出定義：box-sizing 屬性允許你以某種方式定義某些元素，以適應指定區域。不配合demo的話可能會有點難理解這個定義，簡單來理解它就是轉換標準盒和IE盒的開關。

box-sizing:?content-box?|?border-box?|?inherit;

注意：border-box不包含margin。

四、總結

CSS盒模型主要是用來網頁設計和布局時使用的。它是CSS的基礎，同時也是個難點，在進行布局的時候離不開盒模型的使用。

CSS盒模型分為W3C盒模型和IE(怪異)盒模型；

CSS盒模型由四部分構成：margin、border、padding、content；

計算盒子實際大小的時候不包含margin；計算盒子占據位置大小時需要包含margin；

標準盒模型的content部分不包含其他部分；IE盒模型的content部分包含了border、padding、content；

box-sizing: conent-box;將盒子設置為標準模型（盒子默認為標準模型）；

box-sizing: border-box;將盒子設置為 IE 模型（也叫做怪異盒子）；

最后呢補充一點：瀏覽器的兼容性問題

就是我們在編寫代碼的時候盡量使用W3C的標準，也就是在頁面頭部聲明DOCTYPE類型。這樣可以避免不同瀏覽器對同一頁面的兼容性問題。

在使用CSS盒模型的情況下，如果不聲明DOCTYPE類型，那么在IE瀏覽器下盒模型將會按照IE(怪異)盒模型解析，在其他瀏覽器下回按照W3C標準盒模型進行解析；聲明了DOCTYPE類型，那么所有瀏覽器都會按照W3C標準盒模型進行解析。

五、個人感悟

這是我第一次寫文章，到后面已經是一種自嗨狀態了(我媽說我瘋了)哈哈哈哈哈~~~因為一想到我發布了這個文章會幫助到一些和我同為初學者的小伙伴就很興奮。

寫文章真的蠻辛苦的，不過對自己的所學所見能有一個整理記錄的作用，還能幫助到其他人也是蠻有成就感的一件事~~

還有就是對初學者嘚一個建議，遇到了問題一定要多查多問多記錄！！遇到了問題一定要多查多問多記錄！！遇到了問題一定要多查多問多記錄！！

能加到高質量嘚交流群最好了！！因為真的問大佬要比百度谷歌啥的要有效率的多還能拓展很多知識點，然后多跟他們交流也是能學到一些專業知識或者生活職業相關的常識，對我們初學者真的很有幫助。

誒呀好像有點啰嗦啦第一次寫文章想啥都記錄下來哈哈哈~~那希望這篇文章能對大家有所幫助啦

云搜索服務 CSS 計算

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。