1.在什么場景下會出現(xiàn)外邊距合并辖众？如何合并卓起？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
外邊距合并的場景大致有以下幾種凹炸。
- 1.相鄰的同級元素會發(fā)生外邊距合并戏阅。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同級元素外邊距合并</title>
<style>
.container {
width: 700px;
height: 300px;
border: 1px solid;
}
.box1 {
width: 100px;
height: 100px;
border: 1px solid red;
margin: 20px;
}
.box2 {
width: 100px;
height: 100px;
border: 1px solid red;
margin: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
效果：
從圖中看出雖然兩個邊框的外邊距一個是20px，一個是40px啤它，但它們相鄰的邊距并不是兩者之和60px奕筐，而是兩者中的最大值40px舱痘。
這種情況可以給它們分別再加一個父元素，設(shè)置父元素overflow屬性离赫。
效果：
或者其中最后一個子元素加上float芭逝。
- 2.相鄰的父子元素，當父元素沒有設(shè)置邊框或者padding時渊胸，會發(fā)生外邊距合并旬盯。
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父子元素外邊距合并</title>
<style>
.header{
background: red;
}
h1{
margin-top: 130px;
}
</style>
</head>
<body>
<div class="header">
<h1>我是段落</h1>
</div>
</body>
</html>
效果：
阻止外邊距合并可以給父元素加上border或者padding或者加上內(nèi)容。
- 3.一個元素沒有內(nèi)容翎猛、邊框胖翰、padding，它本身的上下邊距會合并切厘。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自身合并</title>
<style>
div {
margin:50px;
}
</style>
</head>
<body>
<div></div>
<span>饑人谷</span>
</body>
</html>
效果：
這種也可以加上border或者padding或者加內(nèi)容萨咳。
2.去除inline-block內(nèi)縫隙有哪幾種常見方法?
inline-block元素之間會有縫隙。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inline-block縫隙</title>
<style>
ul,li {
margin: 0;
padding: 0;
}
.content {
width: 200px;
border: 1px solid red;
}
.content>li {
display: inline-block;
background: blue;
color: #fff;
}
</style>
</head>
<body>
<ul class="content">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
</html>
此時迂卢，可以看到列表之間有空隙某弦。
效果：
有以下幾種方法可以消除間隙：
- 把
<li>標簽之間的空白去掉，可以寫成：
<ul class="content">
<li>列表1</li><li>列表2</li><li>列表3</li>
</ul>
或者
<ul class="content">
<li>列表1</li
><li>列表2</li
><li>列表3</li>
</ul>
效果：
2.可以用負margin把<li>標簽之間的外邊距變小而克，使兩個inline-block元素之間沒有空隙靶壮。
改動部分的代碼：
.content>li {
display: inline-block;
background: blue;
color: #fff;
margin-left: -10px;
}
li:first-child {
margin-left: 0px;
}
效果：
3.利用float屬性，浮動元素是水平方向上緊挨著的员萍。設(shè)置了浮動腾降，一定要清除浮動。
改動部分的代碼：
.content {
width: 200px;
border: 1px solid red;
overflow: auto;
}
.content>li {
display: inline-block;
background: blue;
color: #fff;
float: left;
}
效果：
4.還可以設(shè)置父元素的字體大小為0碎绎。這種方法螃壤，元素則身的字體大小要設(shè)置。
改動部分的代碼:
.content {
width: 200px;
border: 1px solid red;
font-size: 0;
}
.content>li {
display: inline-block;
background: blue;
color: #fff;
font-size: 16px;
}
效果：
3.父容器使用overflow: auto| hidden撐開高度的原理是什么筋帖？
是根據(jù)BFC的特性奸晴，父元素使用overflow: auto|hidden撐開高度。
overflow屬性作用在塊級元素上日麸。它規(guī)定了當內(nèi)容元素溢出元素框時發(fā)生的事：裁剪內(nèi)容寄啼，使用滾動條來顯示或者直接顯示超出部分。
其中：
overflow: auto; 由瀏覽器定奪代箭，如果內(nèi)容被修剪墩划，就會顯示滾動條
overflow: hidden; 內(nèi)容會被修剪，并且其余內(nèi)容不可見嗡综。
overflow值不為“visiable”的塊級盒子乙帮，會為他們的內(nèi)容創(chuàng)建新的BFC（塊級格式上下文）。BFC是一個名詞极景，是一個獨立的布局環(huán)境察净，我們可以理解為一個箱子（實際上是看不見摸不著的）驾茴，箱子里面物品的擺放是不受外界的影響的，同時也不影響外界的元素氢卡。
這個特性沟涨，可以用于清除浮動，撐開塊元素的空間异吻，在浮動的元素上加一個父元素，父元素上設(shè)置overflow: auto|hidden喜庞，可以撐開高度诀浪。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style>
.box {
width: 300px;
border: 1px solid;
}
.box1 {
width: 100px;
height: 100px;
background: #f00;
}
.box2 {
width: 100px;
height: 100px;
background: #0f0;
float: left;
}
/*.container {
overflow: hidden;
}*/
.box3 {
width: 100px;
height: 100px;
background: #00f;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="container">
<div class="box2"></div>
</div>
<div class="box3"></div>
</div>
</body>
</html>
此時效果：
加上
.container {
overflow: hidden;
}
效果為：
撐開了高度。
4.BFC是什么延都？如何形成BFC雷猪，有什么作用?
BFC是Block Formatting Contexts的縮寫，譯為塊級格式上下文晰房。
浮動元素和絕對定位元素求摇，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子殊者，都會為他們的內(nèi)容創(chuàng)建新的BFC（塊級格式上下文）与境。可以用于清除浮動和合并外邊距猖吴。
5.浮動導(dǎo)致的父容器高度塌陷指什么摔刁？為什么會產(chǎn)生？有幾種解決方法
指父容器高度并浮動元素脫離文檔流海蔽，是常規(guī)元素忽略了它的存在共屈，從而父元素高度塌陷。
解決方法可以使子元素形成BFC党窜，或者用clear使元素左邊或右邊或兩邊不浮動拗引。
6.以下代碼每一行的作用是什么？ 為什么會產(chǎn)生作用幌衣？ 和BFC撐開空間有什么區(qū)別矾削？
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1;
}
作用：
.clearfix:after{ /*在class屬性名是clearfix的元素的子元素的最后再添加一個子元素*/
content: ''; /*內(nèi)容是空*/
display: block; /*設(shè)置為塊級元素*/
clear: both; /*這個元素左右兩邊不允許有浮動元素*/
}
.clearfix{ /*設(shè)置class屬性是clearfix的元素*/
*zoom: 1; /*設(shè)置縮放比例為1。這是IE專有屬性泼掠≌恚火狐和老版本的webkit核心的瀏覽器都不支持這個屬性。*/
}
這段代碼可以撐開由于浮動導(dǎo)致的塌陷的父元素择镇。第一段是兼容普通瀏覽器挡逼，第二段兼容IE瀏覽器。
第一段代碼利用偽類元素腻豌，相當于在父元素末尾加上一個元素家坎，并使這個元素左右不浮動嘱能，這樣這個元素就會下移，撐開父元素虱疏。*zoom:1縮放頁面惹骂，重新排版，父元素會計算浮動元素的高度做瞪，被撐開对粪。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clear</title>
<style>
.clearfix {
width: 500px;
border: 1px solid;
}
.box1 {
width: 100px;
height: 100px;
background: #f00;
}
.box2 {
width: 100px;
height: 100px;
background: #0f0;
}
.box3 {
width:100px;
height: 100px;
background: #00f;
float: right;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
效果：
如果不加這兩段代碼，則是下面的效果：
父元素沒有完全包圍子元素装蓬。
如果父元素最后一個元素不浮動著拭，添加上述代碼，可以清除浮動嗎牍帚？
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clear</title>
<style>
.clearfix {
width: 500px;
border: 1px solid;
}
.box1 {
width: 100px;
height: 100px;
background: #f00;
}
.box2 {
width: 100px;
height: 100px;
background: #0f0;
float: left;
}
.box3 {
width:100px;
height: 100px;
background: #00f;
/*float: left;*/
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
在IE11中儡遮，效果：
發(fā)現(xiàn)在IE11中:after被禁用了，而且.box3元素被.box2遮住暗赶，浮動帶來的影響沒有被清除鄙币。
在chrome瀏覽器中，效果：
看出
*zoom:1并沒有出現(xiàn)蹂随，因為 * 對非IE瀏覽器不起作用十嘿。同樣的，.box3被.box2遮住岳锁，浮動的影響沒有被清除详幽。本來父元素應(yīng)該是下圖所示的樣式：
所以這幾行代碼用于最后一個子元素浮動時，清除這個子元素浮動對父元素的影響浸锨。
本文版權(quán)歸作者和饑人谷所有唇聘，轉(zhuǎn)載請注明出處
