box-sizing小解

在说今天的正题之前先说一下，css默认计算width值的方法，这是基础，了解了传统是怎么计算的，出现了什么问题，为何提出了box-sizing的说法，这些问题对于系统学习css是很有帮助的。

盒子模型

传统的计算方法是：width = 内容宽度+padding*2+border-width*2 ,举个栗子。。

p{
	color: white;
	background: darkolivegreen;
	width: 200px;
	height: 200px;			
	padding: 20px;				
	border: 1px solid blue;
	background-clip: content-box;
}

<p class="p1">
	传统的计算width
</p>

      

解释一下：

background-clip: content-box;使得背景颜色只在content中显示，不会超出content范围。现在这个p元素的总宽度是242px 宽度。不信的话用你们的火眼金睛+Ctrl+Alt+A量一下。。

其实，这就是box-sizing 属性取默认值content-box时的计算方法。这就是box-sizing 属性取默认值content-box时的计算方法。这就是box-sizing 属性取默认值content-box时的计算方法。因为这个方法有时候对于计算太麻烦，就又衍生了另一个属性值，border-sizing

听好了，border-sizing时，width是多大，元素在页面上占据的地方就是多大，一个oorder把元素大小框住了，就像是孙悟空给唐增画的小圈圈，到border在内的宽度就是你设置的width值。还是举个栗子更形象。。

p{
	color: white;
	background: darkolivegreen;
	width: 200px;
	height: 200px;			
	padding: 20px;				
	border: 1px solid blue;
	background-clip: content-box;
	box-sizing: border-box;
}

<p class="p1">
	box-sizing:border-box
</p>

现在再测量一下，就是包括蓝色边框在内的宽度就是200px.

理解力不好的就想象着唐僧的小圈圈就好记忆了