浅谈前端的盒子

盒子的定义所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

如开发者工具中盒子模型所示，他有4个组成部分

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

在我们进行页面布局的时候需要大量的使用到盒子，他有盒子本身的Border(边框)、 Padding(内边距)、 Content(内容) 以及盒子外部的外边距即 margin 4个部分组成。

在css3之前使用这四个属性进行页面布局都是比较合适的，但是在css3之后我不推荐使用margin 这个属性。这是因为css3新增加的—“box-sizing:border-box;”。在盒子中设置了这个属性后：使得padding和border加上content的宽高是受到width和height属性的控制的。而margin 是不受控制的，如下如可见，他的content+padding+border刚好是我设置的width和height的值，而margin处于width和height的约束之外，大量的使用margin会破坏布局的整体性，大大加大计算量，造成内容溢出等破坏布局的情况。

介绍盒子的基本概念后我们来了解一下css3新增加的属性flex布局。
MDN对弹性盒子（flex）的解释是:

CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。

基本例子
在以下示例中，已将容器设置为 display: flex ，这意味着三个子项成为弹性项。justify-content 的值已设置为 space-between ，以便在主轴上均匀地分隔项目。在每个项目之间放置等量的空间，左侧和右侧项目与Flex容器的边缘齐平。你还能看到项目在十字轴上拉伸，因为 align-items 的默认值为 stretch。这些项目伸展到Flex容器的高度，使它们看起来都像最高的项目一样高。

这里推荐大家去看一下阮一峰老师的介绍，他的水平和介绍均远在本人之上，推荐大家去看一下