資訊專欄INFORMATION COLUMN
摘要：盒模型要點知識務必注意看，這可是前端面試必定會遇到的問題。盒模型的主要屬性，除繼承外有兩個值這里不再細說歷史原因，只說其作用。嚴格來說與標簽大小無關，但是影響視覺上的位置。具象化需調試指出，如下其中的最外圈的黃色區域就是了。
盒模型要點知識
務必注意看，這可是前端面試 必定會遇到 的問題。
box-sizing
盒模型的主要CSS屬性，除繼承外有兩個值：
content-box
這里不再細說歷史原因，只說其作用。
content-box將一個標簽元素所占的 物理像素區域 的計算方法表達為：寬高 + 內邊距 + 邊框 + 外邊距
border-box
border-box將一個標簽元素所占的 物理像素區域 的計算方法表達為：寬高、內邊距、邊框的最大值 + 外邊距
這里說的寬高就是CSS屬性的width與height，或者是子標簽所撐起來的大小。
下面介紹其他三個相關屬性
內邊距（padding）
首先，你想想一個立方體包裝盒，其內部有一個小一點的盒子，那么里面盒子與外面這個盒子相隔的區域就是內邊距，換做HTML標簽具象化如下：
其中紅色區域就是內邊距
邊框（border）
邊框就是字面意思，其HTML具象化如下：
其中黑色就是邊框
外邊距（margin）
外邊距就是標簽間的間距或便簽與父標簽邊線的距離。 嚴格來說與標簽大小無關，但是影響視覺上的位置。HTML具象化需調試指出，如下：
其中的最外圈的黃色區域就是margin了。
注意一下：margin可以負值；inline標簽的上下margin無效。
如果你確實明白了上述概念后，有如下圖示與解說，詳細說了具體的標簽大小計算方式，這里注意，標簽大小是指 物理像素大小，而不是上文說的 物理像素區域。
所占大小就是實際的像素值，而所占區域是包含了margin外邊距的。
注意計算時候，padding和border可都是有四邊的。小建議
官方定義border-box是指把padding與border都算作寬高，理解上有歧義，所以你直接取值當做wh與padding與border最大值即可。
強烈推薦使用border-box來在實際中使用，實際工作或項目中，定制好padding與border后再去修改這兩個值的可能性遠遠低于不改的可能性，所以能用border-box就用border-box吧，* {box-sizing: border-box;}可能是個好習慣。
否則UI丟你個80*80像素大小的樣式，你自己就去拆分吧。
源碼相關CodePen
如果文章對你有一點幫助，我就非常開心了。
喜歡文章的話，請關注下我，定期發布技術相關文章，滿滿都是干貨。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116894.html
摘要：盒模型要點知識務必注意看，這可是前端面試必定會遇到的問題。盒模型的主要屬性，除繼承外有兩個值這里不再細說歷史原因，只說其作用。嚴格來說與標簽大小無關，但是影響視覺上的位置。具象化需調試指出，如下其中的最外圈的黃色區域就是了。 盒模型要點知識 務必注意看，這可是前端面試 必定會遇到 的問題。 box-sizing 盒模型的主要CSS屬性，除繼承外有兩個值： content-box...
摘要：入門教程六分之三篇沒辦法，我直播教小伙伴入門，屬性講完，準備說定位的時候，他們就喊停，不住了。。。選擇器表達式如下相關效果見表達式關鍵詞特性屬性屬性即樣式定制的具體樣式，比如定制寬高，分別為與等。 CSS 入門教程六分之三篇 沒辦法，我直播教小伙伴CSS入門，屬性講完，準備說定位的時候，他們就喊停，hold不住了。。。所以先寫到六分之三，23333333 要點 解釋 引用 如...
摘要：標準的的盒子模型與低版本的盒子模型有什么不同的標準盒子模型寬度內容的寬度與向內容外填充低版本盒子模型寬度內容寬度與向內容內填充標準盒子模型盒子模型上刺刀可以看出我們設置了屬性用來控制元素的盒子模型的解析模式，默認為的標準盒子模型，設 標準的CSS的盒子模型與低版本IE的盒子模型有什么不同的？ 標準盒子模型：寬度=內容的寬度（content）+ border + padding + ma...
閱讀 3864·2021-09-23 11:51
閱讀 3057·2021-09-22 15:59
閱讀 856·2021-09-09 11:37
閱讀 2063·2021-09-08 09:45
閱讀 1260·2019-08-30 15:54
閱讀 2056·2019-08-30 15:53
閱讀 485·2019-08-29 12:12
閱讀 3282·2019-08-29 11:15
