国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

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

keithxiaoy / 3028人閱讀

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

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

那么，到底這兩個(gè)公式里提到的總寬度是什么意思呢？?jī)煞N模式最終效果有什么差別呢？
話(huà)不多說(shuō)，上代碼
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)模式，我們?cè)O(shè)置#box的寬高為400px，其對(duì)應(yīng)的content（內(nèi)容區(qū)）寬高為400px，
父元素的高度為#box內(nèi)容區(qū)高度+上下border+上下padding，結(jié)果為450px
子元素的高度為#box內(nèi)容區(qū)高度

然后我們?cè)倏聪鹿之惸Ｊ?br>css添加代碼

div {
    box-sizing: border-box;
}

元素

父元素

子元素

標(biāo)準(zhǔn)模式，我們?cè)O(shè)置#box的寬高為400px，其對(duì)應(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，對(duì)應(yīng)元素content便為x
而在怪異模式中，元素的content寬度是由x減左右padding，再減左右margin得出的

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

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

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

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


    
測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試

效果圖

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

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

相關(guān)文章

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

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

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

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

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

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

  • CSS盒模型對(duì)比

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

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

  • CSS盒模型對(duì)比

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

    young.li 評(píng)論0 收藏0

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

0條評(píng)論

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