一. Css精灵图
1. 精灵图概述
目的: 为了有效的减少服务器接收和发送请求的次数 提高页面的加载速度
核心原理: 将页面中的一些小背景图整合到一张大图中 这样服务器只需要一次请求即可
2. 精灵图使用
❶. 精灵图主要针对小的背景图片
❷. 主要使用背景位置属性实现 background - position
❸. 一般情况精灵图都是负值(网页中的坐标 x轴右边是正值 左边为负值 y轴同理)
二. Css用户界面样式修改
1.鼠标样式 cursor(光标)
属性值:
❶. default 小白光标 (默认值)
❷. pointer 小手光标
❸. move 移动光标
❹. text 文本光标
❺. not - allowed 禁止光标
2. 表单轮廓线 outline
给表单添加 outline : 0; 或 outline : none; 样式后 可以去掉默认的蓝色边框
3. 文本域取消调节大小 resize
给文本域添加 resize : none; 可取消调节大小
4. vertical - align 垂直对齐
使用场景: 用于设置图片或表单(行内块元素)和文字垂直对齐
注意: 只针对行内块元素和行内元素有效
语法: vertical - align : baseline | top | middle | bottom;
属性值:
❶. baseline 基线对齐(默认值)
❷. top 顶线对齐
❸. midden 中线对齐
. bottom 底线对齐
5. 图片底侧空白缝隙小bug
原因: 行内块元素会和文字基线对齐
解决:
❶. 使用vertical - align : top | middle | bottom;
❷. 将图片转换为块元素 display : block
6. 单行文字溢出显示省略号
使单行文字溢出显示省略号的三步:
❶. 先强制一行内显示文本 white - space : nowrap;
❷. 溢出部分隐藏 overflow : hidden;
❸. 溢出的文字用省略号代替 text - overflow : ellipsis;
注意:
■ white - space 属性有2个值:
1. normal 文字溢出自动换行
2. nowrap 文字是否溢出都强制一行内显示
