一、精灵图和字体图标
1.1 为什么需要精灵图
以前，每当客户端需要服务器时，便向服务器请求一张图片，为了改善服务器的压力，所以将多张图片放到一张图片上，减少了服务器的请求次数。
1.2 精灵图片（sprites）的使用
注意事项：
设置一个和小图标一样大小的盒子。然后测出其坐标，设置background-position即可。
1.3 字体图标的产生
字体图标展示的是图标，实际上是字体。
1.4 图标的优点
1.5 字体图标的下载与使用
（1）下载图标
（2）在style中引入字体图标，做一个字体声明，直接复制css文件就可以@font{。。。}
并且在demo.html中复制小方框
然后在对应的盒子的css中，设置font-family：'icnmoon'
1.6 字体图片的追加
1.7 css三角做法
（1）设置宽高为0；并且给边界框设置粗细和透明色，再设置想得到的对应的小三角形的边，即可得到对应的小三角。其中，边界框的粗细可以控制三角的大小。
https://blog.csdn.net/xuan971130/article/details/123337950二、用户界面样式
2.1 鼠标样式 cursor
2.2 表单的轮廓线
2.3 防止拖拽文本域
文本域本身点击右下角，可以将其拉大。
在textarea中设置resize：none即可。
textarea标签尽量放到一行上，否则输入内容时会有一个padding距离。
三、vertical-align属性
3.1 vertical-align设置图片与文本垂直对齐
设置图片和文字垂直对齐。只适用于行内元素和行内块元素。
对于块元素，首先将其设置为display：inline-block行内块元素，然后再加vertical-align属性。
3.2 vertical-align 解决图片底侧空白缝隙
因为图片与文字默认是基线对齐，所以img底测会有空白缝隙。
（1）因此将img的vertical-align设置为bottom | top | middle，即可解决这个问题。（提倡使用）
（2）把图片转换为块级元素：display：block,因为只有行内元素和行内块元素才有vertical-align这个属性。
四、溢出的文字省略号显示
4.1 单行文字溢出省略号显示
4.2 多行文字溢出省略号显示
五、常见布局技巧
5.1 margin负值的运用
（1）去除重复的粗线：多个带边框的盒子摆在一起时，由于边界贴到一起，因此中间的线会很粗，因此可以设置margin-left：-1px，似的线变细。
（2）当鼠标选中某个框时，显示一整个盒子。但是由于上述margin-left：-1px操作，使得盒子不能显示。解决办法：
鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（因为相对定位不脱标，保留原来位置，所以能够显示），如果有定位，则加z-index，提高层级。）
5.2 文字围绕浮动元素巧妙运用
巧妙运用浮动元素不会压住文字的特性
让图片浮动，文字继续显示即可。
5.3 行内块元素的巧妙应用
复习：让块元素水平居中，使用margin：0 auto；即可设置成功。
然而让行内块元素水平剧中，对其父元素设置text-align：center即可。
案例：做下一页的静态样式。
5.4 css三角巧妙运用
修改border的粗细得到不同样式的三角形
案例：做京东价格的图片展示。
5.5 css初始化
894
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
