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定位，而不包括邊框