【温故知新】CSS学习笔记（外边距合并）
生活随笔
收集整理的這篇文章主要介紹了
【温故知新】CSS学习笔记（外边距合并）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CSS外邊距合并
?
外邊距合并
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合并。
一、相鄰塊元素垂直外邊距的合并
當上下相鄰的兩個塊元素相遇的時候，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距并不是margin-bottom加上margin-top之和，而是兩者之間的較大者，這種現象被稱之為相鄰塊元素垂直外邊距的合并（或外邊距塌陷）。
?
如上圖所示，外邊距合并形成一個外邊距（最終兩個盒子的距離以數值大的為準）。
其實這是一個瀏覽器的Bug，日常工作中我們應該盡量避免。
【實例代碼】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>外邊距合并</title><style>div {width: 300px;height: 200px;background-color: purple;}.one {margin-bottom: 100px;}.two {background-color: pink;margin-top: 50px;}</style> </head> <body><div class="one">One</div><div class="two">Two</div> </body> </html>?
?
二、嵌套塊元素垂直外邊距的合并
對于兩個嵌套關系的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合并，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，這種情況也會發生。
?
?
??解決方案：
- 1、可以為父元素定義1像素的上邊框或上內邊距；
border-top: 1px solid purple;
padding-top: 1px;
但是這個方法增大了盒子，需要在width中減去；
- 2、可以為父元素添加overflow:hidden（溢出隱藏）;
【實例代碼】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>.one {width: 500px;height: 500px;background-color: purple; /*border-top: 1px solid purple;padding-top: 1px;*/overflow: hidden;}.two {width: 200px;height: 200px;background-color: pink;margin-top: 50px;margin-left: 50px;}</style> </head> <body><div class="one"><div class="two"></div></div> </body> </html>?
?
總結
以上是生活随笔為你收集整理的【温故知新】CSS学习笔记（外边距合并）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【温故知新】CSS学习笔记（盒子水平居中
- 下一篇： 【转载】如何在归档后启用归档信息系统