[CSS]關(guān)于盒子模型

jsyzchen 發(fā)布于2019-08-30 15:53 / 669人閱讀

摘要：盒子模型概念盒子模型又稱(chēng)框模型，包含了元素內(nèi)容內(nèi)邊距邊框外邊距幾個(gè)要素。盒子的包含內(nèi)容即總寬度很多框架，都會(huì)對(duì)盒子模型的計(jì)算方法進(jìn)行簡(jiǎn)化。規(guī)定應(yīng)從父元素繼承屬性的值一般設(shè)置為比較好，符合直覺(jué)瀏覽器間的盒子模型。

盒子模型概念

CSS css盒子模型又稱(chēng)框模型 (Box Model) ，包含了元素內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）、外邊距（margin）幾個(gè)要素。

外邊距的合并

兩個(gè)上下方向相鄰的元素框垂直相遇時(shí)，外邊距會(huì)合并，合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距中較高的那個(gè)邊距值，如圖：

需要注意的是：只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。

box-sizing屬性介紹

box-sizing : content-box|border-box|inherit;

(1) content-box ,默認(rèn)值，可以使設(shè)置的寬度和高度值應(yīng)用到元素的內(nèi)容框。盒子的width只包含內(nèi)容。

即總寬度=margin+border+padding+width

(2) border-box , 設(shè)置的width值其實(shí)是除margin外的border+padding+element的總寬度。盒子的width包含border+padding+內(nèi)容

即總寬度=margin+width

很多CSS框架，都會(huì)對(duì)盒子模型的計(jì)算方法進(jìn)行簡(jiǎn)化。

(3) inherit , 規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值

一般設(shè)置為border-box比較好，符合直覺(jué)

瀏覽器間的盒子模型。

（1）ul標(biāo)簽在Mozilla中默認(rèn)是有padding值的，而在IE中只有margin有值。

（2）標(biāo)準(zhǔn)盒子模型與IE模型之間的差異：

標(biāo)準(zhǔn)的盒子模型就是上述介紹的那種，而IE模型更像是 box-sizing : border-box; 其內(nèi)容寬度還包含了border和padding。解決辦法就是：在html模板中加doctype聲明。

云服務(wù)器 GPU云服務(wù)器盒子模型比價(jià)盒子盒子比價(jià) 電視盒子

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

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

相關(guān)文章

CSS中盒模型的理解

摘要：如圖為了方便大家理解和嘗試，我寫(xiě)了一個(gè)小放上來(lái)方便大家嘗試顯示盒模型盒模型計(jì)算規(guī)則元素框的總寬度元素的的左邊距和右邊距的值的左邊距和右邊距的值的左右寬度元素框的總高度元素的的上下邊距的值的上下邊距的值的上下寬度。今天突然看到一篇關(guān)于CSS中盒模型的文章，忽然覺(jué)得自己竟然遺忘了很多小的地方，所以寫(xiě)一篇文章來(lái)記憶一下（摘抄于千與千尋寫(xiě)的CSS盒子模型理解，并在自己基礎(chǔ)上添加了一些東西，希望更完...

shmily 2019-04-23 11:49 評(píng)論0 收藏0
關(guān)于CSS你應(yīng)該知道的基礎(chǔ)知識(shí) - 盒模型篇

摘要：瀏覽器渲染引擎通過(guò)盒模型的方式來(lái)布局元素。應(yīng)用后元素的外邊框增加了寬度。應(yīng)用后元素內(nèi)的內(nèi)容和邊框之間產(chǎn)生了相應(yīng)的空間。上面的代碼在中的計(jì)算結(jié)果如下上栗中，我們將盒子四個(gè)方向的都設(shè)置成了。關(guān)于盒模型的高度，可以通過(guò)屬性來(lái)設(shè)置。瀏覽器渲染引擎通過(guò)盒模型的方式來(lái)布局html元素。我們可以將每一個(gè)html元素都看做是一個(gè)盒子，每一個(gè)盒子都有長(zhǎng)和款，多個(gè)這樣的盒子組成了我們的網(wǎng)頁(yè)。 Margi...

OnlyLing 2019-08-02 10:13 評(píng)論0 收藏0
關(guān)于CSS你應(yīng)該知道的基礎(chǔ)知識(shí) - 盒模型篇

摘要：瀏覽器渲染引擎通過(guò)盒模型的方式來(lái)布局元素。應(yīng)用后元素的外邊框增加了寬度。應(yīng)用后元素內(nèi)的內(nèi)容和邊框之間產(chǎn)生了相應(yīng)的空間。上面的代碼在中的計(jì)算結(jié)果如下上栗中，我們將盒子四個(gè)方向的都設(shè)置成了。關(guān)于盒模型的高度，可以通過(guò)屬性來(lái)設(shè)置。瀏覽器渲染引擎通過(guò)盒模型的方式來(lái)布局html元素。我們可以將每一個(gè)html元素都看做是一個(gè)盒子，每一個(gè)盒子都有長(zhǎng)和款，多個(gè)這樣的盒子組成了我們的網(wǎng)頁(yè)。 Margi...

Jrain 2019-08-30 15:53 評(píng)論0 收藏0
關(guān)于css margin，你需要知道的一切

摘要：前兩個(gè)元素之間的是，因?yàn)檩^小的頂部與較大的底部相結(jié)合。這是由于兩個(gè)重疊造成的。同樣，這種行為也有一定的邏輯。這意味著在使用百分比時(shí)，元素周?chē)拇笮《际窍嗤摹? 為了保證的可讀性，本文采用意譯而非直譯。當(dāng)我們學(xué)習(xí)CSS時(shí)，我們大多數(shù)人學(xué)到的第一件事是CSS中盒子的各個(gè)部分的細(xì)節(jié)，這部分通過(guò)叫做 CSS盒、模型。盒模型中的元素之一是margin，即盒子周?chē)耐该鲄^(qū)域，它會(huì)將其他元素從盒子...

FreeZinG 2019-08-30 15:44 評(píng)論0 收藏0
關(guān)于css margin，你需要知道的一切

摘要：前兩個(gè)元素之間的是，因?yàn)檩^小的頂部與較大的底部相結(jié)合。這是由于兩個(gè)重疊造成的。同樣，這種行為也有一定的邏輯。這意味著在使用百分比時(shí)，元素周?chē)拇笮《际窍嗤摹? 為了保證的可讀性，本文采用意譯而非直譯。當(dāng)我們學(xué)習(xí)CSS時(shí)，我們大多數(shù)人學(xué)到的第一件事是CSS中盒子的各個(gè)部分的細(xì)節(jié)，這部分通過(guò)叫做 CSS盒、模型。盒模型中的元素之一是margin，即盒子周?chē)耐该鲄^(qū)域，它會(huì)將其他元素從盒子...

libxd 2019-08-26 10:28 評(píng)論0 收藏0