前端开发中padding与边框是否包含进height和width的情况

在网页排版时经常会遇到padding或边框有时会包含在height或width里有时又不包含的情况。那么什么时候会包含，什么时候又不包含呢？

首先，任何情况下margin都不包含在height和width内。而padding与边框是否包含则有两种情况。

第一种情况：

在标准盒子模型中

如图：325x146便是宽高，即内容框的宽高，并不包含padding和border。这是标准盒模型的情况，但还存在另一种ie盒子模型，ie盒子模型便是把padding与border包含在宽高内，即宽高包含了内容框的宽高加上padding与边框。一般情况下，ie浏览器会使用ie盒子模型，其它如ff、chrome则使用标准盒子模型。如果要统一使用标准盒子模型，我们可以在网页中加入doctype申明使用w3c标准，这样所有浏览器都会使用标准盒子模型。

第二种情况：

css3里有一个属性box-sizing=content-box|border-box|inherit;

来自http://www.w3school.com.cn的解释：

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

所以如果浏览器是ie8+ ff chrome等支持css3的浏览器，box-sizing属性也可以改变具体到某一个元素的padding与边框是否包含进宽高。