css box盒子模型介绍和用法 – CSS教程

上一章CSS教程请查看：css表格table样式和属性

CSS box盒子模型描述了元素在网页上的视觉布局。

什么是盒子模型？

可以显示的每个元素都由一个或多个矩形框组成。CSS 盒子模型通常描述这些矩形框在web页面上的布局方式。这些框可以具有不同的属性，可以以不同的方式相互交互，但是每个框都有一个内容区域和可选的周围空白、填充和边框。

下面的关系图演示了页边距、填充和边框CSS属性如何决定一个元素在web页面上可以占据多少空间。

元素的宽度和高度

通常，当你使用CSS width和height属性设置元素的宽度和高度时，实际上你只是设置元素内容区域的宽度和高度。元素框的实际宽度和高度取决于几个因素。

一个元素的框可能占用的实际空间是这样计算的：

在接下来的章节中给出不同属性的解释。

注：在CSS框模型;元素框的内容区域是文本、图像、列表、表格、表单、视频等显示的区域。