資訊專(zhuān)欄INFORMATION COLUMN
摘要：標(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 + margin
(border與padding向內(nèi)容外填充)
低版本IE盒子模型：寬度=內(nèi)容寬度（content+border+padding）+ margin
(border與padding向內(nèi)容內(nèi)填充)
標(biāo)準(zhǔn)盒子模型
IE盒子模型
上刺刀
box1
box2
可以看出我們?cè)O(shè)置了box-sizing
box-sizing屬性？
用來(lái)控制元素的盒子模型的解析模式，默認(rèn)為content-box
context-box：W3C的標(biāo)準(zhǔn)盒子模型，設(shè)置元素的 height/width 屬性指的是content部分的高/寬，定義的寬度和高度之外繪制元素的內(nèi)邊距和邊框
border-box：IE傳統(tǒng)盒子模型。設(shè)置元素的height/width屬性指的是border + padding + content部分的高/寬
適用場(chǎng)景
比如我們?cè)趯?xiě)一個(gè)頭部，background：gray，我們需要兩邊有10px的距離，如果設(shè)margin：0 10px的話，會(huì)發(fā)現(xiàn)兩邊有了間距，但是間距不是灰色背景，而且出現(xiàn)了滾動(dòng)條，這個(gè)時(shí)候就需要我們的padding：0 10px,完美解決了兩邊留白的尷尬，但是滾動(dòng)條還在，這就需要上大刀box-sizing:border-box;就會(huì)發(fā)現(xiàn)滾動(dòng)條沒(méi)了，頭部也很美觀。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114731.html
摘要：盒模型要點(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...
摘要：盒模型要點(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...
摘要：內(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)簽. 狹...
摘要：前端之盒模型顯隱定位與流式布局思想前端之盒模型顯隱定位與流式布局思想盒模型的顯隱盒模型的顯隱盒子的顯隱通過(guò)控制盒子的顯示方式來(lái)隱藏盒子該隱藏方式在頁(yè)面中不占位通過(guò)控制盒子的透明度來(lái)隱藏盒子該隱藏方式在頁(yè)面中占位注一般顯隱操作的盒子都是采用前端之盒模型顯隱、定位與流式布局思想 盒模型的顯隱 盒子的顯隱 .box, .wrap { ...
閱讀 1880·2021-11-22 15:24
閱讀 1332·2021-11-12 10:36
閱讀 3239·2021-09-28 09:36
閱讀 1886·2021-09-02 15:15
閱讀 2782·2019-08-30 15:54
閱讀 2414·2019-08-30 11:02
閱讀 2417·2019-08-29 13:52
閱讀 3565·2019-08-26 11:53
