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;}