浏览器兼容性 iframe框架 还有边距塌陷问题

浏览器兼容性
1.页面会默认给所有标签保存空隙，解决方法
*{margin:0px;padding:0px}
2.块级元素水平居中
div{width:1000px;margin:0px auto}
3.给文字和图片设置水平居中
div{text-align:center}
4.块级元素水平垂直居中
.box{width:200px;height:200px;position:absolute;left:50%;top:50%;
margin-left:-100px;margin-top:-100px;}
5.清除浮动的方法：
1.div{overflow:hidden}
2.div:after{content:"";display:block;clear:both}
6.定位保证不串行
相对定位，嵌套绝对定位，除非此元素要参照浏览器
7.伪类事件的写作顺序
hover必须在link之后，active必须在hover之后
8.不要删除，否则会变成IE低版本模式
9.如果要兼容IE8以下浏览器，不要写html5和css3
10.如果高版本浏览器要设置css3属性兼容，要加浏览器前缀
列如：-webkit-flex：1；
11.div嵌套img，会在底部有空隙，解决方法
img{vertical-align:top;}
12.去掉多张图片同行的空隙
img{float:left}
13.谍影重重：当浮动元素中间出现空文本，空标签或者注释，会占空格面积，造成元素串行，
解决方法：
1.注释不添加到标签中间
2.把宽度值相应变小
3.不设置浮动，列如：定位，流动布局，转化表格法
14.边距塌陷：产生在嵌套元素中，垂直方向上边距会出现合并现象，解决：
1.给父类标签添加内边距
2.给父类添加border
3.给父类添加overflow：hideen
IE低版本浏览器兼容性
兼容性选择符
添加在属性上的
_width 让属性兼容IE6以下
*width让属性兼容IE7以下
>width让属性兼容IE7以下
添加在属性值上的
width：400px/0；让属性兼容IE8以上
width：400px/9；让属性兼容IE5以上
添加在选择器上的
*body .box{}兼容IE7以下
*+body .box{}兼容IE7以上
语法与规则
提高属性优先级
background-color：silver！important；兼容IE7以上
注意：必须写在重复属性之前
标签的选择条件
< !–[if IE 7]>
< h1>看看文字什么时候显示< /h1>
< ![endif]–>
比较运算符
lt小于 lte小于等于 gt大于 gte大于等于 ！不等于
< !–[if gte IE 8]>
< h1>看看文字什么时候显示< /h1>
< ![ endif]–>
多条件判断
&并且 |或者
< !–[if （gte IE 7）&（lte IE 8）]>
< h1>看看文字什么时候显示< /h1>
< ![endif]–>
iframe框架
< iframe src=""width=“100%” height=“400px”
frameborder=“0” scrolling=“no” marginwidth=“300px” marginheight=“300px”>< /iframe>
width宽度 height 高度 src路径 frameborder 边框 scrolling是否显示滚动条
marginwidth 框架里面页面的左边距 marginheight框架里面页面的上边距
box-sizing设置或检索对象的盒模型组成模式
content-box显示成填充+边框+边距 border-box显示成填充+边框