box-sizing设置

Posted 2021-01-19 bonly-ge

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