CSS高级技巧

CSS高级技巧

1、精灵图

1.1为什么需要精灵图

目的：有效减少服务器接收和发送请求的次数，提高页面的加载速度

1.2精灵图（sprites）的使用

1. 主要针对于小的背景图片使用

2. 主要借助于背景位置来实现-background-position

3. 一般情况下精灵图都是负值（x轴右边走是正值，左边走是负值，y轴同理）

2、字体图标

2.1字体图标的产生

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标

精灵图有优点也有缺点：

1. 图片文件还是比较大

2. 图片本身放大和缩小会导致失真

3. 一旦图片制作完毕想要更换十分麻烦

字体图标iconfont可以很好的解决上述问题

字体图标展示的是图标，本质属于字体

2.2字体图标的优点

• 轻量级：一个图标字体要比一系列的图像小，一旦文字加载了图标就会马上渲染出来，减少了服务器请求

• 灵活性：本质其实是文字，可以随意的改变颜色、产生阴影、透明效果、旋转等

• 兼容性：几乎支持所有的浏览器，可以放心使用

注意：字体图标不能代替精灵技术，只是对工作中图标部分技术的提升和优化

总结：

1. 若遇到一些结构和样式比较简单的小图标，就用字体图标

2. 若遇到一些结构和呀样式复杂一些的小图片，就用精灵图

2.3字体图标的下载

1. icomoon字库 http://icomoon.io

2. 阿里iconfont字库 http://www.iconfont.cn/

2.4字体图标的引入

1. 把下载包里面的fonts文件夹放入页面根目录下

2. 在css样式中全局声明字体：

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?klgce2');
  src:  url('fonts/icomoon.eot?klgce2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?klgce2') format('truetype'),
    url('fonts/icomoon.woff?klgce2') format('woff'),
    url('fonts/icomoon.svg?klgce2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

2.8字体图标的追加

只需要把压缩包里面的selection.json重新上传，然后选中自己想要的图标，重新下载压缩包，并替换原来的文件即可

3、CSS三角

3.1css三角的做法

div {
    width: 0;
    height: 0;
    /*以下两行考虑浏览器兼容性*/
    line-height: 0;
    font-size: 0;
    border: 50px solid transparent;
    border-left-color: pink;
 }

4、CSS用户界面样式

4.1什么是界面样式

所谓界面样式，就是更改一些用户操作样式

• 更改用户的鼠标样式

• 表单轮廓

• 防止表单域拖拽

4.2鼠标样式：cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标样式

属性值	描述
default	小白 默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

4.3轮廓线：outline

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

input{ outline： none； }

4.4防止拖拽文本域：resize

实际开发中，文本域右下角不可拖拽

textarea{ resize： none； }

5、vertical-align属性应用

5.1图片、表单和文字对齐

图片、表单都属于行内块元素，默认的vertical-align是基线对齐

可以给图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直居中对齐

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

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐

主要解决方法有两种：

1. 给图片添加vertical-align：middle | top | bottom等（推荐使用）

2. 把图片转换为块级元素 display： block；（独占一行可能会影响布局）

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

6.1单行文本溢出显示省略号

必须满足三个条件：

/* 先强制一行内显示文本 */
white-space: nowrap;
/* 超出的部分隐藏 */
overflow: hidden;
/* 文字用省略号替代超出的部分 */
text-overflow: ellipsis;

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

多行文字溢出显示省略号，有较大的兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）

/* 超出的部分隐藏 */
overflow: hidden;
/* 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

7、常见布局技巧

7.1margin负值运用

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

2. 鼠标经过某个盒子的时候，提到当前盒子的层级即可（若盒子没有定位，加上相对定位即可保留位置）若盒子有定位，加z-index

7.2文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性

7.3行内块巧妙运用

7.4CSS三角巧妙运用

width: 0;
height: 0;
border-color: transparent pink transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;

8、CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，需要对css初始化

简单理解：css初始化是指重设浏览器的样式（也称CSS reset）

每个网页都必须首先进行CSS的初始化

Unicode编码字体：

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

比如：

黑体：\9ED1\4f53

宋体：\5B8B\4F53

微软雅黑：\5FAE\8F6F\96C5\9ED1

结束语：生而独一无二无需人云亦云。