正常情况下width作用在盒模型中的四个盒子中的content盒子上，box-sizing的作用就是可以把width作用的盒子变成其他的几个盒子上，有以下几种写法
.box1 { box-sizing: content-box; } /* 默认值 */ .box2 { box-sizing: padding-box; } /* Firefox 曾经支持 */ .box3 { box-sizing: border-box; } /* 全线支持 */ .box4 { box-sizing: margin-box; } /* 从未支持过 */拿 .box3 { box-sizing: border-box; }来说，就是把原来的宽度作用对象从content-box转到了border-box
.box { width: 100px; box-sizing: border-box; } 此时这个盒子的宽度是100px .box { width: 100px; box-sizing: border-box; border: 1px solid; } 这事的宽度还是100px 2.6 height: auto 和 height: 100%宽度稀缺，高度无限，所以在css中高度较宽度更简单纯洁
height: auto
所有的元素盒子在页面中表现的每个有多高，加在一起，就是最终的高度值
height: 100%
height 和 width 还有一个比较明显的区别就是对百分比单位的支持。对于 width 属性，就算父元素 width 为 auto，其百分比值也是支持的，但是对于 height 属性，如果父元素height 为 auto，只要子元素在文档流中，其百分比值完全就被忽略了。
对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值。
为何父级没有具体高度值的时候，height:100%会无效？
如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto。一句话总结就是：因为解释成了 auto。要知道，auto 和百分比计算，肯定是算
不了的。
如何让元素支持 height:100%效果
设定显式的高度值。这个没什么好说的，例如，设置 height:600px，或者可以生效的百分比值高度。
html, body { height: 100%; }
使用绝对定位。
div { height: 100%; position: absolute; }此时的 height:100%就会有计算值，即使祖先元素的 height 计算为 auto 也是如此。
绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的:
绝对定位的宽高百分比计算是相对于 padding box 的
非绝对定位元素则是相对于 content box 计算的
3. min-width/max-width和min-height/max-height 3.1为流体而生的 min-width/max-width网页宽度在 1200～1400 像素自适应，既满足大屏的大气，又满足笔记本的良好显示
.container { min-width: 1200px; max-width: 1400px; }无须 width 设置，直接使用 min-width/max-width
再比如一个图片的盒子宽度已定：
img { max-width: 100%; height: auto!important; }height:auto 是必需的，否则，如果原始图片有设定 height，max-width 生效的时候，图片就会被水平压缩。强制 height 为 auto 可以确保宽度不超出的同时使图片保持原来的比例。但这样也会有体验上的问题，那就是在加载时图片占据高度会从 0 变成计算高度，图文会有明显的瀑布式下落。
3.2 与众不同的初始值width/height 的默认值是 auto，而 min-width/max-width 和 min-heigh/max-height 的初始值则要复杂些
max-width 和 max-height 的初始值是 none
min-width 和 min-height 的初始值是 auto
3.3 超越!important，超越最大超越!important
min-width/max-width 和 min-height/max-height 属性间，以及与width 和 height 之间有一套相互覆盖的规则。这套规则用一句比较通俗的话概括就是:超越!important，超越最大。
<img src="http://www.likecs.com/1.jpg"> img { max-width: 256px; }以上代码作用后，img的宽度为 max-width的宽度 -- 256px，style、!important 通通靠边站！因为 max-width 会覆盖 width。
超越最大
.container { min-width: 1400px; max-width: 1200px; }最小宽度居然比最大宽度设置得还大, 最后谁会生效？
遵循“超越最大”规则（注意不是“后来居上”规则），min-width 活下来，max-width 被忽略，于是，.container 元素表现为至少 1400 像素宽
3.4 任意高度元素的展开收起动画技术“展开收起”效果是网页中比较常见的一种交互形式，通常的做法是控制 display 属性值在 none 和其他值之间切换
传统实现可以使用 jQuery 的 slideUp()/slideDown()方法
第一反应就是使用 height + overflow:hidden 实现。但是，很多时候，我们展开的元素内容是动态的，换句话说高度是不固定的，因此，height 使用的值是默认的 auto
因此，下面代码呈现的效果也是生硬地展开和收起：
.element { height: 0; overflow: hidden; transition: height .25s; } .element.active { height: auto; /* 没有 transition 效果，只是生硬地展开 */ }auto 是个关键字值，并非数值，正如 height:100%的 100%无法和 auto 相计算一样，从 0px 到 auto 也是无法计算的，因此无法形成过渡或动画效果。