box-sizing设置

box-sizing作用

设置盒模型以哪种方式计算

属性border-box

以border为边界，宽高是包括边框和内边距的，所以border+padding+content = width；如果给宽高后再给padding是向里，盒模型的宽高不会改变

属性content-box

以content为边界，宽高仅仅是内容的宽高，再给padding或者border是向外，所以盒模型的宽高是变大的

总结

box-sizing指定那个属性就宽高就作用到那个属性上
为了方便计算，在重置样式的时候会初始化盒模型，如下:

* {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

by the way

盒模型不会影响定位元素的作用范围，始终以margin的位置进行定位,以父元素的conten为基准

div,p{
	margin: 0;
}
#box{
	width: 200px;
	height: 200px;
	border: solid 10px #0000FF;
	/*border-box是以边框为边界，边框向里*/
	box-sizing: border-box; 
	/*content-box是以内容为边界，边框向外*/
	/*box-sizing: content-box;*/
	/*总结：box-sizing指定谁，宽高就定准在谁身上*/
	position: relative;
}
#box2{
	/*元素没有定位以边框为边界*/
	width: 40px;
	height: 40px;
	border: 8px solid red;
	/*元素有定位的话是以margin为起始点，不影响margin的作用*/
	position: absolute;
	top: 0;
	left: 0;
	margin-left: 20px;
}
			
<div id="box">
	<p id="box2"></p>
</div>

box2的margin-left会相对box的content定位，而不包括边框