盒模型
CSS盒模型分成W3C標準盒模型和IE模型
-
W3C標準盒模型(預設):
box-sizing: content-box
padding
和border
都會撐開盒子,改變盒子的寬度高度- 總寬度:
width
+ 左右border
寬度 + 左右padding
寬度 + 左右margin
寬度 - 內盒寬度:
width
+ 左右border
寬度 + 左右padding
寬度
-
IE盒模型:
box-sizing: border-box
padding
和border
都不會撐開盒子,不會改變盒子的寬度,盒子的內容會相應縮小- 總寬度:
width
+ 左右margin
寬度 - 內盒寬度:
width
盒子模型佈局穩定性
我們根據穩定性來分,建議如下:
按照 優先使用寬度,其次使用內邊距,再次外邊距。 即:width > padding > margin
原因:
(1)margin
會有外邊距合併
(2)padding
會影響盒子大小,需要進行加減計算(麻煩) 其次使用
(3)width
沒有問題我們經常使用寬度剩餘法來做
padding margin 百分比
當margin
和padding
的值設定為百分比時,是相對於最近的塊級或內聯塊父元素width
(非總寬度)的相應百分比的值。
即使是margin-top
、margin-bottom
、padding-top
、padding-bottom
,設定為百分比時也是以最近塊級父元素的width
(非總寬度)為基準,而非height
。
margin塌陷問題
-
相鄰塊元素垂直外邊距的合併
當上下相鄰的兩個塊元素相遇時,如果上面的元素有下外邊距
margin-bottom
,下面的元素有上外邊距margin-top
,則他們之間的垂直間距不是margin-bottom
與margin-top
之和,而是兩者中的較大者。這種現象被稱為相鄰塊元素垂直外邊距的合併(也稱外邊距塌陷)。解決方法:
-
將其放在不同的 BFC 父容器中
<div class="container"> <div class="child"></div> </div> <div class="container"> <div class="child"></div> </div> .container { overflow: hidden; } .child { width: 100px; height: 100px; background: #f0; margin: 100px; }
-
-
巢狀塊元素垂直外邊距的合併
對於兩個巢狀關係的塊元素,必須是
block
元素。如果父元素沒有上內邊距padding
、沒有上邊框border
、沒有內容,則父元素的上外邊距會與子元素的上外邊距發生合併,合併後的外邊距取其較大者。即使父元素的上外邊距為0,也會發生合併。解決方法:
- 給父元素加
overflow:hidden
,相當於給父元素新增了一個BFC - 給父元素加上內邊距 或 上邊框
- 給父元素加
BFC
BFC 全稱為塊格式化上下文 (Block Formatting Context) 。它是頁面中的一塊渲染區域,並且有一套渲染規則,它決定了其子元素將如何定位,以及和其他元素的關係和相互作用
BFC觸發條件:
overflow
:除visible
以外的值 (hidden
、auto
、scroll
)float
:除none
以外的值display
:inline-block
、flex
position
:absolute
、fixed
BFC作用:
-
BFC解決
margin
塌陷問題 -
BFC解決浮動元素引起父元素高度塌陷問題
在通常情況下父元素的高度會被子元素撐開,而如果父元素沒有設定高度,其子元素均為浮動元素,此時父元素會發生了高度坍塌,上下邊界重合,即浮動元素無法撐起父元素。這時就可以用BFC來清除浮動了,將父元素整體設定為BFC環境
-
BFC解決元素被浮動元素覆蓋問題
如果有兩個相鄰元素,第一個元素左浮動,第二個元素不設定浮動,這時候第二個元素會有部分被浮動元素所覆蓋(但是文字資訊不會被浮動元素所覆蓋)。 如果想避免元素被覆蓋,可觸發第二個元素的 BFC 特性,在第二個元素中加入
overflow: hidden
即可