1)body的外边距
当你定位在body的最顶以及最角落的时候,可以观察到窗口并没有紧贴浏览器的窗口,这是因为body默认也是一个盒子,他的外面还有一层html,在默认情况下body和浏览器之间会有若干像素的margin,具体数值因浏览器不尽相同.所有body的盒子不会紧贴浏览器的窗口,这就需要我们用下面代码:
body{ border:1px solid red; } body{margin:0}
2)边界塌陷和边界重叠
1、兄弟div：
div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值
2、父子div：
if
父级div中没有border，padding，inlinecontent，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline
content(文本)中的其中一个，然后按此div 进行margin；
<!DOCTYPE html> <html lang="en" style="padding: 0px"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0px; } .div1{ background-color: rebeccapurple; width: 300px; height: 300px; overflow: hidden; } .div2{ background-color: green; width: 100px; height: 100px; margin-bottom: 40px; margin-top: 20px; } .div3{ background-color:teal; width: 100px; height: 100px; margin-top: 20px; } </style> </head> <body> <div style="background-color: bisque; 300px;height: 300px"></div> <div class="div1"> <div class="div2"></div> <div class="div3"></div> </div> </body> </html>
解决方法:
overflow:hidden;
也就是防止溢出部分,隐藏溢出部分.
overflow:auto
制作出一个滚动条,当你有元素溢出,可以用滚动条把溢出部分的东西显示出来.