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