您的位置：首页 > Web前端 > CSS

CSS盒子模型以及CSS3中的box-sizing

2017-03-12 14:47 676 查看

css中的盒模型一般分为标准W3C盒模型和IE盒模型。

css盒模型定义

css盒模型(Box Model)规定了元素框处理元素内容、内边距、边框、和外边距的方式。

下图说明了盒子模型

元素框的最内部分是实际的内容（content），直接包围内容的是内边距（padding），内边距呈现了元素的背景。内边距的边缘是边框（border），边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其后的任何元素。

注意：背景应用于由内容和内边距、边框组成的区域。

那我们分别来看一下标准的盒模型以及IE盒模型

标准盒模型

在标准盒模型中，width 和 height 指的是内容区域的宽度和高度。

IE盒模型

IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的width包含了 content 、border 和 pading。即浏览器的width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

来个例子：一个div盒子

div{
width: 100px;
height: 150px;
padding: 10px;
border: 1px solid red;
margin: 20px;
background-color: pink;
}

盒模型的计算方式：

盒模型占的位置大小

盒子所占宽度为：内容的宽度+内边距（左、右边距）+边框（左、右边框）+外边距（左、右外边距）

盒子所占高度为：内容的高度+内边距（上、下边距）+边框（上、下边框）+外边距（上、下外边距）

如果用w3c盒子模型解释，那么这个盒子占用的

占有的宽度为 100 + 10 * 2 + 1 * 2 + 20 * 2 = 162px

占有的高度为 150 + 10 * 2 + 1 * 2 + 20 * 2 = 212px

这里我要说明一点，这个盒子实际的大小：

盒子实际宽度为：内容的宽度+内边距（左、右边距）+边框（左、右边框）

盒子实际高度为：内容的高度+内边距（上、下边距）+边框（上、下边框）

实际宽度：100 + 10 * 2 + 1 * 2 = 122px

实际高度：150 + 10 * 2 + 1 * 2 = 172px

用ie的盒子模型解释，这个盒子占用的

盒子占有的宽度为 width+margin

占有的高度为 height+margin

占有的宽度为 100 + 20 * 2 = 140px

占有的高度为 150 + 20 * 2 = 190px

重点：

这个盒子实际的大小为：宽度100px 高度150px

我们一般理解的是标准下的盒子模型。

注意：

宽度和真实占有宽度，不是一个概念！！

在标准模式下，改变外边距、内边距和边框的大小，仅仅导致盒子模型占有的宽度和高度发生改变，并不会影响内容区域的高度和宽度。

如果我将div的width、height保持不变，padding、border改变，如下：

div{
width: 100px;
height: 150px;
padding: 15px;
border: 1px solid red;
margin: 20px;
background-color: pink;
}

在标准盒模型中，

内容区域的宽度仍为100px，高度仍为150px。但是盒子模型占有的宽度、高度分别为：

div盒子的宽度100 + 15 * 2 + 1 * 2 + 20 * 2 = 172px

div盒子的高度150 + 15 * 2 + 1 * 2 + 20 * 2 = 222px

这个盒子实际的大小为

宽度：100 + 10 * 2 + 1 * 2 = 122px

高度：150 + 10 * 2 + 1 * 2 = 172px

我们会发现盒子变大了。

IE盒模型中，盒子的实际宽度仍为100px 高度仍为150px。

我们要知道：

IE盒模型下，一旦设置了width和height，无论改变padding和border为多少，只要在总宽度和高度的承受范围内，都不会改变整体的大小，当然太大了会溢出。而在标准盒模型中，改变padding和border都会使整个box的宽高改变。

如果我们想动态改变border的大小，但是又不想让box的大小发生改变，该如何去做呢？

CSS3有一个非常有用的属性：

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

CSS3中的box-sizing

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

content-box:这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

Border-box:为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit规定应从父元素继承 box-sizing 属性的值。

**简单理解为content-box 为外加模式，用户设置的宽度和高度是相对稳定的，增加border、padding会使整个盒子变大。

border-box：为内减模式，盒子的实际宽度和高度是固定不变的，用户已经设置好的width和height。增加border和padding的值，不会改变盒子的大小，只改变内容区域的大小。

Border-box 改变border padding不会影响到其他的盒子，在移动端用的比较多。**

看例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
margin: 20px;
background-color: pink;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

看到了吧，我给3个div设置了统一的样式，结果如下：

我给.div2,.div3增加样式，会发生如下改变

.div2,.div3{
border: 25px solid red;
padding: 20px;
}

再来，

.div2{
box-sizing: border-box;
}
.div3{
box-sizing: content-box;
}

以上是个人的见解，有不对的地方还请大家多多指教！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3 box-sizing 盒子模型

相关文章推荐

新的分享

章节导航