CSS3干货21:box-sizing

开学了好忙,都没时间整理自己的东西。

眼看月底了。发点自己的课堂笔记充个数~

总所周知,盒子模型标准属性都要占位。也就是 padding、border、margin 会改变标签的实际所占的宽、高。

即,标签的实际宽高应该是:

width / height  + padding + border + margin 

如:

.box{
    width: 200px;
    height: 200px;
    background: #f00;
    padding:30px;
    border:5px #000 dotted ;
    margin-left:40px;
}

代码中的 .box 实际宽度为:310px。

 width + padding-left和right +  border-left和right + margin-left 
 200 +   30*2  +  5*2 + 40  = 310

可以设置标签的 box-sizing(盒子尺寸属性) 改变这个设定。

box-sizing : content-box  |  border-box ;
描述
content-box默认值。在 width 和 height 之外绘制元素的 padding 和 border。 即,padding 和 border 不占用 width、height 的值。
border-box为元素设定的 width 和 height 决定了标签的边界。 即,padding 和 border 共用 width、height 的值。
.box{
    width: 200px;
    height: 200px;
    background: #f00;
    padding:30px;
    border:5px #000 dotted ;
    margin-left:40px;
    
    box-sizing: border-box;
}

 代码中的 .box 实际宽度为:240px。 padding 和 border 的值包含在了 width 的 200px 里。

 width + margin-left 
 200 +  40  = 240

box-sizing 的值无论是 content-box 还是 border-box,项目中的所有标签都应该统一标准。

*{
     border-sizing: border-box;
}

以上这个代码,在同一个项目中,要么写,要么就不写。

部分主流框架或网站很喜欢写这个。比如, bootstrap,CSDN。

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页