CSS盒子模型以及外邊框合并的問題

paulli3 發布于2019-08-29 14:03 / 2451人閱讀

摘要：盒子模型我們把布局里面的所有東西都可以想象成一個盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子所以布局的萬物基于盒子。雖然外邊距是不可見的，但是我們算元素的總寬度或者總高度的時候，要加上外邊距。

盒子模型

我們把布局里面的所有東西都可以想象成一個盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子......
所以布局的萬物基于盒子。即使一個小小的元素p，也可以把它抽象成為一個盒子。
你現在心里有很多疑問，沒關系，接著看。

以下是標準的盒子模型。（圖片來源）

我們平常給元素加上的width，height實際上就是給內容區域加寬和高。我們增加內外邊距的時候不改變內容區域的大小，卻會改變整體的大小。如果我們為元素加一個1像素的框的話，那么我們能看見的只是框里面的東西（內邊距+內容區域），如果在元素上添加背景，背景也會應用于這一區域，而外邊距是不可見的，它是用來分隔各個元素。

雖然外邊距是不可見的，但是我們算元素的總寬度或者總高度的時候，要加上外邊距。
即：

height總=margin-top+border+padding-top+height+padding-bottom+border+margin-bottom
width總=margin-left+border+padding-left+width+padding-right+border+margin-right

如果只在視覺上固定框的大小不用加入margin進行計算。這里和《精通CSS 高級web標準解決方案（第二版）》有不同的意見。（P39-P40，我認為書中出錯）

外邊距的合并問題 什么是合并

就是外邊距中會有疊加的情況，取兩者中最大的一個作為間隔

合并問題的前提是

處于普通流兩個或多個塊元素垂直方向上相遇加粗文字，會造成的margin折疊

除去普通流、兩個或多個、塊元素、垂直很好理解之外

這個相遇要好好解釋一下了，什么算相遇呢？

簡單的來說，無非就是就是說兩個元素碰到了一起。這個相遇就是真真正正的遇到了，如果有邊框等阻擋，是不會發生折疊的！

具體的，分為：

Ⅰ：父元素的上外邊距和第一個子元素的上外邊距

大概就是圖片中的效果：

也就是父元素的margin-top 和第一個子元素的margin-top相遇，

看代碼：

HTML:

    


CSS:
/*為了效果更加明顯，為body添加背景顏色*/
body{
    background-color:#ccc;
}
.father{
    background-color:blue;
    height:100px;
    width:100px;
    margin-top:20px;
}
.son{
    background-color:red;
    height:20px;
    width:20px;
    margin-top:20px;
}

效果圖:

可以看出來紅色方塊原本應該在藍色方塊的下方20px處，然而卻合并了！

這種合并有時候是一種便利，而在有些情況卻成為了不知何處的bug。所以在后面會講怎么消除這種浮動。

Ⅱ：父元素的下外邊距和最后一個子元素的下外邊距

也就是父元素的margin-bottom與最后一個子元素的margin-bottom相遇發生的重疊。

與上一個類似，所以不再闡述。

Ⅲ：相鄰兄弟姐妹元素

相鄰兄弟就是，相鄰的兩個元素margin-top和margin-bottom發生的合并。

外邊距為40px的情況：




.block1 {
    background-color:red;
    height:50px;
    width:50px;
    margin-bottom:20px;
}
.block2 {
    background-color:blue;
    height:50px;
    width:50px;
    margin-top:20px;
}

實際效果圖:

由此可見，相鄰同胞元素確實發生了合并。

Ⅳ：空元素，自己的上外邊距會和自己的下外邊距合

這個段落的和下面段落的距離將為20px

這個段落的和上面段落的距離將為20px

這樣第一個p元素和第三個p元素之間距離為20px

阻止自動合并

從定義出發會很好的理解這個問題，我們可以從合并的前提的角度出發探討幾種阻止合并的方法：

第一種方法：擺脫普通流

position:absolute;
float:left/right;

第二中方法：變成非塊元素

第一篇文章已經提過可以用display:inline;將塊元素變成行內元素。

注意：用這種雖然是理論上是可以實現的，然而它行內元素除了圖片是不能設置寬高的，同時margin-top margin-bottom也將失效，所以我認為實際實現不了。

