詳解css盒模型與外邊距重疊

roundstones 發(fā)布于2019-08-29 13:18 / 1454人閱讀

摘要：如圖所示代表，代表，代表。以上例子中，和之間的折疊產生的，是個相鄰折疊的結果。將其值分為兩組正值，，負值，，根據(jù)有正有負時的計算規(guī)則，正值的最大值為，負值中絕對值最大的是，所以，最終折疊后的應該是。

盒模型的構成

之前寫了一篇關于如何解決css的外邊距重疊問題,可是后來發(fā)現(xiàn),我有些本末倒置了,對于一個問題的正確的處理流程就應該是先發(fā)現(xiàn)問題,分析問題,解決問題,所以我在這篇文章中就對下css的盒模型,什么是外邊距重疊,為什么會發(fā)生外邊距重疊,以及怎樣計算外邊距重疊一一進行解讀,旨在透過現(xiàn)象看本質,達到掌握的目的.文章可能會有點長,為節(jié)省時間大家可以根據(jù)掌握的情況瀏覽閱讀.

1.結構
為了給文檔樹中的各個元素排版定位(布局),瀏覽器會根據(jù)渲染模型,為每個元素生成四個嵌套的矩形框,他們分別是content box,padding box, border box,margin box,他們是不可分割的,并在一定情況下會重合, 這就是css規(guī)范中所描述的盒模型,它是以CSS的角度去看一個元素被渲染后的抽象形態(tài),是一個元素自身的構成部分.

注：padding、border 和 margin 區(qū)域都包括 top、right、bottom、left 四部分。如圖所示（"LM" 代表 left margin，"RP" 代表 right padding，"TB" 代表 top border……）。

2.邊界

上述四個區(qū)域(content, padding, border, margin)分別有他們的邊界,細化來說, 每個區(qū)域都有top, right, bottom, left四個邊界.

Content邊界/內邊界: content邊界環(huán)繞在由該元素的寬和高決定的一個矩形上,這個尺寸通常由該元素渲染后的內容決定,這四個content邊界組成的矩形框就是該元素的content box.

Padding邊界:padding邊界環(huán)繞在該元素的padding區(qū)域的四周,顧名思義,填充背景色.如果padding的寬度為零,則padding邊界與content邊界重合.這四個padding邊界組成的矩形就是該元素的padding box.

Border邊界:border邊界環(huán)繞在該元素的border區(qū)域的四周.如果border的寬度為零,則border邊界與padding邊界重合.這四個border邊界組成的矩形就是該元素的border box.

Margin邊界:margin邊界環(huán)繞在該元素的margin區(qū)域的四周,如果margin的寬度為零,則margin邊界與border邊界重合.這四個margin邊界組成的矩形就是該元素的margin box.

3.一些小的注意事項,如果你已掌握,請忽略
(1) 對于行內非替換元素(例如span),垂直方向上的margin不起作用
(2) margin不適用于table類型的元素,如table-caption,table,inline-table,以及td,th,tr等.
(3) border-style的可用值有：’none’(無樣式)，’hidden’(隱藏)，’dotted’(點線)，’dashed’(虛線)，’solid’(實線)，’double’(雙線)，’groove’(3D凹槽輪廓)，’ridge’(3D吐槽輪廓)，’inset’(3D凹邊輪廓), "outset"(3D凸邊輪廓).后四項很少用到,所以在此提一下,大家可以嘗試自己運行下,看看他們之間的區(qū)別.

外邊距重疊

這個也是我這篇文章要重點介紹的.
Collapsing margins,即外邊距重疊,指的是毗鄰的兩個或多個普通流中的塊元素垂直方向山的外邊距會合并為一個外邊距.

其中所說的margin毗鄰可以歸結為以下兩點:

這兩個或多個邊距沒有被非空內容,padding,border或clear分隔開

這些margin都處于普通文檔流中
注意一點,在沒有被分割開的情況下,一個元素的margin-top回和它普通流的第一個元素的margin-top相鄰,只有在一個元素的height是"auto"的情況下,他的margin-bottom才會和它普通流中的最后一個元素(非浮動元素等)的margin-bottom相鄰.

示例代碼:

效果圖:

因為.C這個div的高度不是auto,所以他的margin-bottom和他的子元素B的margin-bottom不相鄰,因此,不會發(fā)生重疊,依然只有50px;

折疊后margin的計算
1.參與折疊的margin都是正值
例子:

A
B

在 margin 都是正數(shù)的情況下，取其中 margin 較大的值為最終 margin 值.

示意圖:

2.參與折疊的margin都是負值
例子:

A
B

在 margin 都是負值的時候,取的是其中絕對值較大的,然后從零開始,負向位移.
示意圖:

3.參與折疊的margin中有正值有負值
例子:

A
B

在 margin中有正值有負值的時候,要從所有負值中選出絕對值最大的,所有正值中選擇絕對值最大的,二者相加,此例的結果即為: 100px + (-50)px =50px;

