【前台进阶100天】Day07 图片整合技术|宽高自适应|过滤器|伪对象选择符

今日内容：

• 1、图片整合的概念，使用图片整合的优势
• 2、最小宽度、最小高度、最大宽度、最大高度
• 3、过滤器的使用
• 4、宽高自适应的概念和使用
• 5、最小高度和高度自适应引发的兼容问题(针对IE浏览器)
• 6、浮动元素父元素高度自适应引发的高度坍塌问题
• 7、visibility
• 8、伪对象（伪元素）选择符
• 9、自适应窗口(一屏页面的书写)

一、图片整合技术

1、图片整合的概念

CSS Sprites（图片整合技术），又称css精灵、雪碧图。原理是将导航背景图片、按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，而后用”background-position”来实现背景图片的定位。

background-position:xpos ypos;第一个值是水平位置，第二个值是垂直位置。

xpos取值：left/right，规定水平方向。

xpos取值：top/bottom，规定垂直方向。

当取值为数值是，向左向下移动是正值，向右向上移动是负值。

2、图片整合的优势

（1）通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度。

（2）通过整合图片来减小图片的体积。

image

3、实现图片整合的方法和技巧

（1）使用PS进行小图片整合；

（2）使用相关软件来进行操作；

图片整合的背景必需是透明的（png格式的图片）

二、最小宽度、最小高度、最大宽度、最大高度

min-height（最小高度）

max-height(最大高度)

min-width(最小宽度)

max-width(最大宽度)

注：IE6及以下版本不识别该组属性，height属性在IE6里就相似min-height作用。

三、过滤器(filter)的使用

作用：主要为了兼容IE。

1、_ 下划线属性过滤器

当在一个属性前面添加了一个下划线后，因为符合标准的浏览器不能识别带有下划线的属性而忽略了这个公告，但是在IE6及更低版本浏览器中会继续解析这个规则。

语法：选择符{ _属性：属性值；} （此方法是区分IE6浏览器和其余浏览器的方法）；

2、!important关键字过滤器

它表示所附加的公告具备最高优先级的意思，被浏览器优先显示。但因为IE6及更低版本不能识别它，我们可以利用IE6的这个Bug作为过滤器来兼容IE6和其它标准浏览器。

语法：选择符{属性：属性值!important;}

