你真的了解盒模型麼

說到前端, 大家第一反應是不是都是vue、react、webpack等這些大大小小的框架或者工具, 但其實這些都是和js相關的, 真正的樣式會被大家忽略。其實真正呈現給大家看到華麗的頁面, 都是樣式才讓他們多了那份色彩。那麼大家覺得簡單的css樣式, 真的簡單麼? 讓我們一起來看下, 開啟css的入坑之旅, 今天一起跟大家簡單聊聊盒模型的相關問題......

盒模型這段描述很有趣, 很好的解釋margin、border、padding之間的關係, 不同模式下, 盒模型的width也是不同的, 那麼好, 盒模型的第乙個坑來了, width的範圍問題。

通常瀏覽器裡, 盒模型的分為兩種模式, 兩種模式(怪異模式和標準模式)下width和height的值不同, 怪異模式的width和height包含border、padding和content, 而標準模式下的width和height只包含content, 這就是為啥有些瀏覽器渲染出來的dom標籤排版會亂。解決也很簡單, 在標籤的上面, 加上doctype的設定就好了, 讓瀏覽器統一用同一種標準去解析頁面。怪異模式(左圖)和標準模式(右圖)的如下:

當然, 還有用來改變盒模型width範圍的乙個css3的屬性,box-sizing

當設定為'border-box'時, width = border + padding + content;

當設定為'content-box'時, width = content。

width:100px;

height:50px;

padding:10px;

background-color:#dedede;

}

.z1

.z2

那麼第乙個div的實際寬度為100px, 第二個div的實際寬度為120px。

說完盒模型的padding和border, 那麼再來吐槽下margin, 盒模型的margin的摺疊(margin collapsing)問題, 有些也叫外邊距合併。

通常我們說的摺疊, 都是垂直方向上的摺疊, 水平方向是不存在的。標準模式下, 上下兩個兄弟的塊級元素, margin是會重疊的, 並且以最大的那個間距為準(都為正數)。

比如下面這段**:

width:100px;

height:50px;

margin:10px;

background-color:#dedede;

}

上圖灰色為重疊部分, 重疊10px的間距。

既然兄弟盒模型會有margin摺疊, 那麼父子呢? 答案是一定的, 父子也存在margin摺疊的問題, 只不過條件稍微苛刻一點, 我們一起來看下。父子元件的摺疊觸發, 要求不能有間隙, 就是父元件不能設定border或padding值, 不能有空餘的內容, 且同時有margin值, 比如下面這段**:

class="outer">

class="inner">

.outer

.inner

當然, 摺疊後的空餘部分, 也是取較大值, 且摺疊觸發, 只存在於垂直方向。

上圖灰色為重疊部分, 重疊10px的間距。

剛才提到乙個詞"間隙", 如果有間隙的話是不會觸發摺疊的, 比如父級元素設定了padding, 或者子元素都設定了相對定位和top值等等。如下圖:

看到這裡, 我想有些同學會問了, 對於這些margin collapsing


這是從w3c裡引用的原文, 這8條規則是特殊的不摺疊的情況, 簡單翻譯過來(僅供參考):
有點晦澀難懂, 大家不妨消化一下。說到這, 再補充一下, 盒模型margin摺疊的計算問題, 總結了以下幾點:
舉個例子:

width:100px;

height:50px;

background-color:#dedede;

}

.z-01

.z-02

兩者都為負值, 兩個div上下重合, 且重合間距為15px。

你真的了解盒模型麼

你真的了解sizeof 麼？

你真的了解sizeof 麼？

你真的了解Http協議麼

你真的了解盒模型麼

你真的了解sizeof 麼？

你真的了解sizeof 麼？

你真的了解Http協議麼

相關推薦