box-sizing详解 - 爱码网

刚刚实习回来好久都没有更新博文了，今天在复习html和css时遇到box-sizing，我记得上次面试的时候面试官就问过box-sizing的属性值及使用场景，当时回答的不是很好。今天我特意看了几篇文章，就此做一个总结。
首先复习一下盒子模型：
在写html与css的过程中，我们可以将每一个元素看做一个盒子，对于普通的浏览器以及IE浏览器，有两套不同的解析盒子的方法，第一种是W3C标准盒子模型，第二种是IE盒子模型。

w3c标准盒子模型
w3c盒子width = contentWidth
box-sizing详解
IE盒子模型
IE盒子 width= contentWidth+2padding+2border

这两个模型的唯一区别是计算width和height时，IE盒子模型包含padding和border, W3C盒子模型则不包括。
为了使页面在不同浏览器下呈现相同的效果，必须统一盒子模型，因为设置width或者height一般是必须用到的。所以在css3引入了box-sizing属性：

box-sizing属性主要用来控制元素的盒模型的解析模式，其有3个属性值。
content-box（默认值）：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高；
border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content；
inherit：规定元素是从父元素那里继承box-sizing的属性值。

来看个demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box-sizing使用场景分析</title>
    <style>

        .layout {
            padding: 20px;
            width: 200px;
            height: 200px;
            border: 2px solid chartreuse;
        }
        .use-box-sizing {
            background: greenyellow;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            
            margin-bottom: 5px;
        }
        .no-use-box-sizing {
            background: blueviolet;
        }
    </style>
</head>
<body>
<div class="layout use-box-sizing">使用box-sizing</div>
<div class="layout no-use-box-sizing">不使用box-sizing</div>
</body>
</html>

效果图如下：
box-sizing详解