最近在学习vue的相关知识，由iOS开发转前段，js觉得难度还好，可以理解，反而这个css布局让我头大，为此这边简单记录下盒子模型的基本理论
盒子模型是css中一个经典的模型，他包括了内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性像我们日常中所见到的盒子，所以叫它盒子模型。
1. 盒子模型概念
CSS盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素
元素框的总宽度 = 元素的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度
元素框的总高度 =元素的height + padding的上下边距的值 + margin的上下边距的值 + border的上下宽度
2. 盒子中的区域
一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
- width和height：内容的宽度、高度（不是盒子的宽度、高度）。
- padding：内边距。
- border：边框。
- margin：外边距。
标准盒子模型
IE盒子模型
3. box-sizing
在CSS 盒子模型定义里，对一个元素所设置的width与height只会应用到这个元素的内容区。如果这个元素有任何的border或padding，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这点会影响你的布局。
box-sizing 属性可以被用来调整这些表现:
content-box是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。border-box告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
总结： padding和margin在CSS中分别用于不同的目的，理解它们的区别对于创建有效的布局非常重要。
-
Padding（内边距） ：
- Padding应用于元素的内容区域与其边框之间的空间。换句话说，它是内容与元素边缘之间的距离。
- 使用场景包括但不限于：当你想要增加元素内部的空间而不影响其外部尺寸时；当需要为背景颜色或图像扩展到的范围添加额外的空间时。
- 示例：在一个按钮内增加一些空间使文本不紧贴按钮边缘，或者在图片周围添加空间以避免文字过于靠近图片。
-
Margin（外边距） ：
- Margin应用于元素边框之外的空间，主要用于控制元素与其他元素之间的间距。
- 使用场景包括但不限于：当你希望调整元素相对于其他元素的位置而不改变元素本身的大小时；创建元素之间的间隔，比如段落之间的空白、块级元素之间的距离等。
- 示例：在两个相邻的
<div>之间创建一个固定的间距，或者让一个标题远离上方的内容但不影响标题下方的内容布局。
如果是开发一个系统，首先应该将box-sizing设置为border-box，这样会给你省不少页面问题。