浏览器内核:
市面五大浏览器:
-谷歌浏览器:使用苹果的webkit内核,开创了blink内核,前缀 -webkit-
-火狐浏览器:内核是Gecko,前缀 -moz-
-opera浏览器:内核是blink,以前的内核是presto,前缀 -o-
-safari浏览器:苹果自己的内核webkit,前缀 -webkit-
-IE浏览器:IE4以上版本都是Trident内核,前缀 -ms-
IE常见bug:
1)图片有边框,解决方法:给图片加border:0或border:none;
2)图片间隙(下方撑大3~6px),解决方法:给图片加vertical-align: top
3)双倍边距(只有IE6出现),解决方法:给浮动元素加display:inline
4)默认高度(IE6、IE7,部分块元素有默认高度16px左右),解决方法:给元素加font-size:0或overflow:hidden
非IE bug:
1)表单元素行高对齐不一致,解决方法:给表单元素加 float:left;
- input默认的边距 padding:1px 2px
- input默认的边框 border-width:2px(outline: none)
- type类型为button 怪异盒模型
2)鼠标指针形状为手型:cursor:pointer
透明/隐藏:
- rgba(,,,alpha) 单个元素
- opacity 全部元素(0~1)(IE浏览器写法:filter:alpha(opacity=value);取值范围 1-100(整数))
- transparent 透明
- hsla() 硬件
- overflow:hidden
- visibility:hidden
- display:none
- transform:scale(0)
- backface-visibility:hidden
图片整合技术:css sprites 精灵图、雪碧图
原理:background-position:x y
优点:1) 将所有的小图标放在一张大的图片上可以减少体积;2)只需要请求一次 减轻服务器的压力;
缺点:- 计算麻烦 位置;- 作图麻烦;
面试:如何优化页面加载速度?答: htm+css代码压缩(gulp\webpack)、图片整合技术(小图标)