box-size

最新推荐文章于 2022-11-20 11:10:25 发布

转载最新推荐文章于 2022-11-20 11:10:25 发布 · 87 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/binlucky/p/5424275.html

本文通过具体的示例对比了不同 box sizing 属性值在浏览器中的表现差异，特别是在 Firefox 和 Chrome 中的效果。主要介绍了 padding-box 和 border-box 的使用场景及它们如何影响元素的实际大小。

<style>
*{ margin:0; padding:0; list-style:none; font-family:"\5FAE\8F6F\96C5\9ED1";}
.content_box{
    box-sizing:content-box;
    -webkit-box-sizing:content-box;
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 5px solid #E6A43F;
    background: blue;
}
.padding_box{
  box-sizing:padding-box;
        -webkit-box-sizing:padding-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #186645;
        background: red; 
}
.border_box{
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 5px solid #E6A43F;
    background: green;
}
</style>

火狐下的效果↓