1.css3处理兼容性问题方式 【添加私有前缀】
前缀 浏览器内核 代表浏览器
-o- presto 欧朋
-ms- trident IE
-moz- gecko 火狐
-webkit- webkit 谷歌、safari
blink
2.图片整合技术/精灵图实现步骤
精灵图/雪碧图:多张图组合实现的图片。 sprites
实现步骤:
1.实现一个指定大小的盒子
2.将精灵图设置为该盒子的背景图
3.通过background-position来调整背景图的位置,以显示想要的图案。
优缺点:
减少请求,提升性能
减少文件数量,降低命名难度
占用内存少
步骤繁琐,增删图标麻烦。
3.css中常见的bug及hack
1.图片3px问题
1.给图片设置vertical-align:top | middle | bottom;
2.给图片设置display:block;
2.行内块元素水平方向之间会有间隔
1.给元素加浮动
2.去掉元素代码之间的空格和换行。
3.图片被a包裹,在低版本浏览器会有边框
1.给图片去掉边框
设置border:0px solid #000;
4.png24格式的图片,在低版本浏览器显示为不透明
1.保存成png8格式
2.保存成gif格式
图片格式:
jpeg/jpg:可以提升或者降低图片压缩级别,会自动填充透明为白色,节省内存。
png:带透明格式的图。 【带圆弧的图、小图标】
5.表单元素垂直方向不能对齐
1.给元素添加浮动
2.给input设置vertical-align
6.margin的粘连问题-父随子动
1.给父元素设置overflow:hidden;
2.给父元素设置上边框
3.使用内边距实现
7.margin的塌陷问题
1.在一个元素身上设置足够的间隔
2.给其中一个元素添加一个父亲,给父亲设置overflow:hidden;
8.鼠标手型
cursor:hand;
cursor:pointer;