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

上一章CSS教程请查看：css表格table样式和属性
CSS box盒子模型描述了元素在网页上的视觉布局。
什么是盒子模型？可以显示的每个元素都由一个或多个矩形框组成。CSS 盒子模型通常描述这些矩形框在web页面上的布局方式。这些框可以具有不同的属性，可以以不同的方式相互交互，但是每个框都有一个内容区域和可选的周围空白、填充和边框。
下面的关系图演示了页边距、填充和边框CSS属性如何决定一个元素在web页面上可以占据多少空间。

文章图片
元素的宽度和高度通常，当你使用CSS width和height属性设置元素的宽度和高度时，实际上你只是设置元素内容区域的宽度和高度。元素框的实际宽度和高度取决于几个因素。
一个元素的框可能占用的实际空间是这样计算的：

盒子大小	CSS属性
Total Width	width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
Total Height	height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

在接下来的章节中给出不同属性的解释。
【css box盒子模型介绍和用法 – CSS教程】注：在CSS框模型; 元素框的内容区域是文本、图像、列表、表格、表单、视频等显示的区域。