[CSS]關于盒子模型

jsyzchen 發布于2019-08-30 15:53 / 655人閱讀

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

盒子模型概念

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

外邊距的合并

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

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

box-sizing屬性介紹

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

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

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

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

即總寬度=margin+width

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

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

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

瀏覽器間的盒子模型。

（1）ul標簽在Mozilla中默認是有padding值的，而在IE中只有margin有值。

（2）標準盒子模型與IE模型之間的差異：

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

云服務器 GPU云服務器盒子模型比價盒子盒子比價電視盒子

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116777.html

CSS中盒模型的理解

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

shmily 2019-04-23 11:49 評論0 收藏0
關于CSS你應該知道的基礎知識 - 盒模型篇

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

OnlyLing 2019-08-02 10:13 評論0 收藏0
關于CSS你應該知道的基礎知識 - 盒模型篇

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

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

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

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

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

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