宽高自适应 & 浏览器兼容

宽度自适应

1. 若块级元素宽度不设置，或者设置成100%，都是占据其父级元素的一整行
   应用场景:
   （1）页面最外层的盒子一般都要占据屏幕的大小，所以宽度100%。
   （2）子元素使用百分比表示盒模型任意部分大小的话，代表的是子元素盒模型任意部分尺寸=父元素宽度百分比（除了高度外，子元素高度=父元素高度百分比）==>忽略;

高度自适应

1. 父元素高度由子元素撑开
   (1) 若是子元素都浮动了，父元素不会被撑开
     解决办法(清除浮动):
      a) 给父元素添加最后一个子元素(块级元素)
       { height:0; overflow:hidden; clear:both;}
       缺点：造成不必要的浪费
      b) 给父元素添加{overflow:hidden;} 缺点:可能造成需要的部分被隐藏掉
      c) 伪元素清除法

.clearfix::after{
	content:""; 
	display:block;
	height:0;
	overflow:hidden;
	visibility:hidden;
	clear:both;
	zoom:1;
}  

   (2) 预防子元素会没有内容，撑不开父元素的情况
     解决办法：给父元素添加最小高度min-height
     (当内容高度小于最小高度时，按最小高度显示。当内容高度大于最小高度时，按内容高度显示)
      兼容写法：{min-height:;_height:;}

2. 高度自适应窗口高度
   body,html{ height:100%; }
   最外层的大盒子{ height:100%; }

浏览器及内核

浏览器代表作	浏览器内核
ie	Trident
firefox	Gecko
opera	Presto
chrome	Webkit
chrome、opera	Blink

浏览器兼容

Bug	解决方法
图片有边框Bug(IE8以下)	给图片添加border: 0
图片有间隙div>img	将div的字体大小设成0 或者 img{display:block;}
双倍浮向问题 浮向边的margin会双倍显示(ie6)	给浮动元素添加{display:inline;}
默认高度(16px、ie6)	给元素添加声明{font-size:0} 或者 {overflow:hidden;}
表单元素行高对齐不一致	给元素添加声明{vertical-align：middle;}
按钮元素默认大小不一致	input外边套一个标签，在这个标签里写input的样式，把input的边框去掉，默认padding也要去掉display: block 或者 用a标签模拟
百分比bug(ie6)	给右边的浮动添加声明clear: right清除右浮动；clear:left清除左浮动
ie手型兼容	ie浏览器cursor : hand; 常规浏览器cursor：pointer；
透明度ie兼容	filter : alpha(opacity=0-100)
margin合并	给上边盒子添加空标签，并给空标签overflow：hidden;
margin塌陷	为父元素添加overflow：hidden;
高度塌陷	给父元素加overflow：hidden; 或者万能清除法 / 伪类清除法