垂直外邊距合并的問題
外邊距合并出現(xiàn)的三個場景
- 同一個BFC，且同處于普通流中的垂直相鄰元素外邊距合并
- 父子元素的外邊距合并
- 空元素的外邊距合并
合并規(guī)則
- 兩個margin都是正值的時候，取兩者的最大值；
- 當(dāng) margin 都是負值的時候，取的是其中絕對值較大的，然后，從0位置，負向位移；
- 當(dāng)有正有負的時候，先取出負 margin 中絕對值中最大的，然后，和正 margin 值中最大的 margin 相加。
- 所有毗鄰的margin要一起參與運算，不能分步進行
不讓相鄰元素外邊距合并的方法
- 被非空內(nèi)容、padding、border 或 clear 分隔開
- 不在一個普通流中或一個BFC中
- margin在垂直方向上不毗鄰
- 如果我們想減少這種情況的發(fā)生：在實際編寫過程中，應(yīng)盡量避免同時使用
margin-bottom和margin-top
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.clearfix:after {
content: " ";
display: table;
clear: both;
}
.parent {
/* 對于這種父子外邊距合并的情況，除了了讓父元素形成BFC，給其加 padding 或 border 都可以 */
margin-top: 50px;
/*border: 1px solid red;*/
/*padding: 1px 0;*/
background-color: teal;
/*overflow: hidden;*/
}
.parent > div {
width: 100px;
height: 100px;
}
.child1 {
clear: right;
margin-top: 50px;
margin-bottom: 50px;
background-color: lightblue;
}
.child2 {
margin-top: 50px;
background-color: lightcoral;
opacity: 0.8;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1"></div>
<!-- 添加內(nèi)容 -->
<div class="child2"></div>
</div>
</body>
總結(jié)
- 這些 margin 都處于普通流中，并在同一個BFC中；
- 這些 margin 沒有被非空內(nèi)容、padding、border 或 clear 分隔開；
- 這些 margin 在垂直方向上是毗鄰的，包括以下幾種情況：
- 一個 box 的 top margin 與第一個子box 的 top margin
- 一個 box 的 bottom margin 與最后一個子box 的 bottom margin，但須在該box 的 height 為 auto 的情況下
- 一個 box 的 bottom margin 與緊接著的下一個 box 的 top margin
- 一個 box 的 top margin 與其自身的 bottom margin，但須滿足沒創(chuàng)建BFC、零min-height、零或者“auto”的 height、沒有普通流的子元素
- 例外的情況：
- 根元素（html）的外邊距不會參與折疊
- 設(shè)置任何屬性的空span和空div不影響任何布局，可以無視之。
margin負值
表現(xiàn)
- 雖然margin可以應(yīng)用到所有元素，但display屬性不同時，表現(xiàn)也不同
- block元素可以使用四個方向的margin值
- inline元素使用上下方向的margin值無效
- inline-block使用上下方向的margin負值看上去無效：這與其默認的
vertical-align: baseline;有關(guān)系，當(dāng)垂直對齊的屬性值為其它值時，則會顯示不同的視覺效果
重疊
- margin負值并不總是后面元素覆蓋前面元素，它與元素display屬性有關(guān)系
- 兩個block元素重疊時，后面元素可以覆蓋前面元素的背景，但無法覆蓋其內(nèi)容
- 當(dāng)兩個inline元素，或兩個line-block元素，或inline與inline-block元素重疊時，后面元素可以覆蓋前面元素的背景和內(nèi)容
- 當(dāng)inline元素與block元素重疊時，inline的元素覆蓋block元素的背景和內(nèi)容
- 當(dāng)inline-block元素與block元素重疊時，inline-block元素覆蓋block元素的背景，但無法覆蓋其內(nèi)容
浮動
- block元素與浮動元素重疊時，其邊框和背景在該浮動元素之下顯示，而內(nèi)容在浮動元素之上顯示
- inline或inline-block元素與浮動元素重疊時，其邊框、背景和內(nèi)容都在該浮動元素之上顯示
定位
- 定位元素（position不為static）覆蓋其他元素的背景和內(nèi)容
- 將relative屬性值應(yīng)用于inline元素，由于無法改變其行內(nèi)元素的本質(zhì)，所以其上下margin依然存在問題
應(yīng)用
- 水平垂直居中：由于margin的百分比相對于包含塊的寬度，所以在需要居中的元素外面套一個空的
<div>元素，并且利用absolute的包裹性，使該元素的寬高等于需要定位的元素的寬高
<style type="text/css">
.box{
position:relative;
width: 200px;
height: 200px;
border: 2px solid black;
background-color: lightgreen;
}
.out{
position: absolute;
left: 50%;
top: 50%;
}
.in{
height: 100px;
width: 100px;
margin-left: -50%;
margin-top: -50%;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="out">
<div class="in">測試內(nèi)容</div>
</div>
</div>
</body>
- 列表項兩端對齊：在列表項外面包一層元素，使用margin負值來將最后一個列表項拉回來
<style type="text/css">
ul{
margin: 0;
padding: 0;
list-style:none;
}
.box{
width: 200px;
background-color: pink;
}
.list{
overflow: hidden;
margin-right: -10px;
}
.in{
float: left;
width: 60px;
height: 100px;
margin-right: 10px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="box">
<ul class="list">
<li class="in">1</li>
<li class="in">2</li>
<li class="in">3</li>
</ul>
</div>
</body>
- 三欄自適應(yīng)布局：中間的主體使用雙層標(biāo)簽，外層
<div>寬度100%顯示，并且浮動，內(nèi)層<div>為真正的主體內(nèi)容，含有左右210px的margin值。左欄和右欄都采用margin負值。左欄左浮動，margin-left為-100%，正好使左欄位于頁面左側(cè)。右欄左浮動，大小為其本身的寬度200px
<style type="text/css">
html,body{
height: 100%;
}
body{
margin: 0;
}
.main{
float: left;
width: 100%;
height: 100%;
}
.main .in{
height: 100%;
margin: 0 210px;
background-color: pink;
}
.left,.right{
float: left;
width: 200px;
height: 100%;
background-color: lightgreen;
}
.left{
margin-left: -100%;
}
.right{
margin-left: -200px;
}
</style>
</head>
<body>
<div class="main">
<div class="in">in</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
- 三欄等高布局：給每欄設(shè)置大的底部內(nèi)邊距，然后用數(shù)值相同的負外邊距消除這個高度，然后在外層容器中設(shè)置
overflow: hidden;
<style type="text/css">
body{
overflow: hidden;
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.list{
overflow: hidden;
width: 100%;
height: 100%;
}
.main{
margin: 0 210px;
background-color: lightgreen;
}
.left{
float: left;
width: 200px;
background-color: pink;
}
.right{
float: right;
width: 200px;
background-color: pink;
}
.main,.left,.right{
margin-bottom: -9999px;
padding-bottom: 9999px;
}
</style>
</head>
<body>
<ul class="list">
<li class="left">左側(cè)文字比較少</li>
<li class="right">右側(cè)文字比較多右側(cè)文字比較多右側(cè)文字比較多右側(cè)文字比較多右側(cè)文字比較多右側(cè)文字比較多右側(cè)文字比較多右側(cè)文字比較多右側(cè)文字比較多右側(cè)文字比較多右側(cè)文字比較多右側(cè)文字比較多右側(cè)文字比較多右側(cè)文字比較多右側(cè)文字比較多右側(cè)文字比較多</li>
<li class="main">中間文字比較少</li>
</ul>
</body>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
