html定义盒子范围,CSS盒子模型以及CSS3中的box-sizing

css中的盒模型通常分为标准W3C盒模型和IE盒模型。css

css盒模型定义

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

下图说明了盒子模型

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

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

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

标准盒模型

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

IE盒模型

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

来个例子：一个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 = 212pxsvg

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

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

盒子实际高度为：内容的高度+内边距(上、下边距)+边框(上、下边框)spa

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

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

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

盒子占有的宽度为 width+margin

占有的高度为 height+margincode

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

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

重点：

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

咱们通常理解的是标准下的盒子模型。

注意：

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

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

若是我将div的width、height保持不变，padding、border改变，以下：xml

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不会影响到其余的盒子，在移动端用的比较多。**

看例子：

margin:0;

padding:0;

}

div{

width:100px;

height:100px;

margin:20px;

background-color:pink;

}

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

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

.div2,.div3{

border:25px solid red;

padding:20px;

}

再来，

.div2{

box-sizing:border-box;

}

.div3{

box-sizing:content-box;

}

以上是我的的看法，有不对的地方还请你们多多指教！