（一）宽度自适应
1.若块级元素宽度不设置，或者设置成100%，都是占据其父级元素的一整行
应用场景:
（1）页面最外层的盒子一般都要占据屏幕的大小，所以宽度100%。
（2）子元素使用百分比表示盒模型任意部分大小的话，代表的是子元素盒模型任意部分尺寸=父元素宽度百分比（除了高度外，子元素高度=父元素高度百分比）==>忽略;
(二)高度自适应
1.父元素高度由子元素撑开
(1)若是子元素都浮动了，父元素不会被撑开
解决办法(清除浮动):
* 给父元素添加最后一个子元素(块级元素)
{ height:0;overflow:hidden;clear:both;}
缺点：造成不必要的浪费
* 给父元素添加{overflow:hidden;} 缺点:可能造成需要的部分被隐藏掉
* 伪元素清除法.
.clearfix::after{content:"";display:block;height:0;overflow:hidden;visibility:hidden;cl ear:both;zoom:1;} ==>base.css
(2)预防子元素会没有内容，撑不开父元素的情况
解决办法：给父元素添加最小高度min-height。
（当内容高度小于最小高度时，按最小高度显示。当内容高度大于最小高度时， 按内容高度显示）
兼容写法:{min-height:;_height:;}
2.高度自适应窗口高度
body,html{height:100%;}
最外层的大盒子{height:100%;}
1.浏览器及内核
ie trident
firefox gecko
opera presto
safari、chrome webkit
chrome、opera blink
2.浏览器兼容
（1）图片有边框(IE8以下) a>img img{border:0 none;}
（2）图片有间隙div>img img{display:block;}
（3）双倍浮向问题 浮向边的margin会双倍显示（ie6） ｛display:inline-block;｝
做页面避免设置左右的margin
（4）默认高度（16px、ie6） ｛font-size:0｝ {overflow:hidden;}
（5）表单元素行高不一致 ｛float｝ ｛vertical-align：middle;｝
（6）表单元素样式不一致 外层嵌套一个元素，将表单元素的样式赋给这个外层元素/a标签模拟
（7）百分比bug（ie6） 平时做页面不要做太满。
如果都左浮动，最后一个清除右浮动 clear:left
display:inline-block;===>float
（8）高度塌陷：子元素都浮动了，父元素会没有高度 解决办法：两种
1）给父元素加overflow：hidden;
2）万能清除法/伪类清除法
（9）margin塌陷：第一个子元素与父元素存在上间距，如果给第一个子元素加margin-top， 则会错误地渲染到父元素上。 解决办法：四种
（10）margin合并:垂直排列摆放，上一个元素的margin-bottom，跟下一个元素的margin-top， 会发生合并，取较大值
解决方法：给上边盒子添加空标签，并给空标签overflow：hidden;
（11）透明度
opacity：0-1；
filter:alpha(opacity=0-100) （ie）
（12）手型
cursor:hand; (ie)
cursor：pointer；