<!DOCTYPE html> <!-- 版本类型声明 --> <html lang="en"><!-- 根元素 --> <head> <meta charset="UTF-8"> <!-- 声明页面的编码格式 --> <title>20160801</title><!-- 将页面标题放到页面编码之下，防止乱码 --> <meta name="keywords" content="音乐，视频，电影"> <meta name="descrilition" content=""> </head> <body> <h1 style="text-align: center;">2016-07-29学习日志</h1> <hr> <h2>CSS定位&背景图合并</h2> <h3>position</h3> <ul> <li>relative|absolute|fixed|static</li> <ul> <li>relative:相对其正常位置定位（不脱离文档流）</li> <li>absolute:相对于第一个父级定位（脱离文档流）</li> <li>fixed:相对于浏览器窗口定位（脱离文档流）</li> <li>static:默认值，忽略其他定位设置</li> </ul> </ul> <hr> <h3>opacity</h3> <ul> <li>opacity:number(0-1之间的数值)</li> <ul> <li>1:完全不透明</li> <li>0:完全透明，看不见</li> </ul> <li>兼容写法（IE6-8）</li> <ul> <li>filter:alpha(opacity=50)</li> </ul> </ul> <hr> <h3>CSS样式重置</h3> <hr> <h3>CSS Sprite</h3> <ul> <li>把所需的背景图合并在一起，从整体上减少了图片文件的大小</li> <li>大大减少了客户端向服务器的请求次数，减轻服务器的压力</li> <li>利用了缓存机制，使用户觉得浏览器加载速度加快，有利于用户体验</li> <li>相对于CSS Sprite，手工合并背景图精确度更高，维护更灵活</li> </ul> </body> </html>