盒模型

在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：. width和height： 内容 的宽度、高度（不是盒子的宽度、高度）。. padding：内边距。. border：边框。. margin：外边距。. 在 标准盒子模型 中， width 和 height 指的是内容区域 的宽度和高度。. 增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

 

 

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

Padding(内边距)- Padding是盒子中的文字距离盒子边框（border）的距离，内边距是透明的。

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

Margin(外边距)- margin是盒子距离网页边的距离，外边距是透明的。

最终盒子实际所占位置大小计算公式是这样的：

盒子所占位置的实际宽度=宽度+左填充+右填充+左边框+右边框+左边界+右边界

盒子所占位置的实际高度=高度+顶部填充+底部填充+上边框+下边框+上边界+下边界

要注意区分的是盒子所占位置的实际宽度高度值和盒子实际大小的宽度和高度值，盒子实际大小的宽度和高度是所占位置实际宽度高度的值减去边界（margin）所占的大小，即

盒子的实际宽度=宽度+左填充+右填充+左边框+右边框

盒子的实际高度=高度+顶部填充+底部填充+上边框+下边框

盒子模型的3D示意图，如下图所示，padding与margin是看不见的透明元素