CSS 盒子模型
所有 HTML 元素都可以被视为框。 在 CSS 中css3多选框，当谈论设计和布局时，会使用术语“盒模型”或“盒子模型”。
CSS 盒模型本质上是一个包围每个 HTML 元素的盒子。 它包括：内边距、边框、内边距和实际内容。 右图为盒子模型：
不同部分的解释：
盒模型允许我们在元素周围添加边框并定义它们之间的空间。
元素框的最里面部分是实际内容，并且填充立即包围内容。 前导渲染元素的背景。 填充的边缘是边框。 边框之外就是外边距，外边距默认是透明的，所以不会遮挡后面的任何元素。
提示：背景应用于由内容和内边距、边框组成的区域。
内边距、边框和内边距都是可选的，默认为零。 此外，许多元素将具有由用户代理样式表设置的填充和前导。 可以通过将元素的边距和填充设置为零来覆盖此浏览器样式。 这可以单独完成，也可以使用公共选择器为所有元素设置：
* {
margin: 0;
padding: 0;
}
在CSS中，宽度和高度是指内容区域的长度和高度。 减少内边距、边框和内边距不会影响内容区域的大小，并会减少元素框的整体大小。
假设盒子的每边都有 10 个像素的外部间距和 5 个像素的内部间距。 如果希望元素框为100像素css3多选框，则需要将内容长度设置为70像素。 见右图：
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
提示：内边距、边框和内边距可以应用于元素的所有侧面或单个侧面。
提示：外部距离可以为负值，并且在许多情况下使用负外部距离。
例子
演示盒型号：
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
自己尝试一下
