css hack! (max-width,min-width以及高度自适应)

先来看下什么是css hack?!

针对不同的浏览器写不同的CSS code的过程，就叫CSS hack!

IE6能识别下划线"_"和星号" * "

IE7能识别星号" * "，但不能识别下划线"_"

而firefox两个都不能认识

ff, ie7以上能识别 !important,  !important是优先级

总结：*开头的css属性能被ie6和ie7识别；_开头的css属性只能被ie6识别；前面两个高版本浏览器都不识别；ff，ie7，chrome以上能识别 !important,  !important表示优先级高

早上一直纠结在min-height:200px !important和height:auto !important之间

想说我设置了 !important，那么应该是min-height:200px先生效。我简直就是猪头了。!important是针对相同的属性才生效，并且是ff，ie7，google以上才生效。比如在height:200px; height:auto !important才会按照height:auto !important优先生效。

我们看下高度自适应的一个例子

背景一直铺满div，如果不高度自适应会导致背景铺不满！
左右两边是对比，左边代码是兼容所有浏览器，右边在ff、google等浏览器不兼容，ie6下即使不指定高度，也会根据内容自动铺满！
height:auto默认属性，所有浏览器都支持，高度自适应

左侧，左侧，左侧，左侧，左侧，左侧，左侧，左侧，有质量的学习型源代码资料站。



左侧，左侧，左侧，左侧，左侧，左侧，左侧，左侧，有质量的学习型源代码资料站。
fsdfdsfsfd

右侧，右侧，右侧，右侧，右侧，右侧，右侧，右侧，有质量的学习型源代码资料站。



右侧，右侧，右侧，右侧，右侧，右侧，右侧，右侧，有质量的学习型源代码资料站。

在看下手机屏幕图片100%自适应的例子

img{width:100%;max-width:100%}

比如在布局是最大640px的屏幕里头的图片（比如宽度是480px的要做到任何手机屏幕铺满）

就要按照img{width:100%;max-width:100%}

会保证，如果屏幕大于480的，会按照100%显示；如果屏幕小于480的，会按照最大100%显示。