CSS属性参考 | box-sizing

05-18 次

标签 css教程 css属性盒模型

CSS box-sizing 属性用来改变默认的CSS盒模型对元素宽度和高度的计算方式。

在CSS中，每一个元素都有一个盒模型。盒模型包括4个区域：content box（内容区域）、padding box（内边距区域）、border box（边框区域）和 margin box（外边距区域）。

CSS盒模型示意图

默认情况下，当一个元素的尺寸被设定之后，width和height属性就决定了这个元素的content box（内容区域）的宽度和高度。如果为这个元素设置了padding属性，元素的总宽度或高度就会被增大。这就是默认的CSS盒模型的工作方式，这种盒模型使用的是content box。

如果你使用默认的CSS盒模型来设置元素的样式，如果你要精确的设置一个元素的宽度和高度，就需要非常的小心，你要综合计算内边距和边框宽度的值之后，才可能得到正确的width和height属性的值。

例如，如果要将一个元素的宽度和高度设置为400像素和300像素。代码如下：

.element {
    width: 400px;
    height: 300px;
}

为了美观，通常我们会为元素设置一些内边距，代码如下：

.element {
    width: 400px;
    height: 300px;
    padding: 25px;
}

由于在默认的CSS盒模型中，为元素添加内边距会增加元素的宽度或高度，所以上面的代码实际上元素的尺寸已经由400 x 300像素变为450 x 350像素。

如果你还需要为元素设置一个边框效果，代码如下：

.element {
    width: 400px;
    height: 300px;
    padding: 25px;
    border: 5px solid #ff0;
}

边框同样会增加元素的宽度和高度，所以此时元素的总尺寸为460 x 360像素。

默认的CSS盒模型的工作方式

CSS 的box-sizing 属性可以让我们决定使用哪种方式来计算元素的尺寸。

通过box-sizing 属性，你可以告诉浏览器将内边距的宽度或边框的宽度计算在元素的宽度之内，而不是增加元素的宽度。以上面的例子为例，如果我们将默认的盒模型content-box修改为padding-box，那么此时元素的总尺寸为410 x 310像素，内边距(padding)被计算在内容区域中，只有边框区域会增加元素的尺寸，如下图：

CSS padding-box盒模型的工作方式

我们还可以将box-sizing 属性的值设置为border-box，这种情况下，为元素指定的宽度和高度值就包含了内边距和边框。就上面的例子来说，不论你设置了多大的padding值或边框宽度，元素的总尺寸就是400 x 300像素，内边距和边框的宽度都包括在里面。如下图：

CSS border-box盒模型的工作方式

通常情况下，为了避免设置元素的宽度和高度不符合我们本意的情况的出现，我们都会将CSS的盒模型重置为border-box，你经常会在一些CSS Reset代码中看到如下的代码：

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

官方语法

box-sizing: content-box | padding-box | border-box | inherit

参数：

content-box：标准（默认）盒模型。指定的width和height属性（或者各自的min-width、min-height、max-width和max-height属性）只包括内容区域的宽度和高度。不包括边框（border），内边距（padding），外边距（margin）。也就是说，内边距, 边框和外边距都在这个盒子的外部。

尺寸计算公式：width = 内容的宽度，height = 内容的高度。宽度和高度都不包含内容的边框（border）和内边距（padding）。
padding-box：指定的width和height属性（或者各自的min-width、min-height、max-width和max-height属性）包括内容区域和padding区域。也就是说，指定的任何padding都包含在宽度和高度中，但是边框不会包含在内。如果指定的padding太大，内容区域的尺寸会被置为0。

尺寸计算公式：width = padding + 内容的宽度，height = padding + 内容的高度。
border-box：指定的width和height属性（或者各自的min-width、min-height、max-width和max-height属性）包括内容区域、padding区域和边框。也就是说，为元素的指定的任何padding和border尺寸都包含在宽度和高度中。如果指定的padding太大，内容区域的尺寸会被置为0。

尺寸计算公式：width = border + padding + 内容的宽度，height = border + padding + 内容的高度。

box-sizing属性的初始值为content-box。

应用范围

box-sizing属性可以在任何可以设置width和height属性的元素上使用。

示例代码

/* 支持 Firefox, Chrome, Safari, Opera, IE8+ 和老的Android浏览器 */
.example {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}

/* 通用写法 */
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}