CSS-盒模型

概述

css盒模型指定元素如何显示。页面的每个元素都是一个矩形区域，这个矩形区域包括元素的内容，内边距，边框以及外边距构成。内边距是内容边界和边框之间的区域，可以通过padding属性指定，边框是矩形区域的边界，可以由border属性进行配置，外边距则由是margin属性。

.box{
    border-color: green;
    border-width: 10px;
    border-style: solid;

    padding: 50px 50px;
    margin: 50px 50px;
}

body {
    border: 5px  dotted red;
}
<div class="box">我是一个div盒子</div>

外边距的叠加

当两个相邻的盒子碰到一起的时候，如果两个盒子都设置了外边距，那么一般情况下这两个外边距会叠加，实际的外边距为较大值的那一方。

.box1{
    border: 2px solid pink;
    padding: 30px;
    margin-bottom: 50px
}
.box2{
    border: 2px dotted purple;
    padding: 30px;

    margin-top:90px;
}

给盒子1设置了外边距50px,给盒子2设置了外边距90px，最后实际的外边距为90px。

只有普通文档流中块框的垂直外边距才会发生叠加，行内框，浮动框和绝对定位框之间的空白都不会叠加。

.box1{
    border: 2px solid pink;
    padding: 30px;
    margin-bottom: 50px;
    float: left;
    width: 80%;
}
.box2{
    border: 2px dotted purple;
    padding: 30px;

    margin-top:90px;
    width:80%;
    float: left;
}