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

資訊專欄INFORMATION COLUMN

標(biāo)準(zhǔn)盒模型、怪異盒模型對比與應(yīng)用

keithxiaoy / 3037人閱讀

摘要：百度標(biāo)準(zhǔn)盒模型，所有的介紹都是在標(biāo)準(zhǔn)模式下，一個塊的總寬度左右左右左右在怪異模式下，一個塊的總寬度左右既已經(jīng)包含了和值然后再介紹一下新屬性那么，到底這兩個公式里提到的總寬度是什么意思呢兩種模式最終效果有什么差別呢話不多說，上代碼先看標(biāo)準(zhǔn)

百度標(biāo)準(zhǔn)盒模型，所有的介紹都是
在標(biāo)準(zhǔn)模式下，一個塊的總寬度=width+margin(左右)+padding(左右)+border(左右)
在怪異模式下，一個塊的總寬度=width+margin（左右）（既width已經(jīng)包含了padding和border值）
然后再介紹一下css3新屬性
box-sizing: border-box;

那么，到底這兩個公式里提到的總寬度是什么意思呢？兩種模式最終效果有什么差別呢？
話不多說，上代碼
html

css

#box {
    width: 400px;
    height: 400px;
    margin: 70px;
    padding: 20px;
    border: 5px solid black;
}
#child {
    width: 100%;
    height: 100%;
}

先看標(biāo)準(zhǔn)模式：
元素

父元素

子元素

標(biāo)準(zhǔn)模式，我們設(shè)置#box的寬高為400px，其對應(yīng)的content（內(nèi)容區(qū)）寬高為400px，
父元素的高度為#box內(nèi)容區(qū)高度+上下border+上下padding，結(jié)果為450px
子元素的高度為#box內(nèi)容區(qū)高度

然后我們再看下怪異模式
css添加代碼

div {
    box-sizing: border-box;
}

元素

父元素

子元素

標(biāo)準(zhǔn)模式，我們設(shè)置#box的寬高為400px，其對應(yīng)的content（內(nèi)容區(qū)）寬高卻是
width-上下padding-上下border，結(jié)果為350px;
父元素的高度為#box內(nèi)容區(qū)高度+上下border+上下padding，結(jié)果為400px
子元素的高度為#box內(nèi)容區(qū)高度350px

標(biāo)準(zhǔn)盒模型中，css設(shè)置width為x，對應(yīng)元素content便為x
而在怪異模式中，元素的content寬度是由x減左右padding，再減左右margin得出的

上面我們了解了標(biāo)準(zhǔn)盒模型和怪異模式的區(qū)別，接下來我們舉個應(yīng)用的例子，僅供參考
需求：創(chuàng)建一個div，div的左側(cè)距屏幕左側(cè)20px，div的右側(cè)在屏幕中間
標(biāo)準(zhǔn)模式可以輕松實現(xiàn)

position: absolute;
left: 20px;
right: 50%;

如果右側(cè)位置改為屏幕中間位置左側(cè)30px，如何實現(xiàn)？
可以設(shè)置一個父元素，讓div右側(cè)距離父元素30px即可，為方便展示，這里使用行內(nèi)樣式

如果需求更進(jìn)一步，要求元素能夠撐起父元素的高度，如何實現(xiàn)？
顯然position已經(jīng)無法滿足需求
實現(xiàn)方式有很多，這里我們只介紹使用怪異模式如何實現(xiàn)


    
測試測試測試測試測試測試測試測試測試測試

效果圖

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

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

相關(guān)文章

  • 標(biāo)準(zhǔn)盒模型與怪異盒模型 + box-sizing

    摘要：標(biāo)準(zhǔn)盒模型標(biāo)準(zhǔn)所有元素可以看作盒子，在中，這一術(shù)語是用來設(shè)計和布局時使用。在標(biāo)準(zhǔn)盒模型中盒子占位高度與之一樣。不幸的是，和在怪異模式中使用自己的非標(biāo)準(zhǔn)模型。 標(biāo)準(zhǔn)盒模型(w3c標(biāo)準(zhǔn)) 所有HTML元素可以看作盒子，在CSS中，box model這一術(shù)語是用來設(shè)計和布局時使用。CSS盒模型本質(zhì)上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內(nèi)容。 showImg(h...

    SimpleTriangle 評論0 收藏0

  • 【前端芝士樹】詳解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

    摘要：提供了糟糕的支持，而雖然接近標(biāo)準(zhǔn)，但依舊未能完全正確的支持標(biāo)準(zhǔn)。盡管修復(fù)了許多的問題，但是依然延續(xù)實現(xiàn)中的其它故障主要是盒模型問題。因此大部分的聲明將觸發(fā)嚴(yán)格模式即依據(jù)標(biāo)準(zhǔn)的規(guī)則渲染網(wǎng)頁。 深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文將從盒模型開始，一步步涉及一些常見的前端筆試和面試點 主要參考自第一篇文章，然而筆者在讀的時...

    binta 評論0 收藏0

  • CSS盒模型對比

    摘要：盒模型一般分為標(biāo)準(zhǔn)盒模型，盒模型一般大家都是使用需要注意的是設(shè)置了這樣一條樣式所以在使用過程中需要小心，不要沖突，導(dǎo)致怪異的情況出現(xiàn)而不知原因默認(rèn)值標(biāo)準(zhǔn)盒模型顧名思義此時屬性值是內(nèi)容的寬度，而盒子的寬度是的寬度所以盒子大小會隨 盒模型一般分為：w3c標(biāo)準(zhǔn)盒模型（content-box），IE盒模型（boder-box）一般大家都是使用content-box,需要注意的是bootstra...

    thekingisalwaysluc 評論0 收藏0

  • CSS盒模型對比

    摘要：盒模型一般分為標(biāo)準(zhǔn)盒模型，盒模型一般大家都是使用需要注意的是設(shè)置了這樣一條樣式所以在使用過程中需要小心，不要沖突，導(dǎo)致怪異的情況出現(xiàn)而不知原因默認(rèn)值標(biāo)準(zhǔn)盒模型顧名思義此時屬性值是內(nèi)容的寬度，而盒子的寬度是的寬度所以盒子大小會隨 盒模型一般分為：w3c標(biāo)準(zhǔn)盒模型（content-box），IE盒模型（boder-box）一般大家都是使用content-box,需要注意的是bootstra...

    young.li 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<