2023年6月21日发(作者：)

浏览器兼容性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.清除浮动的⽅法：{overflow:hidden}:after{content:"";display:block;clear:both}6.定位保证不串⾏相对定位，嵌套绝对定位，除⾮此元素要参照浏览器7.伪类事件的写作顺序hover必须在link之后，active必须在hover之后8.不要删除，否则会变成IE低版本模式9.如果要兼容IE8以下浏览器，不要写html5和css310.如果⾼版本浏览器要设置css3属性兼容，要加浏览器前缀列如：-webkit-flex：1；嵌套img，会在底部有空隙，解决⽅法img{vertical-align:top;}12.去掉多张图⽚同⾏的空隙img{float:left}13.谍影重重：当浮动元素中间出现空⽂本，空标签或者注释，会占空格⾯积，造成元素串⾏，解决⽅法：1.注释不添加到标签中间2.把宽度值相应变⼩3.不设置浮动，列如：定位，流动布局，转化表格法14.边距塌陷：产⽣在嵌套元素中，垂直⽅向上边距会出现合并现象，解决：1.给⽗类标签添加内边距2.给⽗类添加border3.给⽗类添加overflow：hideenIE低版本浏览器兼容性兼容性选择符添加在属性上的_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>< 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显⽰成填充+边框

2023年6月21日发(作者：)

浏览器兼容性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.清除浮动的⽅法：{overflow:hidden}:after{content:"";display:block;clear:both}6.定位保证不串⾏相对定位，嵌套绝对定位，除⾮此元素要参照浏览器7.伪类事件的写作顺序hover必须在link之后，active必须在hover之后8.不要删除，否则会变成IE低版本模式9.如果要兼容IE8以下浏览器，不要写html5和css310.如果⾼版本浏览器要设置css3属性兼容，要加浏览器前缀列如：-webkit-flex：1；嵌套img，会在底部有空隙，解决⽅法img{vertical-align:top;}12.去掉多张图⽚同⾏的空隙img{float:left}13.谍影重重：当浮动元素中间出现空⽂本，空标签或者注释，会占空格⾯积，造成元素串⾏，解决⽅法：1.注释不添加到标签中间2.把宽度值相应变⼩3.不设置浮动，列如：定位，流动布局，转化表格法14.边距塌陷：产⽣在嵌套元素中，垂直⽅向上边距会出现合并现象，解决：1.给⽗类标签添加内边距2.给⽗类添加border3.给⽗类添加overflow：hideenIE低版本浏览器兼容性兼容性选择符添加在属性上的_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>< 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显⽰成填充+边框