本文主要是介绍宽高自适应以及常见浏览器兼容，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
（一）宽度自适应
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:leftdisplay: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；这篇关于宽高自适应以及常见浏览器兼容的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
