CSS高级技巧

1.精灵图

目的:为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度

注意:1.主要针对小的背景图片使用;
        2.主要借助于背景位置来实现(background-position);
        3.一般情况下精灵图都是负值,x轴左边走是负值,y轴同理;

缺点:

1.图片本身放大和缩小会失真;
2.一旦图片制作完成想要更换非常复杂;

2.字体图标

目的:可以优化精灵图,但不能代替,因为复杂一点的字体图标做起来很麻烦

优点:

1.一个图标字体比一系列图像要小;
2.本质是文字,可以随意更改颜色透明效果等;
3.很好的兼容性;

和精灵图总结:

1.如果遇到一些结构和样式比较简单的小图标，就用字体图标。
2.如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

网址:http://www.iconfont.cn/阿里字库

使用流程:

1.先下载要的图标
2.在页面根目录复制好字体结构文件
3.在CSS样式中声明'字体声明'
4.写出图标的名字(直接复制,不然出错)
5.相关的盒子记得css样式中指定字体

3.三角图标写法

例子:

写法:

这串代码可以写出来一个正三角图标,然后可以用绝对定位来把这个小三角放到需要的地方(记得子绝父相)

如果需要其他角度的三角图标,调整border的上下左右边框,然后其他颜色改为透明就行了

4.CSS用户界面

(1)鼠标样式

目的:设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

语法:{cursor: pointer; }
属性值:

(2)轮廓线 outline

目的:可以去掉表单点击后的蓝色边框

语法:input {outline: none; }

(3)防止拖拽文本域 resize

目的:使文本域右下角不可以拖拽

 

语法:textarea{ resize: none; }

(4)垂直对齐 vertical

目的:用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

语法:{vertical-align:属性值;}

属性值:

 图片底部默认空白缝隙问题就可以用这个方法使图片以底线对齐来解决

(5)溢出文字省略号显示

①单行文本溢出省略号显示

步骤:

1.先强制一行内显示文本
white-space: nowrap;(默认是 normal 自动换行)
2.超出的部分隐藏
overflow: hidden;
3.文字用省略号替代超出的部分
text-overflow: ellipsis;

②多行文本溢出省略号显示

步骤:

注意:只适用于移动端 

5.margin负值运用

 

像这样浮动的时候边框重合了,这个时候可以margin-left: -1px解决 ,如果要鼠标碰到显示出边框,可以在hover中再加上position: relative来提高层级,当然如果都有相对定位那就直接加z-index :1;就行了