CSS盒子模型

CSS 盒子模型

所有HTML元素都可以看作一个盒子

盒子模型的元素：边距，边框，填充，内容

元素说明：

Margin（外边距）：清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

                                可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

<div>

        margin-top:100px;

        margin-right:100px;

        margin-bottom:100px;

        margin-left:100px;

</div>

简写：

<div>

　　margin:10px 20px 30px 40px;

</div>

Border(边框):围绕在内边距和内容外的边框

 <div>

　　border: 20px solid red;

</div>

Padding(填充)：定义元素边框与元素内容之间的空间，即上下左右的内边距

<div>

　　padding-top:10px;

　　padding-right:10px;

　　padding-bottom:10px;

　　padding-left:10px;

</div>

简写：

<div>

　　padding:10px;20px;30px;40px;

</div>

Content(内容)：盒子的内容，显示文本和图像。

元素的计算公式：

总元素宽度=元素宽度+左填充+右填充+左边框+右边框+左边距+右边距

总元素高度=元素高度+顶部填充+底部填充+上边框+下边框+上边距+下边距