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