3、+/* 属性过滤器

当在一个属性前面添加了+/*后，该属性被所有IE7及以下浏览器识别，其它浏览器忽略该属性的作用。

语法：选择符{+/*属性：属性值；}

4、\9

只有IE浏览器识别（不包括IE5）

语法：选择符{属性：属性值\9;}

5、\0

只有IE8及以上浏览器识别

语法：选择符{属性：属性值\0;}

6、:root选择器

只有IE8以上浏览器识别

语法：:root 选择符{属性：属性值；}

四、宽高自适应

1、宽高自适应的概念

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或者子元素自动调整，这就是自适应。

宽高自适应的优点：

元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设施、不同窗口和不同分辨率下显示。

2、宽高自适应的使用

（1）宽度自适应

元素宽度设置为100%（块元素宽度默认为100%） 或者者不设置宽度（width）;（宽度是父元素的宽度）

（2）高度自适应

1.自适应元素高度：height:auto;或者者不设置;（是子元素撑开的父元素高度）

2.自适应窗口高度

自适应窗口（一屏页面的书写）

设置方法：html,body{height:100%;}

注：假如设置子元素的高度跟随父元素的高度变化而变化，那么父元素必需有高度。

五、最小高度和高度自适应引发的兼容问题(针对IE浏览器)

元素具有最小高度的自适应

min-height属性：最小高度；(IE6浏览器不识别该属性)

兼容元素具有最小高度自适应的方法：

方法一:

min-height:value;（常规浏览器识别）

_height:value;（IE浏览器识别）

方法二（建议使用）:

min-height:value;

height:auto!important;（顺序必需写在height前面，IE6识别这两个height。）

height:value;

说明：height属性在IE6里就相似min-height作用。

最小高度不能跟高度一起写，最小宽度不能跟宽度一起写，内容超出最小高度时文本溢出，内容超出最小宽度时自动换行。

六、浮动元素父元素高度自适应引发的高度坍塌问题

假如浮动元素的父元素没有增加高度，会产生高度坍塌问题。

处理方法：

方法一：

给浮动元素的父元素增加公告overflow:hidden;(触发一个BFC)

在子元素增加浮动，父元素没有高度时使用；

注：该方法不能和定位一起使用。

方法二:

在浮动元素下方增加一个空div标签，并给该元素增加公告：div{clear:both;（清理浮动） height:0; overflow:hidden;}

方法三：万能清理浮动法

给浮动元素的需要处理高度坍塌的父元素增加class名”.clear”(哪个需要清理就给哪个元素命名为clear)

注：一个元素可以取多个class名，中间用空格隔开

.clear:after{content:”.”;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

注：假如是IE6再增加这句话：E{zoom：1；}。

IE8以上和非IE浏览器才支持:after。

zoom(IE专有属性)可处理IE6,IE7的浮动问题

拓展：CSS清理浮动的8种方法以及优缺点
浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及width、height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清理浮动更难了。处理浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。

下面总结8种清理浮动的方法（测试已通过 ie、chrome、firefox、opera，后面三种方法只做理解即可以了）：
1.父级div定义height

<style type="text/css">   .div1{background:#000080;border:1px solid red;/*处理代码*/height:200px;}   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}   .left{float:left;width:20%;height:200px;background:#DDD}   .right{float:right;width:30%;height:80px;background:#DDD} </style> <div class="div1">   <div class="left">Left</div>   <div class="right">Right</div> </div> <div class="div2"> div2 </div> 

原理：父级div手动定义height，就处理了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握。
缺点：只适合高度固定的布局，要给出准确的高度，假如高度和父级div不一样时，会产生问题。
建议：不推荐使用，只建议高度固定的布局时使用。

2.结尾处加空div标签，增加公告：clear:both;

<style type="text/css">   .div1{background:#000080;border:1px solid red}   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}   .left{float:left;width:20%;height:200px;background:#DDD}   .right{float:right;width:30%;height:80px;background:#DDD}   /*清理浮动代码*/   .clearfloat{clear:both;height:0;overflow:hidden;} </style> <div class="div1">   <div class="left">Left</div>   <div class="right">Right</div>     <div class="clearfloat"></div> </div> <div class="div2"> div2 </div> 

原理：增加一个空div，利用css提高的clear:both清理浮动，让父级div能自动获取到高度。
优点：简单、代码少、浏览器支持好、不容易出现怪问题。
缺点：不少初学者不了解原理；假如页面浮动布局多，就要添加很多空div，让人感觉很不好。
建议：不推荐使用，但此方法是以前主要使用的一种清理浮动方法。

3.给父级div定义伪对象:after和 zoom

 <style type="text/css">   .div1{background:#000080;border:1px solid red;}   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}   .left{float:left;width:20%;height:200px;background:#DDD}   .right{float:right;width:30%;height:80px;background:#DDD}   /*清理浮动代码*/  .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0;overflow:hidden;}   .clearfloat{zoom:1} </style> <div class="div1 clearfloat">   <div class="left">Left</div>   <div class="right">Right</div> </div> <div class="div2"> div2 </div> 

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点相似，zoom(IE转有属性)可处理ie6,ie7浮动问题 。
优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等） 。
缺点：代码多、不少初学者不了解原理，要两句代码结合使用才能让主流浏览器都支持。
建议：推荐使用，建议定义公共类，以减少CSS代码。

4.给父级div定义：overflow:hidden

<style type="text/css">   .div1{background:#000080;border:1px solid red;/*处理代码*/width:98%;overflow:hidden}   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}   .left{float:left;width:20%;height:200px;background:#DDD}   .right{float:right;width:30%;height:80px;background:#DDD} </style> <div class="div1">   <div class="left">Left</div>   <div class="right">Right</div> </div> <div class="div2">div2</div> 

原理：必需定义width或者zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。
优点：简单、代码少、浏览器支持好。
缺点：不能和position配合使用，由于超出的尺寸的会被隐藏。
建议：只推荐没有使用position或者对overflow:hidden了解比较深的朋友使用。

5.父级div定义：overflow:auto

<style type="text/css">   .div1{background:#000080;border:1px solid red;/*处理代码*/width:98%;overflow:auto}   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}   .left{float:left;width:20%;height:200px;background:#DDD}   .right{float:right;width:30%;height:80px;background:#DDD} </style> <div class="div1">   <div class="left">Left</div>   <div class="right">Right</div> </div> <div class="div2">div2</div> 

原理：必需定义width或者zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度。
优点：简单、代码少、浏览器支持好。
缺点：内部宽高超过父级div时，会出现滚动条。
建议：不推荐使用，假如你需要出现滚动条或者者确保你的代码不会出现滚动条就使用吧。

6.父级div也一起浮动

<style type="text/css">   .div1{background:#000080;border:1px solid red;/*处理代码*/width:98%;margin-bottom:10px;float:left}   .div2{background:#800080;border:1px solid red;height:100px;width:98%;/*处理代码*/clear:both}   .left{float:left;width:20%;height:200px;background:#DDD}   .right{float:right;width:30%;height:80px;background:#DDD} </style> <div class="div1">   <div class="left">Left</div>   <div class="right">Right</div> </div> <div class="div2"> div2 </div>

原理：所有代码一起浮动，就变成了一个整体。
优点：没有优点。
缺点：会产生新的浮动问题。
建议：不推荐使用，只作理解。

7.父级div定 display:table。

<style type="text/css">   .div1{background:#000080;border:1px solid red;/*处理代码*/width:98%;display:table;margin-bottom:10px;}   .div2{background:#800080;border:1px solid red;height:100px;width:98%;}   .left{float:left;width:20%;height:200px;background:#DDD}   .right{float:right;width:30%;height:80px;background:#DDD} </style> <div class="div1">   <div class="left">Left</div>   <div class="right">Right</div> </div> <div class="div2"> div2 </div> 

原理：将div属性变成表格。
优点：没有优点。
缺点：会产生新的未知问题。
建议：不推荐使用，只作理解。

8.结尾处加 br标签 clear:both

<style type="text/css">   .div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}   .div2{background:#800080;border:1px solid red;height:100px}   .left{float:left;width:20%;height:200px;background:#DDD}   .right{float:right;width:30%;height:80px;background:#DDD}   .clearfloat{clear:both} </style> <div class="div1">   <div class="left">Left</div>   <div class="right">Right</div> <br class="clearfloat" /> </div> <div class="div2"> div2 </div> 

原理：父级div定义zoom:1来处理IE浮动问题，结尾处加 br标签 clear:both。
建议：不推荐使用，只作理解。

七、visibility

visibility:hidden/visible;隐藏/可见；

visibility：hidden;和display：none;的相同点：都是隐藏显示区域。

visibility:hidden;和display:none;的区别：

visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失不显示，也不再占用位置。

visibility、display、opacity的区别：

visibility：hidden;隐藏占位。

display：none;隐藏不占位。

opacity：0;隐藏占位。

八、伪对象（伪元素）选择符

image

1、::after

与content属性一起使用，定义在对象内最后的内容。

语法：

选择符：:after{content:”文字”;}

如：div::after{content:”文本内容”;}

选择符：:after{content:url(图片路径)；}可以引入图片

如：div::after{content:url(logo.jpg);}

2、::before

与content属性一起使用，定义在对象前的内容。

选择符：:before{content:”文字”;}

如：div::before{content:”在其前放内容”;}

转换为块元素的时候可以加宽高、margin、padding、定位等属性。

3、::first-letter

定义对象内第一个字符的样式。

说明： *该伪元素只能用于块级元素。

4、::first-line

定义对象内第一行文本的样式。

说明： *该伪元素只能用于块级元素。

first-letter和first-line只能改变字体大小、颜色、背景色，不能加宽高。

first-letter优先级高于first-line。

5、::selection

定义被选中的样式。

ie6以下版本浏览器不支持伪对象选择符。

九、自适应窗口(一屏页面的书写)

元素宽高度自适应窗口高度

设置方法：html,body{width:100%;height:100%;}