码迷,mamicode.com
首页 > 其他好文 > 详细

box-sizing设置

时间:2018-11-10 23:57:49      阅读:286      评论:0      收藏:0      [点我收藏+]

标签:abs   width   没有   red   pos   设置   定位   height   宽高   

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设置

标签:abs   width   没有   red   pos   设置   定位   height   宽高   

原文地址:https://www.cnblogs.com/bonly-ge/p/9940966.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!