CSS高级技巧

CSS高级技巧学习

1. 精灵技术

1.1 精灵图（sprites）的使用

使用精灵图核心：

1. 精灵技术主要针对于背景图片使用。就是把多个背景图片整合到一张小图片中
2. 这个大图片称为sprites或雪碧图

使用方法：
在FW软件从一个大的背景图片中获取想要的小图片坐标
3. 在图层中锁定位图

2. 使用切片工具切出想要的图层，获取对应的宽度高度以及坐标
   

3. 设置盒子宽度高度、设置背景图片坐标

2. CSS三角的做法

1. 原理
   
   

2. 实现
   只要把四个边框的颜色都设置为透明
   再把想要的位置对应的边框设置颜色就行了

3. 取消表单轮廓线和防止拖拽文本区域

1. 轮廓线 outline
   给表单添加outline: 0; 或者outline: none; 样式之后，就可以去掉默认的蓝色边框

2. 文本区域 textarea
   加入样式textarea{ resize: none; } 就可以了

4. vertical-align实现行内块和文字垂直居中对齐

5. 图片底侧空白缝隙解决方案

6. 文字溢出省略号显示

6.1 单行文本溢出显示省略号——必须满足三个条件

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

7. 常见布局技巧

7.1 margin负值运用

7.2 文字围绕浮动元素

7.3 CSS三角巧妙运用