CSS高级技巧

CSS高级技巧

为了有效地减少服务器接受和发送请求的技术，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS 雪碧）

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

精灵图（Sprites）的使用

使用精灵图的核心：
1.精灵技术主要针对于背景图片使用。就是把多个小背景整合到一张大图片中。
2.这个大图片也称为sprites精灵图 或者 雪碧图
3.移动背景图片位置，此时可以使用background-position。
3.移动的距离就是这个目标图片的x和y 坐标。注意网页中的坐标有所不同。
5.因为一般我们情况下都是往上往左移动，所以都是负值。
6.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

字体图标

使用场景：主要用于显示网页中通用、常用的一些小图标
精灵图有诸多优点，但是缺点也很明显
1.图片文件还是比较大的
2.图片本身放大和缩小会失真
3.一旦图片制作完毕想要更换非常复杂
此时，字体图标iconfont解决了以上问题，展示的是图标，本质属于字体
字体图标的优点：

• 轻量级：一个图标字体要比一系列的图像要小。一单字体加载了，图标就会马上渲染出来，较少了服务器请求
• 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
• 兼容性：几乎支持所有浏览器，请放心使用

注意：字体图标不能替代精灵技术，只是对工作中图标部分技术提升和优化。
总结：
1.如果遇到一些结构和样式比较简单的小图标，就用字体图标
2.如果遇到一些结构和样式复杂一点的小图片，就用精灵图

字体图标下载网站推荐：
icomoon字库 http://icomoom.io
阿里iconfont字库 http://www/iconfont.cn/

字体图标的引入
下载完毕后，注意源文件不要删，后面会用
1.吧下载包里面的fonts文件夹放入页面根目录下

CSS用户界面样式

鼠标样式cursor

li { cursor：pointer；}
设置或检索在对象上移动的鼠标指针采用何种系统预定的光标形状。
default | 小白 默认
pointer | 小手
move | 移动
text | 文本
not-allowed | 禁止

轮廓线outline

给表单添加outline：（）；或者outline：none；样式之后，就可以去掉默认的蓝色边框
input { outline：none；}

防止拖拽文本域resize

实际开发中，我们文本域右下角是不可以拖拽的
textarea{ resize：none；}

vertical-align属性应用

使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效
图片、表单都属于行内块元素，默认的vertical-align是基线对齐
此时给图片、表单这些行内块元素的vertical-align属性设置middle就可以让文字和图片垂直居中对齐了

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐
解决方案：
1.给图片添加vertical-align: bottom|middle|top;等（提倡使用的）
2.把图片转换为块级元素display：block；

溢出的文字省略号显示

1.单行文本溢出显示省略号–必须满足三个条件
/ * 1.先强制一行内显示文本 * /
white-space：nowrap；
/ * 2.超出部分隐藏 * /
overflow：hidden；
/ * 3.文字用省略号替代超出部分 * /
text-overflow：ellipsis；
2.多行文本溢出显示省略号
多行文本溢出显示省略号，有较大的兼容性问题，适合于webkit浏览器或移动端
overflow：hidden；
text-overflow：ellipsis；
/ * 弹性伸缩盒子模型显示 * /
display：-webkit-box；
/ * 限制在一个块元素显示的文本的行数 * /
-webkit-line-clamp：2；
/ * 设置或检索伸缩盒对象的子元素的排列方式 * /
-webkit-box-orient：vertical；
更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

常见布局技巧

1.margin负值的使用
①让每个盒子margin-left：-1px；正好压住相邻盒子边框
②鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index）
2.文字围绕浮动元素
3.行内块巧妙运用
4.CSS三角强化
代码：
width：0；
height：0；
border-color：transparent red transparent transparent
border-style：solid；
border-width：22px 8px 0 0；

CSS初始化

简单理解：CSS初始化是指重设浏览器的样式（也称为CSS reset）
每个网页都必须首先CSS初始化
黑体\9ED1\4F53
宋体\5B8B\4F53
微软雅黑\5FAE\8F6F\96C5\9ED1