CSS高级技巧

为什么需要精灵图

• 为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）
• 核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

精灵图的使用

• 主要针对背景图片，小背景图整合到一张大图中
• 移动背景图片位置，使用background-position
• 移动的距离就是目标图片的x和y坐标（以左顶点为坐标原点，图片移动，x轴右边走是正值，左边走是负值；y轴下走是正值，上走是负值）

字体图标🍕

• 展示的是图标，本质属于字体
• 网站：iconfont

CSS三角🍔

.box {
      width: 0;
      height: 0;
      line-hight:0;/*为了兼容性*/
      font-size:0;/*为了兼容性*/
      border: 10px solid transparent;
      border-top-color: turquoise;/*想显示哪个边*/
    }

CSS用户界面样式🍟

• 鼠标样式cursor
  
  
• 轮廓线outline
  
• 防止拖拽文本域resize
  

vertical-align属性

• 经常用于设置图片或表单（行内块元素）和文字垂直对齐
  
  
• 解决图片底部默认空白缝隙问题
  图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐
  主要解决方法：

1. 给图片添加vertical-align：middle|top|bottom等（提倡）
2. 把图片转换为块级元素display：block；

溢出的文字省略号显示

• 单行文本溢出显示省略号
  须满足一下三个条件：
  
• 多行文本溢出显示省略号
  有较大兼容性问题，适合于webkit浏览器或移动端（移动端大部分是webkit内核）
  

常见布局技巧

• margin负值的运用
  1.让每个盒子margin往左侧移动-1px正好压住相邻盒子边框(播放器放大缩小会影响)
  2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index）
  ps：只有定位才可以设置z-index属性
• 文字围绕浮动元素
  巧妙运用浮动元素不会压住文字的特性
• 行内块的巧妙运用
  水平居中：line-height等于height
  垂直居中：text-align：center；
• css三角强化
  

CSS初始化

• 照顾浏览器的兼容性，需要对CSS初始化

* {
   margin：0；
   padding：0；
}/*内外边距清零*/
img {
   border：0；/*照顾低版本浏览器，如果图片外面包含了链接会有边框的问题*/
   vertical-align：middle；/*取消图片底侧有空白缝隙的问题*/
}

• 把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题