玛珍，玛珍，margin！
生活随笔
收集整理的這篇文章主要介紹了
玛珍，玛珍，margin！
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
最近在整理鞏固面試相關(guān)的資料，又看到了熟悉的老朋友：margin，當(dāng)時(shí)覺得其讀起來很親切，現(xiàn)在又發(fā)現(xiàn)很多遺忘的知識點(diǎn)。
了解margin
margin，譯為“外邊緣”，在CSS作為屬性定義元素周圍的空間，從以下盒模型中能更好的理解margin。
| 屬性 | 描述 |
|---|---|
| margin | 簡寫屬性。在一個(gè)聲明中設(shè)置所有外邊距屬性。 |
| margin-bottom | 設(shè)置元素的下外邊距。 |
| margin-left | 設(shè)置元素的左外邊距。 |
| margin-right | 設(shè)置元素的右外邊距。 |
| margin-top | 設(shè)置元素的上外邊距。 |
margin屬性可以有一到四個(gè)值。
- margin:25px 50px 75px 100px;
- 上邊距為25px
- 右邊距為50px
- 下邊距為75px
- 左邊距為100px
- margin:25px 50px 75px;
- 上邊距為25px
- 左右邊距為50px
- 下邊距為75px
- margin:25px 50px;
- 上下邊距為25px
- 左右邊距為50px
- margin:25px;
- 所有的4個(gè)邊距都是25px
margin負(fù)值
- margin-top、left負(fù)值：元素向上、向左移動(dòng)
- margin-right負(fù)值：右側(cè)元素左移，自身不收影響；當(dāng)右邊無元素，其實(shí)就是縮小自身寬度。
- margin-bottom負(fù)值：下方元素上移，自身不受影響
margin塌陷
margin塌陷（又稱margin重疊）指文檔流內(nèi)，塊級元素與塊級元素垂直方向上的 margin 合并（塌陷）為單個(gè) margin，且只發(fā)生在垂直方向。行內(nèi)元素不存在margin 塌陷，因?yàn)樾袃?nèi)元素不占有外邊距，同樣道理float元素也不存在margin合并。
總結(jié)為：
- 相鄰元素的margin-top和margin-bottom會(huì)發(fā)生重疊
- 空白內(nèi)容的標(biāo)簽也會(huì)重疊
解決方案：
1.BFC塊級格式化上下文，創(chuàng)建隔離的容器
<body>
<style>
.aa {
display: flex;
flex-direction: column;
width: 300px;
}
.bb {
width: 200px;
height: 200px;
border: 1px solid #333;
margin-top: 10px;
}
</style>
<div class="aa">
<div class="bb" style="margin-bottom: 10px;"></div>
<div class="bb" style="margin-top: 10px;"></div>
</div>
</body>
2.子元素浮動(dòng)定位，父元素清除浮動(dòng)
<body>
<style>
.aa {
border: 1px solid red;
}
.bb {
width: 200px;
height: 200px;
border: 1px solid #333;
}
.clearfix:after {
content:'';
display: table;
clear:both;
}
</style>
<div class="aa clearfix">
<div class="bb" style="margin-bottom: 10px;"></div>
<div class="bb" style="margin-top: 10px;float:left;"></div>
</div>
</body>
3.修改代碼，添加空div，設(shè)置為flex布局
<body>
<style>
.aa {
border: 1px solid red;
}
.bb {
width: 200px;
height: 200px;
border: 1px solid #333;
}
</style>
<div class="aa">
<div class="bb" style="margin-bottom: 10px;"></div>
<div style="display: flex;"></div>
<div class="bb" style="margin-top: 10px;"></div>
</div>
</body>
更多參考：https://blog.csdn.net/Celester_best/article/details/127455732
總結(jié)
以上是生活随笔為你收集整理的玛珍，玛珍，margin！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Go 语言中 defer 使用时有哪些陷
- 下一篇： 大模型应用(1) 搭建本地知识库