### 概念 盒子模型是css最核心的内容了,理解盒子模型可以更好的对页面进行排版布局. 盒子模型又称框模型(Box Model),它是由四要素组成,分别是: * 元素内容(content) * 内边距(padding) * 边框(border) * 外边距(margin)-透明 ```js //外盒尺寸计算（元素空间尺寸) Element空间高度 = content height + padding + border + margin Element 空间宽度 = content width + padding + border + margin //内盒尺寸计算（元素大小） Element Height = content height + padding + border （Height为内容高度） Element Width = content width + padding + border ``` 一个标准的盒子模型的示意图:  下面我们用一组代码来演示不同的情况,如下图的盒模型:  关于元素宽度获取的几种方式,及不同点: * `clientWidth`:包括元素宽度和padding,不含border的宽度值 * `offsetWidth`: dom元素实际宽度包括border和padding * `scrollWidth`:对于无滚动元素来讲,同clientWidth,但如果内容出现滚动条,则包括滚动的宽度,也就是说scrollWidth的最小值是clientWidth,其中随内容的宽度而变 * `$element.width()`:jquery元素的宽度,单指元素的宽度 > [代码](http://jsrun.net/StYKp) ### 盒模型的叠加 两个上下相邻的盒模型,它们的外边距即彼此的`margin-bottom`和`margin-top`会合并,合并准则以外边距值较大的为彼此的实际外间距. 但是上述只针对在普通文档流中的垂直块元素,而行内元素,浮动框或者是绝对定位的元素,它们的外边距不会发生合并. > [举个栗子](http://jsrun.net/knYKp) ### 不得不说IE的怪异盒模型  ```js /*外盒尺寸计算（元素空间尺寸）*/ Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度) /*内盒尺寸计算（元素大小）*/ Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度) ``` **what?** 乍一看跟标准盒模型好像没区别.但是仔细看,结合上图,怪异盒模型元素的宽度就包含了元素内容,border和padding的宽度.还不明白? ```css .box{ width:200px; height:300px; background:#bc223d; text-align:center; color:#fff; margin:20px; padding:20px; border:3px solid #aaabbb; overflow-x:auto; box-sizing:border-box;//可讲盒模型修改为怪异模型 } ``` ```js //怪异模型下元素宽度包括了内容的宽度,padding的宽度和border的宽度 $('.box').width();//=200-20*2-3*2=154px ``` > [代码](http://jsrun.net/fnYKp) ### box-sizing 理解并掌握上述的两种盒模型,那么`box-sizing`这个属性相对来说更好理清了,它很好的实现了这两种模型间的互相切换,`box-sizing`有如下的属性: * `content-box`: 让元素维持标准盒模型,即:`Element Width/Height = border+padding+content width/height` * `border-box`: 让元素的宽度/高度等于元素内容的宽度/高度,换言之:此处的内容宽度/高度=width/height-border-padding; * `inherit`:继承父元素`box-sizing`的属性值 继续上代码,直观展现下这两种模型: > [点击看代码](http://jsrun.net/vnYKp) #### 浏览器兼容性 现代浏览器基本支持,IE8及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀`-moz-`，对于低版本的IOS和Android浏览器也需要加上`-webkit-` `boxder-box`更直接,更利于开发,所以有了如下的代码: ```css *, *:before, *:after { 　　-moz-box-sizing: border-box; 　　-webkit-box-sizing: border-box; 　　box-sizing: border-box; } ``` ### 盒模型的应用,画三角 ```css .triangle { width:0; height:0; border:100px solid transparent; border-top:100px solid #bc223d; } ``` > [代码](http://jsrun.net/anYKp) > <p class="over">Over！</p>