盒子模型及常见的问题

2017,1,14 css Hits

盒子模型概念是初学者要学习而且搞明白的知识点，不然在开发过程中会遇到各种的bug，出现各种问题。理解了这个重要的概念才能更好的排版，进行页面布局。因为自己就在填坑，今天就温习一下盒子模型，面试中也会经常问到。

一、css盒子模型概念

CSS css盒子模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：

盒子模型

图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin），整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。

那么，元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；

元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值＋ border的上下宽度。

两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值，如图：

盒子模型

比较容易理解，所以在页面中有时候遇到实际情况是需要考虑这个因素的。当然外边距合并其实也有存在的意义，如下图：

盒子模型

如果在实际开发中，不需要外边距合并。也可能盒子塌陷。一般以下解决方案：

box-sizing属性值为：content-box ，border-box ，inherit。我也在网上也翻阅了很多资料。发现盒子模型分两种：一种是W3C盒子模型，一种是IE盒子模型。也就是默认盒子模型和怪异盒子模型。

1，W3C定义的盒子模型包括margin、border、padding、content ，元素的width=content的宽度

盒子模型

2，IE盒子模型与W3C的盒子模型唯一区别就是元素的宽度，元素的width=content+padding+border

盒子模型

W3C盒模型与IE盒模型的标准不同，从而影响开发者。其实根据自己的需求来选择盒模型这样最好。在不断的发展完善中W3C也做出了改进。就在CSS3中新增了一个样式box-sizing，也刚好对应这两个盒模型。下面的案例也更直观的了解盒子模型。

（1） content-box 元素的width=content+padding+border

	.box{
	    box-sizing:content-box;
	    width:200px;
	    padding:10px;
	    border:15px solid #eee;
	 }

（2） border-box 元素的width=width（用样式指定的宽度）

	.box {
	   box-sizing:border-box;
	   width:200px;
	   padding:10px;
	   border:15px solid #eee;
	 }

（3）inherit , 规定应从父元素继承 box-sizing 属性的值

1.对于行级元素，margin-top和margin-bottom对于上下元素无效，margin-left和margin-right有效

2.对于相邻的块级元素margin-bottom和margin-top 取值方式