CSS中关于box-sizing你可能需要知道的小知识

天学习了box-sizing的相关知识，解决我心中一直的困扰，理解了这个属性是干什么的，有什么作用，下面我给大家分享一下我学习的一些心得，以及遇到的一些坑。

在CSS中，box-sizing属性定义了用户代理(浏览器)应该如何计算一个元素的总宽度和总高度。

通常情况下，在默认的CSS盒模型定义里，一个元素的宽（width）高（height）只会应用到当前元素的内容区里。如果这个元素有padding（内边距）或border（边框），那么这个盒子在显示的时候，宽高会加上内边距和边框的值。这就意味着我们在布局的时候，需要时刻主要到这个盒子的内边距和边框，尤其是在使用响应式布局的时候，这点非常烦人。因此，w3c给出了一个新属性，box-sizing，它可以被用来调整这些烦人的特点。

box-sizing有两个值：

content-box：默认值，元素的宽高只用到内容区，在该元素的宽高之外绘制内边距和边框。
尺寸计算公式：
width = 内容区的宽度
height = 内容区的高度
宽度和高度的结果值都不包含内边距（padding）和边框（border）
border-box： 元素的内边距和元素宽高都是包含在宽高内的。
尺寸计算公式：
width = 内容区的宽度 + padding + border
height = 内容区的高度 + padding +border

以下是根据box-sizing不同的值渲染出来的元素尺寸：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>box-sizing：不同值渲染的元素</title>
    <style>
        html {
            font-size: 10px;
        }

        div.box {
            width: 20em;
            height: 12em;
            padding: 2em;
            border: 5px solid red;
            background-color: violet;
        }

        .content-box {
            box-sizing: content-box;
            margin-bottom: 5em;
        }

        .border-box {
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box content-box"></div>
    <div class="box border-box"></div>
</body>
</html>

效果图：

从上图可以看出，content-box和border-box的总宽高的值是不一样的。当属性值为content-box时的总宽高：

width：200 + 20x2 + 5x2 = 250px
height: 120 + 20x2 + 5x2 = 170px

当属性值为border-box时的总宽高：

width：150 + 20x2 + 5x2 = 200px
height: 70 + 20x2 + 5x2 = 120px

这里有一点值得注意的是，我在写这个demo的时候为了方便区分两个盒模型，我在第一个box上加了一个margin-bottom，但是我发现这个margin-bottom貌似并不影响这个宽高的结果，不论box-sizing的值是哪个。后来我在MDN上得到了结果，确定了我的猜想是正确的。

最后需要注意的是，这个属性是CSS3的属性，并且这个属性是可以从父元素继承的。以后推荐大家使用box-sizing:border-box，可以写成：

* { box-sizing: border-box; }

这样处理元素大小就方便的多了。

以上就是我学习这个属性的心得，欢迎各路大神指正，有兴趣的小伙伴欢迎大家一起交流。

SS3的样式

语法：box-sizing: content-box | border-box | inherit;

content-box：表示浏览器绘制元素的时候宽和高只是内容的宽和高，不包含元素的padding和border大小，元素的实际高度还要加上padding和border设定的值

border-box：表示浏览器绘制元素的时候，实际宽度和高度的实际值为border值+padding值+内容的宽度/高度

inherit：从父窗口继承box-sizing属性

扩展

-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */

一般为了进行流布局好进行控制都会把元素的box-sizing设置为 border-box

前在学习html的时候，总是看见其他网站在根元素上加一个box-sizing: border-box，一直没有搞明白这个属性具体是干什么的，这两天在学习的时候遇到了关于内边距和边框的尺寸，以及一个元素的宽高的问题才明白这个属性到底是什么意思，以及怎么用的。

一般情况下，CSS盒模型的默认定义中，一个元素的宽(width)和高(height)只会在当前的元素内容区里起作用，但是，如果给这个元素加上一些样式，比如：内边距(padding)和边框(border)，那这个元素在显示时会加上内边距和边框的值的总和才是当前元素的总宽高，这个可以用一个Demo测试一下，很明显就可以看出来了。

现在给出如下的盒模型，以及样式：

html结构：

<div class="box content-box"></div>

css样式：

html {
  font-size: 10px;
}
div.box {
  width: 20em;
  height: 12em;
  padding: 2em;
  border: 5px solid red;
  background-color: violet;
}

效果图：

content-box

从上面给出的css样式中我们不难看出，给出的盒模型宽高分别为20em和12em，换算成像素，也就是一个200x120px的盒模型。但是从查看浏览器的查看元素里我们却发现，这个盒模型，并不是200x120px的，而是变成了250x170px，很明显这是加上了padding和border的尺寸：

padding值总和：2em x 2 x 10 = 40px；
border值总和：5px x 2 = 10px；

从上面换算后的尺寸可以得到padding和border的总和为：50px，加上content-box的元素内容区宽度200px，总宽就是250px，总高度就是170px。

这个结论意味着，我们在使用进行页面布局的时候，时刻需要注意内边距和边框的值，尤其是在响应式布局的场景下甚为烦人，W3C给我们了一个属性——box-sizing，使用这个属性可以很好的解决这个总宽高的问题。

box-sizing有两个属性值：

content-box，这个也是默认值，意思是当前元素的宽高值只会加到当前的内容区，并不会包含内边距(padding)和边框(border)的值。这也就是很好的解释了上述案例中为什么整个盒子的宽高变成了250x170px了。
计算公式：
宽度（width） = 内容区宽度
高度（height） = 内容区高度

border-box，当前盒子的宽高包含了内边距(padding)和边框(border)的值。
计算公式：
宽度（width） = 内容区宽度 + 内边距 + 边框
高度（height） = 内容区高度 + 内边距 + 边框

下面是我在学习这两个属性时测试的案例：

html结构：

<div class="box content-box"></div>
<div class="box border-box"></div>

css样式：

<style>
  html {
    font-size: 10px;
  }
  div.box {
    width: 20em;
    height: 12em;
    padding: 2em;
    border: 5px solid red;
    background-color: violet;
  }
  .content-box {
    box-sizing: content-box;
    margin-bottom: 5em;
  }
  .border-box {
    box-sizing: border-box;
  }
</style>

效果图：

box-sizing

从上述案例很明显可以看出来content-box和border-box的区别：

当属性值为content-box时，总宽高为：
width = 200px + 20 x 2 + 5 x 2 = 250px；
height = 120px + 20x2 + 5x2 = 170px。
当属性值为border-box时，总宽高为：
width：150px + 20x2 + 5x2 = 200px
height: 70px + 20x2 + 5x2 = 120px

这里有个值得注意的坑，那就是margin-bottom，并不影响盒模型的总宽高，无论box-sizing是哪个值，这个结论可以在MDN上查到的。

以上就是我在学习盒模型的属性box-sizing时的心得总结，希望能对大家有用，由于本人才疏学浅，如果文中有不正确的地方，恳请请各位大佬批评指正，谢谢大家！

在线咨询

上一篇：web前端基础之HTML知识总结，了解后轻松做网页
下一篇：css3随手写个底部导航栏效果，P8大佬恐怖如斯

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS中关于box-sizing你可能需要知道的小知识

SS3的样式

扩展

您的项目需求