示意圖:

4.相鄰的margin要一起參與計算
例子:

請注意，多個 margin 相鄰折疊成一個 margin，所以計算的時候，應該取所有相關的值一起計算，而不能分開分步來算。
以上例子中，A 和 B 之間的 margin 折疊產生的 margin，是6個相鄰 margin 折疊的結果。將其 margin 值分為兩組：

正值：50px，150px，200px
負值：-60px，-100px，-120px
根據(jù)有正有負時的計算規(guī)則，正值的最大值為 200px，負值中絕對值最大的是 -120px，所以，最終折疊后的 margin 應該是 200 + (-120) = 80px。

浮動元素,inline-block元素,絕對定位的元素和創(chuàng)建了塊級格式化上下文的元素，不和它的子元素發(fā)生 margin 折疊

另外,要注意,自身的margin-botom和margin-top相鄰時也會發(fā)生重疊,只有當自身內容為空,垂直方向上border,padding,均為空時,自身的margin-top與margin-bottom才會相鄰.

原文連接:http://w3help.org/zh-cn/kb/006/
推薦網站: http://w3help.org 這個網站可以幫我們詳細解讀了css很多的特性,非常棒的網站.

以上都是我個人的粗淺之見,希望口下留情,錯誤之處可評論或者私信給我指明,我會及時改正的.另外關于這篇文章的不解之處或者說覺得我說的不完善或者不明確的地方都可以評論或者私信給我.
如果覺得這篇文章幫到你了,記得點贊或者收藏奧!.

GPU云服務器云服務器外邊距重疊 html外邊距上下 html外邊距顏色 html 邊框外邊距

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

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

十分鐘復習CSS盒模型與BFC

摘要：盒模型與本文為收集整理總結網上資源旨在系統(tǒng)復習盒模型與節(jié)省復習時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內容區(qū)盒模型主要分兩種標準盒模型盒模型怪異盒模型兩者的區(qū)別標準盒模型的寬高則為內容區(qū)域的寬高盒模型 css盒模型與BFC 本文為收集整理總結網上資源旨在系統(tǒng)復習css盒模型與bfc 節(jié)省復習時間閱讀10分鐘什么是盒模型每一個文檔中，每...

verano 2019-08-02 10:48 評論0 收藏0
十分鐘復習CSS盒模型與BFC

摘要：盒模型與本文為收集整理總結網上資源旨在系統(tǒng)復習盒模型與節(jié)省復習時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內容區(qū)盒模型主要分兩種標準盒模型盒模型怪異盒模型兩者的區(qū)別標準盒模型的寬高則為內容區(qū)域的寬高盒模型 css盒模型與BFC 本文為收集整理總結網上資源旨在系統(tǒng)復習css盒模型與bfc 節(jié)省復習時間閱讀10分鐘什么是盒模型每一個文檔中，每...

suxier 2019-08-30 15:53 評論0 收藏0
CSS盒模型完整介紹

摘要：盒模型的認識基本概念標準模型模型。如圖由于盒模型的怪異模式，模型和標準模型的內容計算方式不同。設置為標準模型，它的元素寬度。這里就不介紹，大家可以自行搜索。盒模型的認識基本概念：標準模型+IE模型。包括margin,border,padding,content 標準模型和IE模型的區(qū)別 css如何設置獲取這兩種模型的寬和高 js如何設置獲取盒模型對應的寬和高根據(jù)盒模型解釋邊距...

qqlcbb 2019-08-29 14:21 評論0 收藏0
CSS 外邊距(margin)重疊及防止方法

摘要：結果的邊界寬度是相鄰邊界寬度中最大的值。但是邊界的重疊也有例外情況水平邊距永遠不會重合。外邊距重疊示例外邊距重疊是指兩個垂直相鄰的塊級元素，當上下兩個邊距相遇時，起外邊距會產生重疊現(xiàn)象，且重疊后的外邊距，等于其中較大者。邊距重疊解決方案(BFC) 首先要明確BFC是什么意思，其全英文拼寫為 Block Formatting Context 直譯為塊級格式化上下文 ? 兩個或多個塊級盒子的垂直...

劉東 2019-04-23 11:41 評論0 收藏0
css面試總結

摘要：兩個相鄰的外邊距都是負數(shù)時，折疊結果是兩者絕對值的較大值。兩個外邊距一正一負時，折疊結果是兩者的相加的和。 CSS知識點整理瀏覽器兼容性問題解決方案 · 總結行內樣式、內嵌式、鏈接式以及導入式在引用 CSS 上，分為四種形式：行內樣式、內嵌式、鏈接式以及導入式，下面介紹這四種模式。 1.行內樣式直接對 HTML 的標記使用 style 屬性，然后將 CSS 代碼直接寫進去： 2....

SKYZACK 2019-08-29 18:34 評論0 收藏0