CSS盒模型對(duì)比

thekingisalwaysluc 發(fā)布于2019-08-02 16:07 / 523人閱讀

摘要：盒模型一般分為標(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,需要注意的是bootstrap設(shè)置了這樣一條樣式
*{ box-sizing: border-box; } 所以在使用過(guò)程中需要小心，不要沖突，導(dǎo)致怪異的情況出現(xiàn)而不知原因；

##box-sizing##

content-box 默認(rèn)值（w3c標(biāo)準(zhǔn)盒模型）

顧名思義：此時(shí) width屬性值是內(nèi)容的寬度，而盒子的寬度是content的寬度+padding + border,所以盒子大小會(huì)隨著padding,border的大小改變而改變

.content-box {
  box-sizing: content-box;
  width: 100px;
  padding: 20px;
  border: 20px solid #ff0;
}

border-box （IE盒模型）此時(shí)width屬性值是content+padding+border,

width的值就是盒子大?。ú蛔儯?，修改padding或border會(huì)向內(nèi)塌縮

.border-box {
  box-sizing: border-box;
  width: 100px;
  padding: 20px;
  border: 20px solid #f0f;
}

云服務(wù)器 GPU云服務(wù)器盒模型盒模型html嗎簡(jiǎn)述html盒模型盒遙控

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

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

相關(guān)文章

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

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

keithxiaoy 2019-08-29 12:59 評(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 2019-08-30 15:54 評(píng)論0 收藏0
CSS 盒子模型及 float 和 position

摘要：內(nèi)聯(lián)元素設(shè)置無(wú)效。內(nèi)聯(lián)元素的和屬性，水平方向有效，豎直方向不會(huì)產(chǎn)生邊距效果。和都是通過(guò)改變文檔流來(lái)實(shí)現(xiàn)定位。有三種定位機(jī)制文檔流浮動(dòng)和絕對(duì)定位。元素框正常生成，元素順序顯示，在一個(gè)文檔流中，一個(gè)挨著一個(gè)，內(nèi)容遵守正常從上到下的流。 CSS和模型 CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的 HTML 元素，包括外邊距（marign），邊框（border），填充（padding），內(nèi)容物（...

付永剛 2019-08-30 15:54 評(píng)論0 收藏0
CSS規(guī)范 > 8 盒模型 Box Model

摘要：當(dāng)兩個(gè)及以上外邊距折疊，合并后的外邊距寬度是發(fā)生折疊的外邊距中的最大寬度。如果該元素的外邊距同其父元素的上外邊距折疊，則該盒的上邊框邊緣同其父元盒的上邊框邊緣相同。 2017-07-20: 關(guān)于外邊距折疊, 推薦問(wèn)題: https://segmentfault.com/q/10... 8 盒模型 Box Model URL: http://www.w3.org/TR/CSS2/box...

suemi 2019-08-28 18:14 評(píng)論0 收藏0
【前端學(xué)習(xí)】-盒模型

摘要：前言前端頁(yè)面的構(gòu)建過(guò)程中，盒模型相關(guān)的概念會(huì)一直如影隨形，因此需要深刻地理解好盒模型。本文將從盒模型描述標(biāo)準(zhǔn)盒模型傳統(tǒng)盒模型屬性，常見(jiàn)問(wèn)題。【前言】前端頁(yè)面的構(gòu)建過(guò)程中，盒模型相關(guān)的概念會(huì)一直如影隨形，因此需要深刻地理解好盒模型。本文會(huì)先簡(jiǎn)單描述一下盒模型，然后描述一些平常會(huì)遇到的注意點(diǎn)。本文將從1、盒模型描述；2、W3C標(biāo)準(zhǔn)盒模型/IE傳統(tǒng)盒模型；3.box-sizing屬性；4...

jonh_felix 2019-08-29 13:09 評(píng)論0 收藏0