浅谈box-sizing,两种类型的盒子的区别

网页上显示如下

<style>
        div:nth-of-type(1) {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 10px solid #000;
            box-sizing: content-box;
            /* 默认为content-box */
        }

        div:nth-of-type(2) {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            padding: 10px;
            border: 10px solid #000;
            padding: 10px;
            border: 10px solid #000;
            box-sizing: border-box;
        }
    </style>


<body>
   <div>content-box</div>
    <div>border-box</div>
</body>

 

总结

1.content-box：默认的盒子类型，盒子的实际宽度为，设计宽度+左右padding+左右border;

2.border-box： 重置的盒子类型，盒子的世纪宽度为设计的宽度，包括左右padding+左右border;

版权声明：本文为weixin_42583802原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。