其實除了行內元素和塊級元素，還有一種元素 inline-block，它集合兩者的優點。（之后會有專門一篇文章總結。）

所以用display:inline-block也可以實現。

避免相遇

最重要的前提就是兩個元素相遇，才有可能合并，我們只需要把它們隔斷！

那么在相遇的兩個margin中間可以有什么呢？
我針對兩種情況給出了圖解。

由此可以很清楚的看出來，只有父子的情況才能用這種方法。

而且方法也很顯而易見：在父級元素設置padding或者border！

對于父子元素來說，還有一種方式：
清除浮動,overflow:hidden overflow:auto 即可，關于為什么能清除浮動還沒有搞清楚。

針對父子元素的方法
設置了清除浮動屬性

注意

如果有負外邊距，合并后外邊距為最大正邊距加上最小負邊距（絕對值最大的一個），如上面元素下邊距為20px，下面元素上邊距為-20px，則最后為0px.

在實際的情況，可以只寫margin-bottom或者margin-top避免出現這種情況。

非塊元素如何顯示？

為此我專門寫了一篇文章：細究內聯元素（你一定不知道的東西）（同樣的以后再上鏈接。）

更新情況

2017.12.03 第一版
2017.12.03 第二版，修改排版，修改一些重要理解，增加新的探究。
2017.12.15 第三版，修改排版，增加一些新的思索

GPU云服務器云服務器外邊框合并 cdnjs合并的問題 html 盒子邊框盒子模型

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

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

CSS盒子模型以及外邊框合并的問題

摘要：盒子模型我們把布局里面的所有東西都可以想象成一個盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子所以布局的萬物基于盒子。雖然外邊距是不可見的，但是我們算元素的總寬度或者總高度的時候，要加上外邊距。盒子模型我們把布局里面的所有東西都可以想象成一個盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子......所以布局的萬物基于盒子。即使一個小小的元素p，也可以把它抽象成為一個盒子...

zacklee 2019-08-02 16:01 評論0 收藏0
CSS學習（二）

摘要：學習二一三大模型之盒子模型盒子模型每個矩形元素都由元素的內容，內邊距，邊框，和外邊距邊框盒子的厚度，如手機包裝盒的厚度內邊距內容與邊框之間的距離，如填充泡沫的厚度外邊距與其他盒子的距離邊框樣式格式單實線用的最多虛線點線雙實線邊框綜合寫法寫 CSS學習（二）一、CSS三大模型之盒子模型 1.盒子模型每個矩形元素都由元素的內容，內邊距，邊框，和外邊距邊框：盒子的厚度Border，如手...

Near_Li 2019-08-29 15:29 評論0 收藏0
css盒模型理解

摘要：盒模型概念盒子模型又稱框模型，包含了元素內容內邊距邊框外邊距幾個要素。盒子垂直方向的距離由決定。屬于同一個的兩個相鄰盒子垂直方向的會發生重疊。計算高度時，自然也會檢測浮動的子盒子高度。總寬度總高度盒子設置的值其實是除外的的總寬度。 css盒模型概念 css盒子模型又稱框模型 (Box Model) ，包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊...

xingqiba 2019-08-30 15:43 評論0 收藏0
前端基礎入門二（CSS）

摘要：輸入的時候少按一個鍵瀏覽器兼容問題比如使用的選擇器命名，在是無效的能良好區分變量命名變量命名是用不要純數字中文等命名，盡量使用英文字母來表示。選擇器和類選擇器最大的不同在于使用次數上。當需要設置英文字體時，英文字體名必須位于中文字體名之前。回顧上一節HTML 思維導圖 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...

Lorry_Lu 2019-08-30 15:55 評論0 收藏0
CSS 盒模型簡介

摘要：左右和會起作用。外邊距合并當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。一、盒子模型概述盒子模型是CSS的基石,指定標簽如何顯示；頁面上的每個元素都被當成一個矩形盒子,占據一定的頁面空間,這個盒子由內容（content）、內邊距（padding）、邊框（border）和外邊界（m...

netmou 2019-08-30 15:55 評論0 收藏0