成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS入門之盒模型（六分之四）

yearsj / 2910人閱讀

摘要：盒模型要點(diǎn)知識(shí)務(wù)必注意看，這可是前端面試必定會(huì)遇到的問(wèn)題。盒模型的主要屬性，除繼承外有兩個(gè)值這里不再細(xì)說(shuō)歷史原因，只說(shuō)其作用。嚴(yán)格來(lái)說(shuō)與標(biāo)簽大小無(wú)關(guān)，但是影響視覺(jué)上的位置。具象化需調(diào)試指出，如下其中的最外圈的黃色區(qū)域就是了。

盒模型要點(diǎn)知識(shí) 
務(wù)必注意看，這可是前端面試 必定會(huì)遇到 的問(wèn)題。

box-sizing

盒模型的主要CSS屬性，除繼承外有兩個(gè)值：

content-box

這里不再細(xì)說(shuō)歷史原因，只說(shuō)其作用。

content-box將一個(gè)標(biāo)簽元素所占的 物理像素區(qū)域 的計(jì)算方法表達(dá)為：寬高 + 內(nèi)邊距 + 邊框 + 外邊距

border-box

border-box將一個(gè)標(biāo)簽元素所占的 物理像素區(qū)域 的計(jì)算方法表達(dá)為：寬高、內(nèi)邊距、邊框的最大值 + 外邊距

這里說(shuō)的寬高就是CSS屬性的width與height，或者是子標(biāo)簽所撐起來(lái)的大小。

下面介紹其他三個(gè)相關(guān)屬性

內(nèi)邊距（padding）

首先，你想想一個(gè)立方體包裝盒，其內(nèi)部有一個(gè)小一點(diǎn)的盒子，那么里面盒子與外面這個(gè)盒子相隔的區(qū)域就是內(nèi)邊距，換做HTML標(biāo)簽具象化如下：

其中紅色區(qū)域就是內(nèi)邊距

邊框（border）

邊框就是字面意思，其HTML具象化如下：

其中黑色就是邊框

外邊距（margin）

外邊距就是標(biāo)簽間的間距或便簽與父標(biāo)簽邊線的距離。 嚴(yán)格來(lái)說(shuō)與標(biāo)簽大小無(wú)關(guān)，但是影響視覺(jué)上的位置。HTML具象化需調(diào)試指出，如下：

其中的最外圈的黃色區(qū)域就是margin了。

注意一下：margin可以負(fù)值；inline標(biāo)簽的上下margin無(wú)效。

如果你確實(shí)明白了上述概念后，有如下圖示與解說(shuō)，詳細(xì)說(shuō)了具體的標(biāo)簽大小計(jì)算方式，這里注意，標(biāo)簽大小是指 物理像素大小，而不是上文說(shuō)的 物理像素區(qū)域。

所占大小就是實(shí)際的像素值，而所占區(qū)域是包含了margin外邊距的。

注意計(jì)算時(shí)候，padding和border可都是有四邊的。
官方定義border-box是指把padding與border都算作寬高，理解上有歧義，所以你直接取值當(dāng)做wh與padding與border最大值即可。
小建議

強(qiáng)烈推薦使用border-box來(lái)在實(shí)際中使用，實(shí)際工作或項(xiàng)目中，定制好padding與border后再去修改這兩個(gè)值的可能性遠(yuǎn)遠(yuǎn)低于不改的可能性，所以能用border-box就用border-box吧，* {box-sizing: border-box;}可能是個(gè)好習(xí)慣。

否則UI丟你個(gè)80*80像素大小的樣式，你自己就去拆分吧。

源碼相關(guān)

CodePen

如果文章對(duì)你有一點(diǎn)幫助，我就非常開心了。
喜歡文章的話，請(qǐng)關(guān)注下我，定期發(fā)布技術(shù)相關(guān)文章，滿滿都是干貨。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52638.html

相關(guān)文章

  • CSS入門之盒模型（六分之四）

    摘要：盒模型要點(diǎn)知識(shí)務(wù)必注意看，這可是前端面試必定會(huì)遇到的問(wèn)題。盒模型的主要屬性，除繼承外有兩個(gè)值這里不再細(xì)說(shuō)歷史原因，只說(shuō)其作用。嚴(yán)格來(lái)說(shuō)與標(biāo)簽大小無(wú)關(guān)，但是影響視覺(jué)上的位置。具象化需調(diào)試指出，如下其中的最外圈的黃色區(qū)域就是了。 盒模型要點(diǎn)知識(shí) 務(wù)必注意看，這可是前端面試 必定會(huì)遇到 的問(wèn)題。 box-sizing 盒模型的主要CSS屬性，除繼承外有兩個(gè)值： content-box...

    VPointer 評(píng)論0 收藏0

  • CSS入門之引用、選擇器、屬性（六分之三）

    摘要：入門教程六分之三篇沒(méi)辦法，我直播教小伙伴入門，屬性講完，準(zhǔn)備說(shuō)定位的時(shí)候，他們就喊停，不住了。。。選擇器表達(dá)式如下相關(guān)效果見(jiàn)表達(dá)式關(guān)鍵詞特性屬性屬性即樣式定制的具體樣式，比如定制寬高，分別為與等。 CSS 入門教程六分之三篇 沒(méi)辦法，我直播教小伙伴CSS入門，屬性講完，準(zhǔn)備說(shuō)定位的時(shí)候，他們就喊停，hold不住了。。。所以先寫到六分之三，23333333 要點(diǎn) 解釋 引用 如...

    baishancloud 評(píng)論0 收藏0

  • css之盒模型

    摘要：內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。規(guī)定應(yīng)該從父元素繼承屬性的值。盒模型 1.定義 1.任意一個(gè)元素都可以當(dāng)作盒模型 2.盒子的大小由內(nèi)容寬高(width/height)+邊距(padding)+邊框(border) 3.盒子由外邊距(margin),影響盒子的位置 廣義盒模型:文檔中所有功能性及內(nèi)容性標(biāo)簽,及文檔中所有顯示性標(biāo)簽. 狹...

    SKYZACK 評(píng)論0 收藏0

  • 面試之盒模型

    摘要：標(biāo)準(zhǔn)的的盒子模型與低版本的盒子模型有什么不同的標(biāo)準(zhǔn)盒子模型寬度內(nèi)容的寬度與向內(nèi)容外填充低版本盒子模型寬度內(nèi)容寬度與向內(nèi)容內(nèi)填充標(biāo)準(zhǔn)盒子模型盒子模型上刺刀可以看出我們?cè)O(shè)置了屬性用來(lái)控制元素的盒子模型的解析模式，默認(rèn)為的標(biāo)準(zhǔn)盒子模型，設(shè) 標(biāo)準(zhǔn)的CSS的盒子模型與低版本IE的盒子模型有什么不同的？ 標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度（content）+ border + padding + ma...

    LiveVideoStack 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<