box-sizing设置

Posted bonly-ge

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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定位,而不包括边框


以上是关于box-sizing设置的主要内容,如果未能解决你的问题,请参考以下文章

box-sizing:border-box 不是本来就是设置带边框的框吗 这个跟设置border 有什么关系?

css3——box-sizing属性

如何通过代码设置片段标签?

Border box-sizing resize

box-sizing: border-box;的作用

box-sizing属性