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

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

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

盒子模型概念

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

外邊距的合并

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

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

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值其實是除margin外的border+padding+element的總寬度。盒子的width包含border+padding+內(nèi)容

即總寬度=margin+width

很多CSS框架，都會對盒子模型的計算方法進行簡化。

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

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

瀏覽器間的盒子模型。

（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ù)器盒子模型比價盒子盒子比價電視盒子

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

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

相關(guān)文章

CSS中盒模型的理解

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

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

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

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

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

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

摘要：前兩個元素之間的是，因為較小的頂部與較大的底部相結(jié)合。這是由于兩個重疊造成的。同樣，這種行為也有一定的邏輯。這意味著在使用百分比時，元素周圍的大小都是相同的。為了保證的可讀性，本文采用意譯而非直譯。當(dāng)我們學(xué)習(xí)CSS時，我們大多數(shù)人學(xué)到的第一件事是CSS中盒子的各個部分的細(xì)節(jié)，這部分通過叫做 CSS盒、模型。盒模型中的元素之一是margin，即盒子周圍的透明區(qū)域，它會將其他元素從盒子...

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

摘要：前兩個元素之間的是，因為較小的頂部與較大的底部相結(jié)合。這是由于兩個重疊造成的。同樣，這種行為也有一定的邏輯。這意味著在使用百分比時，元素周圍的大小都是相同的。為了保證的可讀性，本文采用意譯而非直譯。當(dāng)我們學(xué)習(xí)CSS時，我們大多數(shù)人學(xué)到的第一件事是CSS中盒子的各個部分的細(xì)節(jié)，這部分通過叫做 CSS盒、模型。盒模型中的元素之一是margin，即盒子周圍的透明區(qū)域，它會將其他元素從盒子...

libxd 2019-08-26 10:28 評論0 收藏0