目录
一、 精灵图
1.1 为什么需要精灵图？
1.2 精灵图（sprites）的使用
二、 字体图标
2.1 字体图标的产生
2.2 字体图标的优点
2.3 字体图标的下载
icomoom字库 http://icomoon.io
阿里iconfont字库 http://www.iconfont.cn/
2.4 字体图标的引用
在icomoon中找到style.css复制里面的代码
2.5 字体图标的追加
三、 CSS三角
四、 CSS用户界面样式
4.1 什么是界面样式
4.1.1 鼠标样式 cursor
4.1.2 轮廓线 outline
给表单添加 outline：0；或者 outline：none；样式之后，就可以去掉默认的蓝色边框。
input { outline : none; }4.1.3 防止拖拽文本域 resize
实际开发中，我们文本域右下角是不可以拖拽的。
textarea { resize: none;}五、 vertical-align 属性应用
5.1 图片、表单和文字对齐
5.2 解决图片底部默认空白缝隙问题
推荐第一种
六、 溢出的文字省略号显示
6.1 单行文本溢出显示省略号
单行文本溢出显示省略号--必须满足三个条件：
/*1. 先强制一行内显示文本*/
white-space: nowrap; （ 默认 normal 自动换行）
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;6.2 多行文本溢出显示省略号
多行文本溢出显示省略号，**有较大兼容性问题**，适合于webKit浏览器或移动端（移动端大部分是webkit内核）
/*1. 超出的部分隐藏 */
overflow: hidden;
/*2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
```
**更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。**七、 常见布局技巧
7.1 margin负值运用
1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）
7.2 文字围绕浮动元素
7.3 行内块巧妙运用
页码在页面中间显示:
1. 把这些链接盒子转换为行内块， 之后给父级指定 text-align:center;
2. 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中
7.4 三角强化
<style>
.box1 {
width: 0;
height: 0;
/* 把上边框宽度调大 */
/* border-top: 100px solid transparent;
border-right: 50px solid skyblue; */
/* 左边和下边的边框宽度设置为0 */
/* border-bottom: 0 solid blue;
border-left: 0 solid green; */
/* 1.只保留右边的边框有颜色 */
border-color: transparent red transparent transparent;
/* 2. 样式都是solid */
border-style: solid;
/* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
border-width: 100px 50px 0 0 ;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;八、CSS初始化
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS 初始化
简单理解： CSS初始化是指重设浏览器的样式。 (也称为CSS reset）
每个网页都必须首先进行 CSS初始化。
这里我们以 京东CSS初始化代码为例。
**Unicode编码字体：**
把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。
比如：
黑体 \9ED1\4F53
宋体 \5B8B\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1
416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
