一拼坎、在什么場景下會出現(xiàn)外邊距合并？如何合并完疫？如何不讓相鄰元素外邊距合并泰鸡？給個父子外邊距合并的范例
- 在CSS當(dāng)中，相鄰的兩個盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個單獨(dú)的外邊距趋惨，相鄰的兩個盒子包括：
- 相鄰兄弟元素之間的合并
- 父子元素之間的合并
- 父子元素同時與其后元素的合并
- 高度為0無內(nèi)容的元素自身的合并
- 合并的方式為：
- 當(dāng)兩個外邊距都是正數(shù)時，取兩者中較大者
- 當(dāng)兩個外邊距一個為正數(shù)惦蚊，一個為負(fù)數(shù)時器虾，取兩者之和
- 當(dāng)兩個外邊距都是負(fù)數(shù)時，取兩者絕對值較大者
- 針對以上各種情況蹦锋，分別列舉如何合并兆沙，如何不讓相鄰元素外邊距合并
- 兩個相鄰兄弟之間的外邊距，比如如下情況
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>練習(xí)</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #ccc;
}
.ct{
width: 500px;
margin: 0 auto;
background: pink;
border: 1px solid black;
}
.ct .box1{
width: 100px;
height: 100px;
margin: 20px;
border: 1px solid red;
}
.ct .box2{
width: 100px;
height: 100px;
margin: 50px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
</body>
</html>
此時效果圖如下
相鄰兄弟元素之間外邊距的合并
如何不讓相鄰元素合并：(1)通過創(chuàng)造BFC環(huán)境可以消除兄弟相鄰元素之間的外邊距莉掂，如下所示代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>練習(xí)</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #ccc;
}
.ct{
width: 500px;
margin: 0 auto;
background: pink;
}
.ct .box1{
display: inline-block;
width: 100px;
height: 100px;
margin: 20px;
border: 1px solid red;
}
.ct .box2{
display: inline-block;
width: 100px;
height: 100px;
margin: 50px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
</body>
</html>
效果圖如下圖
創(chuàng)造BFC來消除兄弟元素之間外邊距的合并
(2)當(dāng)兄弟元素之間存在“界限”時也可以消除其之間的外邊距的合并葛圃，如下所示代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>練習(xí)</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #ccc;
}
.ct{
width: 500px;
margin: 0 auto;
background: pink;
}
.ct>div{
overflow: auto;
}
.ct .box1{
width: 100px;
height: 100px;
margin: 20px;
border: 1px solid red;
}
.ct .box2{
width: 100px;
height: 100px;
margin: 50px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="ct">
<div>
<div class="box1">1</div>
</div>
<div>
<div class="box2">2</div>
</div>
</div>
</body>
</html>
在相鄰元素的外層在嵌套一層，在box1和box2之間形成一層界限，阻止了兄弟元素之間外邊距的合并库正，效果圖如下
相鄰元素外邊距
-
父子元素之間的外邊距合并曲楚，合并情況如下圖所示情況
父子元素之間外邊距的合并
如何不讓相鄰元素合并：(1)通過在div1的父元素上加上border或者padding即可消除父子元素之間外邊距的合并，如下所示代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>練習(xí)</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #ccc;
}
.ct{
width: 500px;
margin: 0 auto;
background: pink;
border:1px solid black;
/*或者通過設(shè)置padding值
padding: 10px;*/
}
.ct .box1{
width: 100px;
height: 100px;
margin: 20px;
border: 1px solid red;
}
.ct .box2{
width: 100px;
height: 100px;
margin: 50px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
</body>
</html>
效果圖如下圖
消除父子元素之間外邊距的合并
(2)通過創(chuàng)造BFC的環(huán)境來消除父子元素之間的外邊距的合并褥符，如下所示代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>練習(xí)</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #ccc;
}
.ct{
width: 500px;
margin: 0 auto;
background: pink;
overflow: auto;
/*或者還可以通過定位龙誊，浮動，
設(shè)置display值為inline-block等來是.ct成為BFC環(huán)境*/
}
.ct .box1{
width: 100px;
height: 100px;
margin: 20px;
border: 1px solid red;
}
.ct .box2{
width: 100px;
height: 100px;
margin: 50px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
</body>
</html>
效果圖如下圖
通過形成BFC來消除父子元素之間的外邊距合并
-
父子元素同時與其后元素的外邊距合并合并喷楣，比如如下情況
父子元素同時與其后元素的外邊距合并
如何不讓父子元素同時與其后元素的外邊距合并：(1)可以在父元素上設(shè)置border趟大、padding值，比如如下代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>練習(xí)</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #ccc;
}
.ct{
width: 500px;
margin: 0 auto 60px auto;
background: pink;
padding: 10px;
}
.ct .box1{
width: 100px;
height: 100px;
margin: 20px;
border: 1px solid red;
}
.ct .box2{
width: 100px;
height: 100px;
margin: 50px;
border: 1px solid blue;
}
h1{
width: 500px;
margin: 35px auto;
background: orange;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
<h1>jirengu</h1>
</body>
</html>
此時就只有父元素.ct同h1的外邊距進(jìn)行合并铣焊，效果圖如下圖
外邊距合并效果圖
(2)也可以使父元素成為BFC逊朽，也可消除父子元素同時與其后元素外邊距的合并,比如如下代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>練習(xí)</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #ccc;
}
.ct{
width: 500px;
margin: 0 auto 60px auto;
background: pink;
overflow: auto;
}
.ct .box1{
width: 100px;
height: 100px;
margin: 20px;
border: 1px solid red;
}
.ct .box2{
width: 100px;
height: 100px;
margin: 50px;
border: 1px solid blue;
}
h1{
width: 500px;
margin: 35px auto;
background: orange;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
<h1>jirengu</h1>
</body>
</html>
效果圖如下圖所示
外邊距合并效果圖
-
高度為0無內(nèi)容的元素自身外邊距的合并，比如如下情況曲伊，一個寬高為0的塊級元素叽讳，設(shè)置了margin值后其margin值自身合并，如下圖
自身元素外邊距的合并
自身元素外邊距的不合并的方法：(1)可以在元素上加上border熊昌、padding等值绽榛，如下代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>練習(xí)</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #ccc;
}
.ct{
width: 500px;
margin:10px;
background: pink;
}
.ct .box1{
width: 100px;
height: 100px;
margin: 20px;
border: 1px solid red;
}
.ct .box2{
width: 100px;
height: 100px;
margin: 40px;
border: 1px solid blue;
}
.ct2{
margin: 40px;
padding: 1px;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
<div class="ct2"></div>
<span>jirengu</span>
</body>
</html>
效果圖如下圖所示，此時外邊距的距離是80px
消除自身元素外邊距合并的效果圖
(2)可以使元素成為BFC婿屹，這樣也可以阻止自身外邊距的合并灭美，如下代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>練習(xí)</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #ccc;
}
.ct{
width: 500px;
margin:10px;
background: pink;
}
.ct .box1{
width: 100px;
height: 100px;
margin: 20px;
border: 1px solid red;
}
.ct .box2{
width: 100px;
height: 100px;
margin: 40px;
border: 1px solid blue;
}
.ct2{
margin: 40px;
overflow: auto;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
<div class="ct2"></div>
<span>jirengu</span>
</body>
</html>
效果圖如下圖
使元素成為BFC從而阻止外邊距的合并
- 父子元素外邊距合并例子如下
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>練習(xí)</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #ccc;
}
header{
background-color: pink;
}
h1{
margin: 40px;
}
</style>
</head>
<body>
<header>
<h1>父子元素外邊距合并</h1>
</header>
</body>
</html>
效果圖如下
父子元素之間外邊距的合并
解決辦法已在第二點(diǎn)里詳述，這里不再贅述
二昂利、去除inline-block內(nèi)縫隙有哪幾種常見方法?
在把元素設(shè)置為inline-block時換行顯示或空格分隔的時候會出現(xiàn)間距届腐，比如
使用inline-block的間距
去除的方法如下：
- 將html中的代碼空格移除
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>練習(xí)</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.ct{
border:1px solid red;
margin:200px auto 0 auto;
width: 500px;
}
ul>li{
display: inline-block;
background: orange;
}
</style>
</head>
<body>
<div class="ct">
<ul>
<li>111</li><li>222</li><li>333</li>
<!--或者可以這樣寫
<li>111</li
><li>222</li
><li>333</li> -->
</ul>
</div>
</body>
</html>
效果圖如下
移除代碼空格去除inline-block內(nèi)縫隙效果圖
- 使用負(fù)margin值
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>練習(xí)</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.ct{
border:1px solid red;
margin:200px auto 0 auto;
width: 500px;
}
ul>li{
display: inline-block;
background: orange;
margin-left: -10px;
}
ul>li:first-child{
margin: 0;
}
</style>
</head>
<body>
<div class="ct">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
</body>
</html>
效果圖如下
設(shè)置負(fù)margin值去除inline-block內(nèi)縫隙效果圖
注意：margin負(fù)值的大小與上下文的字體和文字大小相關(guān)，而且蜂奸，發(fā)現(xiàn)chrome和firefox設(shè)置的值也不一樣犁苏，在firefox中當(dāng)負(fù)margin值設(shè)置為-10px，比如下圖更多不同
負(fù)margin在firefox中的顯示
此時扩所，需要將firefox的負(fù)margin值設(shè)置為-5px才可以围详，如下圖
設(shè)置負(fù)margin值去除inline-block內(nèi)縫隙效果圖
- 使用浮動float
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>練習(xí)</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.ct{
border:1px solid red;
margin:200px auto 0 auto;
width: 500px;
overflow: auto;
}
ul>li{
float: left;
background: orange;
}
</style>
</head>
<body>
<div class="ct">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
</body>
</html>
效果圖
設(shè)置float去除inline-block內(nèi)縫隙效果圖
- 利用font-size為0
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>練習(xí)</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.ct{
border:1px solid red;
margin:200px auto 0 auto;
width: 500px;
font-size: 0;
}
ul>li{
display: inline-block;
background: orange;
font-size: 20px;
}
</style>
</head>
<body>
<div class="ct">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
</body>
</html>
效果圖
利用font-size為0去除inline-block內(nèi)縫隙效果圖
- 利用letter-spacing
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>練習(xí)</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.ct{
border:1px solid red;
margin:200px auto 0 auto;
width: 500px;
letter-spacing: -10px;
}
ul>li{
display: inline-block;
background: orange;
letter-spacing: 0;
}
</style>
</head>
<body>
<div class="ct">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
</body>
</html>
效果圖
利用letter-spacing去除inline-block內(nèi)縫隙效果圖
注意：letter-spacing在chrome和firefox中不一樣，在firefox中要將.ct{letter-spacing:-5px;}才可以
- 利用word-spacing
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>練習(xí)</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.ct{
border:1px solid red;
margin:200px auto 0 auto;
width: 500px;
word-spacing: -10px;
}
ul>li{
display: inline-block;
background: orange;
word-spacing: 0;
}
</style>
</head>
<body>
<div class="ct">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
</body>
</html>
效果圖
利用word-spacing去除inline-block內(nèi)縫隙效果圖
- 參考自張鑫旭-鑫空間-鑫生活
三祖屏、父容器使用overflow: auto| hidden撐開高度的原理是什么助赞？
- overflow定義溢出元素內(nèi)容區(qū)的內(nèi)容會如何處理，其語法為overflow:auto | hidden | scroll | visible| inherit袁勺，其中值分別表示
- auto表示如果內(nèi)容被修剪雹食，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容
- visible默認(rèn)值，內(nèi)容不會被修剪期丰，會呈現(xiàn)在元素框之外
- hidden內(nèi)容會被修剪群叶，并且其余內(nèi)容是不可見的
- scroll內(nèi)容會被修剪吃挑，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容
- 可以看出overflow只是定義溢出內(nèi)容如何處理的屬性，其能撐開高度是因?yàn)?strong>overflow值不為“visiable”的塊級盒子都會形成一個BFC街立，且這個BFC的環(huán)境不受外界的影響并會創(chuàng)造一個獨(dú)立布局舶衬，所以在父元素中設(shè)置了overflow值不為“visiable”的值時，父元素成為BFC几晤，可以包含浮動元素约炎，故父容器的高度可以被撐開
四、BFC是什么蟹瘾？如何形成BFC圾浅，有什么作用?
- BFC：浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions）憾朴，以及overflow值不為“visiable”的塊級盒子狸捕，都會為他們的內(nèi)容創(chuàng)建新的BFC（塊級格式上下文）
- 形成BFC的方法：
- 設(shè)置了浮動float
- 設(shè)置了絕對定位
- 在非塊級盒子的塊級容器上display屬性為inline-block,table-cells,table-captions等
- overflow值不為"visiable"的塊級盒子
- 作用如下：
-
清除由于文字受到浮動的影響，比如
在未給文字所在的元素設(shè)置BFC時众雷，效果如下
未設(shè)置BFC時的效果圖
加入如下代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>練習(xí)</title>
<style>
*{
margin: 0;
padding: 0;
}
.ct{
border:1px solid red;
margin:100px auto 0 auto;
width: 500px;
height: 500px;
}
.ct img{
float: left;
width: 200px;
height: 200px;
}
.ct p{
background-color: pink;
color: #fff;
overflow: auto;
}
</style>
</head>
<body>
<div class="ct">
<img src="img/lufei.jpg" alt="路飛">
<p>清除文字受浮動的影響清除文字受浮動的影響清除文字受浮動的影響清除文字受浮動的影響清除文字受浮動的影響清除文字受浮動的影響清除文字受浮動的影響清除文字受浮動的影響清除文字受浮動的影響清除文字受浮動的影響清除文字受浮動的影響清除文字受浮動的影響清除文字受浮動的影響清除文字受浮動的影響清除文字受浮動的影響清除文字受浮動的影響清除文字受浮動的影響清除文字受浮動的影響清除文字受浮動的影響清除文字受浮動的影響清除文字受浮動的影響清除文字受浮動的影響清除文字受浮動的影響</p>
</div>
</body>
</html>
效果圖如下
BFC效果圖
-
形成一個獨(dú)立空間灸拍，可以撐開父元素高度，比如
在未成為BFC之前砾省，父元素高度塌陷鸡岗，如下圖
父元素高度塌陷
加入如下代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>練習(xí)</title>
<style>
*{
margin: 0;
padding: 0;
}
.ct{
border:1px solid red;
margin:100px auto 0 auto;
width: 500px;
overflow: auto;
/*以下幾種方法也可以，各有各的好處與帶來的影響
overflow: hidden;
display: inline-block;
float: left;*/
}
.ct .box{
float: left;
width: 100px;
height: 100px;
margin: 20px;
background-color: pink;
color: #fff;
}
</style>
</head>
<body>
<div class="ct">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
</html>
效果圖如下圖
運(yùn)用父元素?fù)伍_了父元素的高度
-
阻止外邊距的合并编兄，比如
外邊距合并
加入如下代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>練習(xí)</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #ccc;
}
.ct{
width: 500px;
margin: 0 auto;
background: pink;
}
.ct .box1{
display: inline-block;
width: 100px;
height: 100px;
margin: 20px;
border: 1px solid red;
}
.ct .box2{
display: inline-block;
width: 100px;
height: 100px;
margin: 50px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
</body>
</html>
效果圖如下
阻止外邊距合并
參考自W3Cplus
五轩性、浮動導(dǎo)致的父容器高度塌陷指什么？為什么會產(chǎn)生狠鸳？有幾種解決方法揣苏？
-
浮動導(dǎo)致的父容器高度塌陷指：父容器的高度因?yàn)槠渥釉氐母用撾x文檔流而導(dǎo)致父元素?zé)o法得到子元素的高度支撐從而顯示為0的情況，比如下圖所示
父元素高度塌陷 解決辦法如下：
在父容器中設(shè)置float件舵，比如如下代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>練習(xí)</title>
<style>
*{
margin: 0;
padding: 0;
}
.center{
float: left;
width: 500px;
margin: 100px auto;
border: 1px solid red;
}
.box1{
float: left;
width: 100px;
height: 100px;
background: pink;
}
.box2{
float: right;
width: 100px;
height: 100px;
background: orange;
}
</style>
</head>
<body>
<div class="center">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
效果圖如下圖所示
父元素高度撐開
- 在父容器中設(shè)置overflow不為visible的值卸察，比如如下代碼
.center{
overflow: auto;
width: 500px;
margin: 100px auto;
border: 1px solid red;
}
效果圖如下圖
父元素高度被撐開
- 在父容器中設(shè)置display為inline-block等值，比如如下代碼
.center{
display: inline-block;
width: 500px;
margin: 100px auto;
border: 1px solid red;
}
效果圖
父元素高度被撐開
- 在父容器中設(shè)置height值铅祸，比如如下代碼
.center{
height: 500px;
width: 500px;
margin: 100px auto;
border: 1px solid red;
}
效果圖
父元素高度被撐開
- 在父元素中設(shè)置如下代碼
.center:after{
content: '';
display: block;
clear: both;
}
.center{
*zoom:1;
}
效果圖
父元素高度被撐開
六坑质、以下代碼每一行的作用是什么？ 為什么會產(chǎn)生作用临梗？ 和BFC撐開空間有什么區(qū)別涡扼？
代碼如下
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1;
}
- 總的作用清除浮動帶來的影響，每一行的代碼作用如下：
- .clearfix:after~選擇.clearfix類為其設(shè)置after偽類
- content:"";表示內(nèi)容為空
- display:block;表示將.clearfix設(shè)置為塊級元素
- clear:both表示將元素兩邊的浮動清除
- *zoom:1;IE67的屬性夜焦，設(shè)置.clearfix的縮放比例
- 原因如下
- 通過在.clearfix后增加一個空的設(shè)置了清除兩邊浮動塊級元素壳澳，父元素會感知到這個空元素并且把自身空間撐開岂贩，但其并沒有形成獨(dú)立的空間
- BFC是一個獨(dú)立的布局環(huán)境茫经，BFC中的元素的布局是不受外界的影響
版權(quán)聲明：本教程版權(quán)歸鄧攀和饑人谷所有巷波，轉(zhuǎn)載須說明來源！Ｐ渡 Ｄ鳌！
