由浅入深 谈谈CSS盒模型

一.什么是盒模型

box model页面上所有的元素，抽象呈现的都是一个盒子的形状，有些地方也称之为框模型。盒子模型图如下：

二.两种盒模型及四个组成部分

组成由外到内分别是：

• margin（外边距）：元素A的边到元素B的边的距离，没有背景色，可以设置为负数。
• border（边框）：元素A的边，本身没有属性，可以人为添加。
• padding（内边距）：元素A的content之外撑起的距离，继承了元素A的背景色。
• conten（内容）：另一个元素，或一些元素的合集。

两种盒模型分别为W3C标准盒模型：

及IE盒模型：

通过这两张图片我们可以很清楚的看出这两者的区别，不同之处在于width属性，标准盒模型为
width = content
而IE盒模型为width = border + padding + content。
那么如何设置这两个盒模型呢，很简单的方法：

box-sizing:content-box(w3c)|border-box(ie)|inherit

• content-box：默认值，是在css2.1规定的高度及宽度行为，高度和宽度分别应用到元素的内容框，在内容之外绘制padding及border。
• border-box：为元素设定的高度及宽度决定了元素的边的范围。即与前者相反的，会在内容之内绘制padding及border。
• inherit：从父元素继承box-sizing的值。

三.实际开发中会遇到的问题

1. margin越界问题

当父元素没有设置margin-top属性，而子元素设置了marging-top属性，最后一个子元素的margin-bottom同理，子元素的属性会越过父元素生效，使用选择器抹灭子元素的属性固然可以，但未免有些麻烦，这里是通过伪类的方式，让父元素生成一道看不见的边界解决这个问题，除此之外，给父元素加边框，padding等方法也可以解决该问题，但都有些副作用：

.parent {
     width : 500px;
     height : 500px;
     background-color : red;       
}
.child {
     width : 200px;
     height : 200px;
     background-color : green;
     margin-top : 50px;
}

这时候我们只需要：

.parent:before {
     content : " ";
     display : table;
}

table只是举个例子，实际上很多属性都可以，有兴趣的可以自己尝试。
2. 同级元素在垂直方向上的margin重叠问题

最终的margin大小需要分三个情况，第一种情况，两个margin的值都为正数，结果取两者中最大的值；第二种情况，其中一个margin的值为负数，结果取两者的和；第三种情况，两个margin的值都是负数，结果取两者中最小的值。

解决方法：避免这种写法，可以用margin作为上边距，padding作为下边距，对该问题进行规避。
3. box-sizing的使用场景

• 当子元素的margin和border会撑破父元素时，给子元素设置border-box属性，把边框纳进子元素内；
• 表单中的一些input元素还是展示的传统IE模型，可以给父元素设置，来统一风格。