box-sizing的差别对待

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 “border-box”。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

box-sizing的值：

content-box，这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box，为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit，规定应从父元素继承 box-sizing 属性的值。

大家一定要注意的是：对于div来说，box-sizing的值默认为content-box；对于button来说，box-sizing的值默认为border-box。

接下来上代码：
1. content-box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        .div1 {
        width: 100px;
        height: 100px;
        background: #f00;
        border: #000 solid 1px;
        }
    </style>
</head>
<body>
    <div class="div1">你好</div>
</body>
</html>

对于div来说，box-sizing的默认值是content-box，所以div1类设置的width和height应用到div的内容框，如下图所示：

这里写图片描述

这里的内容框宽度为100，高度为100，和div1类设置的值相等。

2. border-box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        .btn {
            width: 100px;
            height: 100px;
            background: #f00;
            border: #000 solid 1px;
        }
    </style>
</head>
<body>
    <button class="btn">你好</button>
</body>
</html>

对于button来说，box-sizing的默认值为border-box，所以btn类设置的width和height决定了元素的边框盒，如下图所示：

这里写图片描述

这里的边框盒总共为100，实际内容框只有98。

还有一点需要特别注意，当没有用通用选择符将所有元素的padding的值设置为0px时，box-sizing值为border-box的元素的padding-left和padding-right默认值为8px。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .btn {
            width: 100px;
            height: 100px;
            background: #f00;
            border: #000 solid 1px;
        }
    </style>
</head>
<body>
    <button class="btn">你好</button>
</body>
</html>

可以发现，这和之前的代码相比，缺少了通用选择符设置的padding和margin值，此时，div元素的padding-left和padding-right值为8px，而padding-top和padding-bottom值还是为0。如下图所示：

这里写图片描述

box-sizing的差别对待

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

猜你喜欢