CSS盒模型對比

young.li 發(fā)布于2019-08-30 15:54 / 3278人閱讀

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

盒模型一般分為：w3c標(biāo)準盒模型（content-box），IE盒模型（boder-box）一般大家都是使用content-box,需要注意的是bootstrap設(shè)置了這樣一條樣式
*{ box-sizing: border-box; } 所以在使用過程中需要小心，不要沖突，導(dǎo)致怪異的情況出現(xiàn)而不知原因；

##box-sizing##

content-box 默認值（w3c標(biāo)準盒模型）

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

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

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

width的值就是盒子大?。ú蛔儯薷膒adding或border會向內(nèi)塌縮

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

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

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

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

相關(guān)文章

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

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

keithxiaoy 2019-08-29 12:59 評論0 收藏0
CSS盒模型對比

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

thekingisalwaysluc 2019-08-02 16:07 評論0 收藏0
CSS 盒子模型及 float 和 position

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

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

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

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

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

jonh_felix 2019-08-29 13:09 評論0 收藏0