- 在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
塊元素直接接觸的垂直外邊距（top、bottom）會(huì)合并成成單個(gè)外邊距（取當(dāng)中較大的值）- 外邊距合并的情況
- 毗鄰的兄弟元素的垂直外邊距
備注：橙色的是外邊距
- 毗鄰的兄弟元素的垂直外邊距
- 外邊距合并的情況
.child {
width: 200px;
height: 100px;
background-color: red;
margin: 20px;
}
上面一個(gè)div的margin-bottom+下面一個(gè)div的margin-top是40px，但是他們合并了，合并后取兩個(gè)值中較大的一個(gè)
- 父元素與第一個(gè)/最后一個(gè)子元素的垂直外邊距合并
.parent {
margin-bottom: 10px;
}
通過(guò)設(shè)置父元素的margin-bottom為10px，加上最后一個(gè)子元素的margin-bottom為20px，應(yīng)該是30px，但是因?yàn)橥膺吘嗪喜ⅲ∷麄儺?dāng)中較大的一個(gè)就是20px
- 空塊級(jí)元素的垂直外邊距
.box4 {
margin: 20px:
}
一個(gè)空的div，設(shè)置了marin為20px，意味著有20px的上外邊距和20px的下外邊距，垂直方向上應(yīng)該有40px，但是上外邊距和下外邊距卻合并了，最后只有20px
- 阻止外邊距合并
- 阻止相鄰元素的合并
1. float、絕對(duì)定位來(lái)脫離文檔流position
2. display: inline-block;的元素與其兄弟元素、子元素和父元素的外邊距都不會(huì)合并
因?yàn)閕nline-block不符合外c規(guī)范所說(shuō)的必須是塊級(jí)盒子的條件，因?yàn)橐?guī)范中說(shuō)明，塊級(jí)盒子的display屬性必須是以下三種之一："block"、"list-item"、"table"
- 阻止父元素與子元素的合并
1. 設(shè)置padding和border,阻止子元素和父元素的外邊距直接接觸
通過(guò)設(shè)置padding來(lái)阻止合并
通過(guò)設(shè)置border來(lái)阻止合并
2. 設(shè)置overflow形成BFC來(lái)阻止合并
3. 設(shè)置display: inline-block:
- 父元素設(shè)置display: inline-block;
首先對(duì)毗鄰的兄弟元素外邊距不合并，然后對(duì)子元素的外邊距也不合并
- 子元素設(shè)置display: inline-block;
與父元素的外邊距不合并，與毗鄰的兄弟元素也不合并
- 在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
塊元素的垂直外邊距（top、bottom）直接接觸會(huì)合并成成單個(gè)外邊距（數(shù)字大的那個(gè)）- 外邊距合并的情況
- 毗鄰的兄弟元素的垂直外邊距
- 父元素與第一個(gè)/最后一個(gè)子元素的垂直外邊距合并
- 空塊級(jí)元素的垂直外邊距
- 外邊距合并的情況
- 去除
inline-block內(nèi)縫隙有哪幾種常見(jiàn)方法?
本質(zhì)是因?yàn)镠TML會(huì)把多個(gè)空格當(dāng)成一個(gè)- 去除HTML標(biāo)簽的空隙
改成<div class="wrapper"> <span>哈哈</span> <span>哈哈</span> <span>哈哈</span> <span>哈哈</span> </div>
或者<div class="wrapper"> <span>哈哈</span><span>哈哈</span><span>哈哈</span><span>哈哈</span> </div><div class="wrapper"> <span>哈哈</span ><span>哈哈</span ><span>哈哈</span ><span>哈哈</span> </div>- 利用浮動(dòng)
span { float: left; }- 利用負(fù)margin
span { margin-left: -5px; }- 父元素設(shè)置
font-size: 0;子元素再設(shè)置回來(lái)
.wrapper { font-size: 0; } span { font-size: 16px; }- 父元素設(shè)置word-spacing
.wrapper { word-spacing: -5px; }注意：
word-spacing：
<blockquote>The word-spacing CSS property specifies the spacing behavior between tags and words.</blockquote>
設(shè)置的是單詞和標(biāo)簽間的空隙
word-spacing
letter-space：
<blockquote>The letter-spacing CSS property specifies spacing behavior between text characters.</blockquote>
而letter-space設(shè)置的是字母間的空隙，所以不能用來(lái)消除行內(nèi)元素的空隙，因?yàn)樽峙c字之間的空隙也會(huì)變小
letter-space
所以就會(huì)出現(xiàn)這種情況：
不能用letter-space消除標(biāo)簽間的空隙 - 父容器使用overflow: auto| hidden撐開(kāi)高度的原理是什么？
當(dāng)overflow屬性的值不為visible時(shí)，會(huì)觸發(fā)BFC，就是塊級(jí)格式上下文，BFC可以消除浮動(dòng)帶來(lái)的父元素高度坍塌的影響
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1,.box2,.box3 {
width: 200px;
height: 100px;
background-color: orange;
float: left;
margin: 5px;
}
.wrapper {
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
- BFC是什么？如何形成BFC，有什么作用?
<blockquote>Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.</blockquote>
在w3c規(guī)范中這樣說(shuō)道，每個(gè)文檔流中的盒子必定屬于一個(gè)格式化環(huán)境，要么塊級(jí)格式化環(huán)境，要么行內(nèi)格式化環(huán)境，其中，塊級(jí)元素在塊級(jí)格式化環(huán)境中，行內(nèi)元素在行內(nèi)格式化環(huán)境中
其實(shí)HTML根元素html就是一個(gè)默認(rèn)的塊級(jí)格式化上下文，因?yàn)楫?dāng)頁(yè)面的內(nèi)容在視窗顯示不下的時(shí)候，會(huì)出現(xiàn)滾動(dòng)條，意味著html根元素的overflow屬性的值為auto
那么塊級(jí)格式化上下文是什么呢，通俗來(lái)說(shuō)，就是一個(gè)獨(dú)立的布局環(huán)境，外面的元素不能影響里面的元素，里面的元素也不能影響外面的元素，那么BFC的布局規(guī)則是怎樣的呢- BFC布局規(guī)則
- 內(nèi)部的BOX會(huì)在垂直方向，一個(gè)接一個(gè)地放置
- BOX垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰的BOX的margin會(huì)發(fā)生重疊
- 每個(gè)元素的margin-box的左邊與包含塊的border-box的左邊相接觸（對(duì)于從左往右的格式，反之相反）。及時(shí)存在浮動(dòng)也是如此
- BFC的區(qū)域不會(huì)與float box重疊
- BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此
- 計(jì)算BFC高度時(shí)，浮動(dòng)元素也參與計(jì)算
- 如何觸發(fā)BFC
<blockquote>Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.</blockquote>
浮動(dòng)元素，絕對(duì)定位元素，塊級(jí)容器但是不是塊級(jí)盒子（例如：display的值為inline-block、table-cell、table-caption），塊級(jí)元素的overflow屬性的值不為visible - BFC的作用
- 清除內(nèi)部浮動(dòng)
.wrapper { overflow: hidden; }
- BFC布局規(guī)則
2. 自適應(yīng)兩欄布局
.main { overflow: hidden; } 
3. 阻止垂直外邊距合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 100px;
background-color: red;
margin-bottom: 20px;
}
.wrapper {
background-color: #eee;
overflow: hidden;
}
.box2 {
width: 200px;
height: 100px;
background-color: #ccc;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="wrapper">
<div class="box2"></div>
</div>
</html>
BFC的用法都體現(xiàn)了規(guī)則的第5條：
<blockquote>BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此</blockquote>
因?yàn)锽FC內(nèi)部和外部互不影響，所以當(dāng)外部元素浮動(dòng)時(shí)，BFC通過(guò)自身變窄不與浮動(dòng)元素重疊來(lái)消除的影響，而當(dāng)內(nèi)部元素浮動(dòng)時(shí)，為了不影響外部元素，所以把浮動(dòng)元素的高度計(jì)算在內(nèi)，阻止margin合并也是為了內(nèi)部元素不與外部元素互相影響
-
浮動(dòng)導(dǎo)致的父容器高度塌陷指什么？為什么會(huì)產(chǎn)生？有幾種解決方法
指的是當(dāng)父容器下的子元素都浮動(dòng)了之后，子元素脫離了當(dāng)前的文檔流，所以父元素的高度為0
父元素高度坍塌- 利用clearfix
.clearfix:after { content: 0; display: block; clear: both; }- 觸發(fā)BFC
.wrapper { overflow: hidden; } 以下代碼每一行的作用是什么？ 為什么會(huì)產(chǎn)生作用？ 和BFC撐開(kāi)空間有什么區(qū)別？
/*在clearfix類的最后加上內(nèi)容*/
.clearfix:after{
/*所要加上的內(nèi)容是空的*/
content: '';
/*顯示為塊級(jí)元素*/
display: block;
/*清除兩邊的浮動(dòng)，clear屬性是作用在浮動(dòng)元素的后續(xù)元素和塊級(jí)元素上*/
clear: both;
}
.clearfix{
/* *是property hack，表示只有IE7及以下的版本可以識(shí)別，zoom相當(dāng)于觸發(fā)IE的BFC*/
*zoom: 1;
}
