1、css盒模型
盒模型分为标准模型和ie盒模型。
在标准盒模型中，盒模型的宽高指的是内容(content)区域，而在ie盒模型中，盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。
（1）可以通过css设置盒模型：
/* 标准模型 */
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box;
（2）通过js获取content宽高的兼容写法：
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr] :getComputedStyle(obj)[attr];
}//兼容IE的写法
（3）offsetWidth / offsetHeight //返回元素的宽高（包括元素宽高、内边距和边框，不包括外边距）
clientWidth / clientHeight //返回元素的宽高（包括元素宽高、内边距，不包括边框和外边距）
style.width / style.height //返回元素的宽高（包括元素宽高，不包括内边距、边框和外边距） scrollWidth / scrollHeigh //返回元素的宽高（包括元素宽高、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同
当鼠标事件发生时（不管是onclick，还是omousemove，onmouseover等）
clientX / clientY 鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x/y轴的坐标； 不随滚动条滚动而改变；
pageX / pageY 鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x/y轴的坐标； 随滚动条滚动而改变；
screenX / screenY 鼠标相对于显示器屏幕左上角x/y轴的坐标；
offsetX / offsetY 鼠标相对于事件源左上角x/y轴的坐标
scrollLeft / scrollTop //此属性可以获取或者设置对象的最左/上边到对象在当前窗口显示的范围内的左/上边的距离，也就是元素被滚动条向左/上拉动的距离。返回值是一个整数，单位是像素。此属性是可读写的。
注： style.width 返回的是字符串，如28px，offsetWidth返回的是数值28；
style.width/style.height与scrollWidth/scrollHeight是可读写的属性，clientWidth/clientHeight与offsetWidth/offsetHeight是只读属性
style.width的值需要事先定义，否则取到的值为空。而且必须要定义在html里(内联样式)，如果定义在css里，style.height的值仍然为空，但元素偏移有效；而offsetWidth则仍能取到。
offsetTop / offsetLeft //返回元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。
所谓的定位就是position属性值为relative、absolute或者fixed。返回值是一个整数，单位是像素。此属性是只读的。
2、margin塌陷
父元素包含子元素（嵌套关系）
实际效果是父元素出现20像素的margin-top值
解决方法：
（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合 （可以设置成透明：border：1px solid transparent）。
（2）为父盒子添加overflow：hidden；
（3）为父盒子设定padding值；
3、元素垂直居中
（1）宽高固定
或者
（2）宽高不固定
或者
4、清除浮动、让浮动后的元素仍能撑起父元素
（1）给父元素添加伪类（ie兼容性不好，ie8及以下不支持伪类元素）
（2）给父元素添加overflow属性（overflow属性会导致有定位的子元素被隐藏）
（3）.在结尾处添加空div标签clear:both
5、优化浏览器性能的方法
（1）减少请求次数，将css、js等静态文件通过打包工具打包
（2）雪碧图、图片压缩
（3）js文件放在文档最后加载
（4）事件委派
（5）避免太过复杂的for循环嵌套
6、各大浏览器的内核分别是什么
（1）Chrome：Blink（眨眼）
（2）IE内核：Trident （三叉戟 海王的武器？？）
（3）Firefox：Gecko （壁虎）
（4）Safari：Webkit（极速）
（5）Opera：Presto
7、我碰到过的浏览器兼容性问题
（1）QQ浏览器内核解析不了span里面嵌套image标签，别问为什么，就是qq浏览器内核自带的b u g。
<span><img src="../images/1.png"/></span>
（2）这个也不算浏览器兼容性问题，但是特别值得注意，MAC系统+Chrome浏览器+<html lang="en">会自动将中文网页翻译成英文后再翻译成中文，经过机器翻译之后内容就会错乱，Windows系统的话，则会弹窗询问你是否翻译本页。所以前端一定要将lang设置成“zh”。
（3）IOS Safari浏览器下固定定位position:fixed会失效，不是不起作用，是错乱，你无法预测它会出现什么样的样式。
（4）事件代理最好不要通过body冒泡给元素，因为在ios系统中，window ，html，document，body绑定click事件，并且代理元素是不可点击元素（如div span等）的话，事件不会触发。但是如果是可点击元素（如button,a）的话，点击事件正常。
$(body).on('click', '.clear', function () {
alert(123);
})
以上浏览器兼容性问题是我在安卓和ios原生混合开发中踩过的坑，ie浏览器就不说了，太多了，心痛。
---------------------
作者：here962464
来源：CSDN
原文：https://blog.csdn.net/here962464/article/details/88655797
版权声明：本文为博主原创文章，转载请附上博文链接！
11-23
218
218
12-08
184
184
05-07
05-07
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
