css-边界重叠以及边界塌陷

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;width: 300px;height: 300px"></div>

<div class="div1">

   <div class="div2"></div>
   <div class="div3"></div>
</div>

</body>

</html>
View Code

解决方法:

overflow:hidden;
也就是防止溢出部分,隐藏溢出部分.
overflow:auto
制作出一个滚动条,当你有元素溢出,可以用滚动条把溢出部分的东西显示出来.

 

posted @ 2017-09-21 15:24  forjie  阅读(1589)  评论(0)  编辑  收藏  举报