前端知识点积累（css篇） - 好文

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浏览器就不说了，太多了，心痛。

热门工具换一换