一、css精灵图：
优点：减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节
二、overflow
参数：
scroll：必会出现滚动条。
auto：子元素内容大于父元素时出现滚动条。
visible：溢出的内容出现在父元素之外。
hidden：溢出隐藏。
三、图片
png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可用。
jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。
四、高度自适应
外层div使用position：relative；高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="height: 500px;position: relative;">
<div style="height: 100px;"></div>
<div style="position: absolute;top: 100px;bottom: 0px;left: 0px;background: blue;width: 100%;"></div>
</div>
</body>
</html>
五、display:inline-block空格解决
有空格时候会有间隙 解决：移除空格
margin正值的时候 解决：margin使用负值
使用font-size时候 解决：font-size:0、letter-spacing、word-spacing
六、让页面里的字体变清晰，变细用CSS怎么做？
-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。
七、display
inline（默认）–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block
八、水平居中
1.将要居中的元素设置display：inline-block,父元素设置：text-align:center
2.给将要居中的元素设置一个固定的宽度，然后设置margin：0 aotu;
3.给将要居中的元素设置：(前条件，父元素必须要设置相对定位属性)
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
九、让页面里的字体变清晰，变细用CSS怎么做？
-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。
十、浮动实现文字环绕效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 400px;margin: 100px auto;background: silver;padding: 10px;color: white;">
<p style="float: left;">
<img src="img/navBg.png" />
</p>
我打江南走过
那等在季节里的容颜如莲花的开落
东风不来，三月的柳絮不飞
你底心如小小寂寞的城
恰若青石的街道向晚
音不响，三月的春帷不揭
你底心是小小的窗扉紧掩
我达达的马蹄是美丽的错误
我不是归人，是个过客……
——郑愁予《错误》
</div>
</body>
</html>
效果图：
十一、position属性：
1.static：默认。元素框正常生成.
2.inherit：继承。
3.relative：相对定位。相对自己的原来的位置定位。
4.absolute：绝对定位。相对有position属性的父级元素定位，若父级元素没有就继续往上层查找，直到找到为止。如果一直没有就相对body定位。
5.fixed：固定定位。相对视口的位置定位。
6.sticky：（C3新增属性）粘性定位。相当于relative和fixed混合。最初会被当作是relative，相对于原来的位置进行偏移；一旦超过一定阈值之后，会被当成fixed定位，相对于视口进行定位。demo地址（https://jsbin.com/moxetad/edit?html,css,output）
十二、超出隐藏
（1）、超出一行隐藏
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;（2）、超出三行隐藏
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;十三、position:fixed;在android下无效怎么处理
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
文章原文：点击打开链接
1430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
