- 在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
塊元素直接接觸的垂直外邊距（top、bottom）會合并成成單個外邊距（取當中較大的值）- 外邊距合并的情況
- 毗鄰的兄弟元素的垂直外邊距
備注：橙色的是外邊距
- 毗鄰的兄弟元素的垂直外邊距
- 外邊距合并的情況
.child {
width: 200px;
height: 100px;
background-color: red;
margin: 20px;
}
上面一個div的margin-bottom+下面一個div的margin-top是40px，但是他們合并了，合并后取兩個值中較大的一個
- 父元素與第一個/最后一個子元素的垂直外邊距合并
.parent {
margin-bottom: 10px;
}
通過設置父元素的margin-bottom為10px，加上最后一個子元素的margin-bottom為20px，應該是30px，但是因為外邊距合并，取他們當中較大的一個就是20px
- 空塊級元素的垂直外邊距
.box4 {
margin: 20px:
}
一個空的div，設置了marin為20px，意味著有20px的上外邊距和20px的下外邊距，垂直方向上應該有40px，但是上外邊距和下外邊距卻合并了，最后只有20px
- 阻止外邊距合并
- 阻止相鄰元素的合并
1. float、絕對定位來脫離文檔流position
2. display: inline-block;的元素與其兄弟元素、子元素和父元素的外邊距都不會合并
因為inline-block不符合外c規范所說的必須是塊級盒子的條件，因為規范中說明，塊級盒子的display屬性必須是以下三種之一："block"、"list-item"、"table"
- 阻止父元素與子元素的合并
1. 設置padding和border,阻止子元素和父元素的外邊距直接接觸
通過設置padding來阻止合并
通過設置border來阻止合并
2. 設置overflow形成BFC來阻止合并
3. 設置display: inline-block:
- 父元素設置display: inline-block;
首先對毗鄰的兄弟元素外邊距不合并，然后對子元素的外邊距也不合并
- 子元素設置display: inline-block;
與父元素的外邊距不合并，與毗鄰的兄弟元素也不合并
- 在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
塊元素的垂直外邊距（top、bottom）直接接觸會合并成成單個外邊距（數字大的那個）- 外邊距合并的情況
- 毗鄰的兄弟元素的垂直外邊距
- 父元素與第一個/最后一個子元素的垂直外邊距合并
- 空塊級元素的垂直外邊距
- 外邊距合并的情況
- 去除
inline-block內縫隙有哪幾種常見方法?
本質是因為HTML會把多個空格當成一個- 去除HTML標簽的空隙
改成<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>- 利用浮動
span { float: left; }- 利用負margin
span { margin-left: -5px; }- 父元素設置
font-size: 0;子元素再設置回來
.wrapper { font-size: 0; } span { font-size: 16px; }- 父元素設置word-spacing
.wrapper { word-spacing: -5px; }注意：
word-spacing：
<blockquote>The word-spacing CSS property specifies the spacing behavior between tags and words.</blockquote>
設置的是單詞和標簽間的空隙
word-spacing
letter-space：
<blockquote>The letter-spacing CSS property specifies spacing behavior between text characters.</blockquote>
而letter-space設置的是字母間的空隙，所以不能用來消除行內元素的空隙，因為字與字之間的空隙也會變小
letter-space
所以就會出現這種情況：
不能用letter-space消除標簽間的空隙 - 父容器使用overflow: auto| hidden撐開高度的原理是什么？
當overflow屬性的值不為visible時，會觸發BFC，就是塊級格式上下文，BFC可以消除浮動帶來的父元素高度坍塌的影響
<!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規范中這樣說道，每個文檔流中的盒子必定屬于一個格式化環境，要么塊級格式化環境，要么行內格式化環境，其中，塊級元素在塊級格式化環境中，行內元素在行內格式化環境中
其實HTML根元素html就是一個默認的塊級格式化上下文，因為當頁面的內容在視窗顯示不下的時候，會出現滾動條，意味著html根元素的overflow屬性的值為auto
那么塊級格式化上下文是什么呢，通俗來說，就是一個獨立的布局環境，外面的元素不能影響里面的元素，里面的元素也不能影響外面的元素，那么BFC的布局規則是怎樣的呢- BFC布局規則
- 內部的BOX會在垂直方向，一個接一個地放置
- BOX垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰的BOX的margin會發生重疊
- 每個元素的margin-box的左邊與包含塊的border-box的左邊相接觸（對于從左往右的格式，反之相反）。及時存在浮動也是如此
- BFC的區域不會與float box重疊
- BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此
- 計算BFC高度時，浮動元素也參與計算
- 如何觸發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>
浮動元素，絕對定位元素，塊級容器但是不是塊級盒子（例如：display的值為inline-block、table-cell、table-caption），塊級元素的overflow屬性的值不為visible - BFC的作用
- 清除內部浮動
.wrapper { overflow: hidden; }
- BFC布局規則
2. 自適應兩欄布局
.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的用法都體現了規則的第5條：
<blockquote>BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此</blockquote>
因為BFC內部和外部互不影響，所以當外部元素浮動時，BFC通過自身變窄不與浮動元素重疊來消除的影響，而當內部元素浮動時，為了不影響外部元素，所以把浮動元素的高度計算在內，阻止margin合并也是為了內部元素不與外部元素互相影響
-
浮動導致的父容器高度塌陷指什么？為什么會產生？有幾種解決方法
指的是當父容器下的子元素都浮動了之后，子元素脫離了當前的文檔流，所以父元素的高度為0
父元素高度坍塌- 利用clearfix
.clearfix:after { content: 0; display: block; clear: both; }- 觸發BFC
.wrapper { overflow: hidden; } 以下代碼每一行的作用是什么？ 為什么會產生作用？ 和BFC撐開空間有什么區別？
/*在clearfix類的最后加上內容*/
.clearfix:after{
/*所要加上的內容是空的*/
content: '';
/*顯示為塊級元素*/
display: block;
/*清除兩邊的浮動，clear屬性是作用在浮動元素的后續元素和塊級元素上*/
clear: both;
}
.clearfix{
/* *是property hack，表示只有IE7及以下的版本可以識別，zoom相當于觸發IE的BFC*/
*zoom: 1;
}
