2018-4-15 seo達(dá)人
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
說(shuō)到前端, 大家第一反應(yīng)是不是都是vue、react、webpack等這些大大小小的框架或者工具, 但其實(shí)這些都是和js相關(guān)的, 真正的樣式會(huì)被大家忽略。其實(shí)真正呈現(xiàn)給大家看到華麗的頁(yè)面, 都是樣式才讓他們多了那份色彩。那么大家覺(jué)得簡(jiǎn)單的css樣式, 真的簡(jiǎn)單么? 讓我們一起來(lái)看下, 開(kāi)啟css的入坑之旅, 今天一起跟大家簡(jiǎn)單聊聊盒模型的相關(guān)問(wèn)題......
百度知道對(duì)此的解釋, 很有意思, 在此引用一下
CSS盒子模型, 內(nèi)容(CONTENT)就是盒子里裝的東西; 而填充(PADDING)就是怕盒子里裝的東西(貴重的)損壞而添加的泡沫或者其它抗震的輔料; 邊框(BORDER)就是盒子本身了; 至于邊界(MARGIN)則說(shuō)明盒子擺放的時(shí)候的不能全部堆在一起,要留一定空隙保持通風(fēng),同時(shí)也為了方便取出。 —— 百度知道
這段描述很有趣, 很好的解釋margin、border、padding之間的關(guān)系, 不同模式下, 盒模型的width也是不同的, 那么好, 盒模型的第一個(gè)坑來(lái)了, width的范圍問(wèn)題。
通常瀏覽器里, 盒模型的分為兩種模式, 兩種模式(怪異模式和標(biāo)準(zhǔn)模式)下width和height的值不同, 怪異模式的width和height包含border、padding和content, 而標(biāo)準(zhǔn)模式下的width和height只包含content, 這就是為啥有些瀏覽器渲染出來(lái)的dom標(biāo)簽排版會(huì)亂。解決也很簡(jiǎn)單, 在標(biāo)簽的上面, 加上doctype的設(shè)置就好了, 讓瀏覽器統(tǒng)一用同一種標(biāo)準(zhǔn)去解析頁(yè)面。 怪異模式(左圖)和標(biāo)準(zhǔn)模式(右圖)的如下:
當(dāng)然, 還有用來(lái)改變盒模型width范圍的一個(gè)css3的屬性,
當(dāng)設(shè)置為'border-box'時(shí), width = border + padding + content;
當(dāng)設(shè)置為'content-box'時(shí), width = content。
那么第一個(gè)div的實(shí)際寬度為100px, 第二個(gè)div的實(shí)際寬度為120px。
說(shuō)完盒模型的padding和border, 那么再來(lái)吐槽下margin, 盒模型的margin的折疊(margin collapsing)問(wèn)題, 有些也叫外邊距合并。
通常我們說(shuō)的折疊, 都是垂直方向上的折疊, 水平方向是不存在的。標(biāo)準(zhǔn)模式下, 上下兩個(gè)兄弟的塊級(jí)元素, margin是會(huì)重疊的, 并且以最大的那個(gè)間距為準(zhǔn)(都為正數(shù))。
比如下面這段代碼:
上圖灰色為重疊部分, 重疊10px的間距。
既然兄弟盒模型會(huì)有margin折疊, 那么父子呢? 答案是一定的, 父子也存在margin折疊的問(wèn)題, 只不過(guò)條件稍微苛刻一點(diǎn), 我們一起來(lái)看下。 父子組件的折疊觸發(fā), 要求不能有間隙, 就是父組件不能設(shè)置border或padding值, 不能有空余的內(nèi)容, 且同時(shí)有margin值, 比如下面這段代碼:
當(dāng)然, 折疊后的空余部分, 也是取較大值, 且折疊觸發(fā), 只存在于垂直方向。
上圖灰色為重疊部分, 重疊10px的間距。
剛才提到一個(gè)詞"間隙", 如果有間隙的話是不會(huì)觸發(fā)折疊的, 比如父級(jí)元素設(shè)置了padding, 或者子元素都設(shè)置了相對(duì)定位和top值等等。如下圖:
看到這里, 我想有些同學(xué)會(huì)問(wèn)了, 對(duì)于這些
Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).
Margins of inline-block boxes do not collapse (not even with their in-flow children).
The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling, unless that sibling has clearance.
The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.
The bottom margin of an in-flow block box with a 'height' of 'auto' and a 'min-height' of zero collapses with its last in-flow block-level child's bottom margin if the box has no bottom padding and no bottom border and the child's bottom margin does not collapse with a top margin that has clearance.
A box's own margins collapse if the 'min-height' property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a 'height' of either 0 or 'auto', and it does not contain a line box, and all of its in-flow children's margins (if any) collapse.
這是從W3C里引用的原文, 這8條規(guī)則是特殊的不折疊的情況, 簡(jiǎn)單翻譯過(guò)來(lái)(僅供參考):
浮動(dòng)的盒模型不會(huì)margin折疊
創(chuàng)建BFC與子不折疊
設(shè)置定位的盒模型不會(huì)折疊
行內(nèi)塊級(jí)元素的盒模型不折疊
兄弟元素有間隙不折疊
父子盒模型元素, 孩子元素有border、padding、有浮動(dòng)就不折疊
height為auto、min-height為0的塊級(jí)盒模型, 和它的最后一個(gè)沒(méi)有border和padding的孩子盒模型底邊距折疊, 且孩子的底部外邊距和被清除浮動(dòng)上邊距有間隙不折疊。
如果min-height為0, 上下border、上下padding都為0, height為0或auto, 且沒(méi)有行內(nèi)盒模型, 他的孩子節(jié)點(diǎn)都會(huì)折疊
有點(diǎn)晦澀難懂, 大家不妨消化一下。說(shuō)到這, 再補(bǔ)充一下, 盒模型margin折疊的計(jì)算問(wèn)題, 總結(jié)了以下幾點(diǎn):
同為正值時(shí), 取較大者為兩者為間距
一正一負(fù)時(shí), 正負(fù)相加為間距, 若結(jié)果為負(fù)值, 則兩者部分重合
都為負(fù)值時(shí), 兩者重合, 且重合部分為絕對(duì)值大者
舉個(gè)例子:
兩者都為負(fù)值, 兩個(gè)div上下重合, 且重合間距為15px。
暫時(shí)就想到這么多, css的學(xué)習(xí)之路任重而道遠(yuǎn), 盒模型又是重中之重。上面有描述不對(duì)的地方也歡迎各位同學(xué)批評(píng)指正, 也歡迎大家來(lái)到大轉(zhuǎn)轉(zhuǎn)FE做客, 一起討論一起研究前端的技術(shù)問(wèn)題。志同道合的同學(xué), 也歡迎加入我們轉(zhuǎn)轉(zhuǎn)FE團(tuán)隊(duì), 咱們一起打拼。
盒模型
<div class="wrapper z1"></div>
<div class="wrapper z2"></div>
.wrapper{
width: 100px;
height: 50px;
padding: 10px;
background-color: #dedede;
}
.z1{
box-sizing: border-box;
}
.z2{
box-sizing: content-box;
}
<div class="wrapper"></div>
<div class="wrapper"></div>
.wrapper{
width: 100px;
height: 50px;
margin: 10px;
background-color: #dedede;
}
<div class="outer">
<div class="inner"></div>
</div>
.outer{
width: 200px;
height: 100px;
margin: 10px;
background-color: #dedede;
}
.inner{
width: 100px;
height: 50px;
margin: 10px;
background-color: #bcbcbc;
}
<div class="wrapper z-01"></div>
<div class="wrapper z-02"></div>
.wrapper{
width: 100px;
height: 50px;
background-color: #dedede;
}
.z-01{
margin: -10px;
}
.z-02{
margin: -15px;
}
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com