图片整合
学习目标
- 图片整合的概念，使用图片整合的优势
- 实现图片整合的方法和技巧
- 滑动门的概念
一、图片整合的概念，使用图片整合的优势一、图片整合的概念，使用图片整合的优势
css精灵（图片整合技术）---雪碧图
1、将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position来实现背景图片的定位技术。
2、图片整合的优势
- 1）通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度。
- 2）通过整合图片来减小图片的体积。
二、实现图片整合的方法和技巧
1）使用PS进行小图片整合；
2）使用相关软件来进行操作。
三、滑动门的概念
1、什么是滑动门
滑动门是一个形象的称呼，滑动门技术就是用：hover伪类 滑过导航栏时使导航栏内图片发生变化的一种技术。
2、滑动门特征
通过滑动门技术，可以使css设计出来的导航菜单兼具传统布局的图像效果，与css布局的高效拓展性。
[========]
宽高自适应
学习目标
1、宽高自适应的概念和使用
2、最小高度
3、过滤器的使用
4、最小高度和高度自适应引发的兼容问题
5、伪对象选择符
6、自适应窗口（一屏页面的书写）
一、宽高自适应的概念和使用
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。
元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
（1）宽度自适应
元素宽度设置为100%。（块元素宽度默认为100%）
Width：100%；
（2）高度自适应
元素{height：auto；}/高度不写
二、最小高度
注：height属性在IE6里就类似min-height作用。
IE6及以下版本不识别该组属性。
三、过滤器的使用
1）下划线属性过滤器
当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则。
语法：选择符{属性：属性值；}
2）!important关键字过滤器
它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它，我们可以利用IE6的这个bug作为过滤器来兼容IE6和其他标准浏览器。
语法：选择符{属性：属性值；!important;}
Height：300px；height:200px !important;
3)扩展内容
9：IE浏览器组 语法：选择符{属性：属性值9;}
：IE8 包括IE8 语法：选择符{属性：属性值 ；}只有IE8以上浏览器起作用
+：ie7 IE7 以下（包括IE7）语法：选择符{+属性：属性值；}
：root选择器 除了IE8及更早的浏览器 语法：：root选择符{属性：属性值；}
四、最小高度和高度自适应引发的兼容问题
元素具备最小高度的自适应
Min-height属性：最小高度；（IE6浏览器不识别该属性）
兼容元素具备最小高度自适应的方法：
Hack1：min-height:value；_height：value；
Hack2：min-height:value；height：auto !import;height:value;(建议使用)
扩展知识点：visibility：hidden和display：none；的区别？
visibility：hidden/visible；隐藏/可见
visibility：hidden；和display：none；相同点都是隐藏显示的区域
visibility：hidden；和display：none；的区别
visibility：hidden；属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而display：none属性会使这个对象彻底消失。
五、伪对象选择符
1、：：after：与content属性一起使用，定义在对象后的内容。如：div：：after{content：url（logo.jpg）；}div：：after{content：“文本内容”；}
2、：：before：与content属性一起使用，定义在对象前的内容。如：div：：before{content：”在其前放内容“；}
3、：：first-letter：定义对象内第一个字符的样式。说明：（该伪元素只能用于块级元素。）
4、：：first-line：定义对象内第一行的样式。该伪元素只能用于块级元素。Ie6以下版本浏览器不支持伪对象选择符。
注：一个冒号叫伪类选择器，两个冒号叫伪对象选择器。
六、自适应窗口（一屏页面的书写）
元素宽高度自适应窗口高度
设置方法：html，body{width：100%；height：100%；}