css盒子模型

WEB前端 waitig 466℃ 百度已收录 0评论

1、IE怪异盒子模型

块的宽度=width(已包含padding和border)+margin;
当padding和border宽度>设置的width
块的宽度=padding+border+margin;

2、标准盒子模型

块的宽度=width+padding+border+margin;

3、box-sizing

怪异和标准盒子模型可以通过box-sizing属性切换;
标准盒子模型:box-sizing:content-box;
怪异盒子模型:box-sizing:border-box;

4、兼容写法

box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

5、使用场景(border-box替换calc)

<div style="float:left;background-color: black;width: 200px;height: 200px;padding:10px;">
    <div style="width:calc(100% - 20px);height: 30%;padding:0 10px;background-color: whitesmoke;float:left;">
    </div>
</div>

可以替换为

<div style="float:left;background-color: black;width: 200px;height: 200px;padding:10px;">
    <div style="width:100%;box-sizing:border-box;height: 30%;padding:0 10px;background-color: whitesmoke;float:left;">
    </div>
</div>

本文由【waitig】发表在等英博客
本文固定链接:css盒子模型
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)