H5基础知识第七课时（CSS）

xiaoxiao2021-02-28 87

1.margin折叠结论： (1)垂直排放的盒子，垂直间距是合并的（取最大值） (2)水平排放的盒子，水平间距是margin的累加 (3)margin折叠只发生在块级元素上； (4)浮动元素的margin不与任何margin发生折叠； (5)设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折叠； (6)绝对定位元素的margin不与任何margin发生折叠； (7)根元素的margin不与其它任何margin发生折叠； 2.嵌套盒子时子盒子margin与父盒子重叠问题解决方式 (1)为父盒子添加 overflow：hidden (2)为父盒子添加padding

(3)为父盒子添加border

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嵌套盒子</title> <style> #parent{ width: 300px; height: 300px; background-color: #FF6600; overflow: hidden; } #child{ width: 150px; height: 150px; background-color: #cccccc; margin: 0 auto; margin-top: 75px; } </style> </head> <body> <div id="parent"> <div id="child"></div> </div> </body> </html>

转载请注明原文地址: https://www.6miu.com/read-52997.html

技术

最新回复(0)