CSSpart6

一、精灵图

1.精灵图（sprites）的使用

• 主要针对背景图使用，把多个小背景图正和岛一张大图片中。
• 大图即为精灵图（雪碧图）
• 移动背景图位置可用background -position
• 移动的距离就是目标图片的x，y轴（y轴是向下为正）
• 要精确测量

二、字体图标

iconfont

1.优点

2.网站下载

 3.字体图标引入

 （1）下载好之后先把fonts文件夹移到和页面相同的文件夹里

 （2）

 （3）

 3.字体图标的追加

三、CSS三角

四、CSS用户界面样式

1.更改鼠标样式

li {cursor：pointer} 设置或检索对象上移动的鼠标指针采用何种系统预一定的光标形状

default	小白（默认）
pointer	小手
move	移动
text	文本
not-allowed	禁止

2.轮廓线

给表单添加outline：0；或者outline：none；样式之后可以去掉默认的蓝色边框

3.防止拖拽文本域 resize

 resize：none；

五、vertical-align属性应用

1.设置图片或者表单（行内块元素）和文字垂直对齐，只针对行内元素或者行内块元素有效

vertical-align：baseline | top | middle | bottom

baseline	默认，元素放在父元素的基线上
top	元素的顶端与行中最高元素的顶端对齐
middle	元素放在父元素的中部
bottom	元素的低端与行中最低元素的顶端对齐

 2.解决图片底部默认空白缝隙问题

图片默认和文字基线对齐，所以下面会有空白

• 个图片添加vertical-align：middle | top | bottom等（不与基线对齐就行）
• 把图片转换为块级元素display：block；

六、溢出的文字省略号显示

1.单行文本溢出显示省略号

• 先强制一行内显示文本 white-space：nowrap；
• 超出部分隐藏 overflow：hidden；
• 文字用省略号代替超出部分  text-overflow：ellipsis；

2.多行文本溢出显示省略号

有较大的兼容性问题，适合于webKit浏览器或移动端

七、常见布局技巧

1.margin负值

1.让每个盒子margin往左侧移动-1px正好压住相邻盒子边框

2.鼠标经过某个盒子的时候，提高当前盒子的层级（如果没有定位则添加相对定位（保留位置），如果有定位则添加z-index）

2.文字围绕浮动元素

浮动之后文字会自动环绕

3.行内块运用

页码

4.CSS三角强化