09、HTML&CSS-自适应

每天一句: 先给予，然后你才会有收获。

一、过滤器

• 下划线属性过滤器(过滤IE6和其他标准浏览器的)
  当一个属性前面添加一个下划线后，由于符合标准的浏览器不能识别带下划线的属性而忽略了这个声明，但是在IE6以及更低版本浏览器中是可以继续使用这种声明;

    语法: 
      选择符{ _属性: 属性值; }

• !important关键字过滤器
  它所表示附加的声明具有最高优先级的意思。但由于IE6以及更低版本不能识别它们，可以利用IE6的这个BUG作为过滤器来兼容IE6和其他标准浏览器;

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

二、宽高自适应

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应;
元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示;

• 宽度自适应

  元素宽度设置为100%（块元素宽度默认为100%）

• 高度自适应

  元素{height:auto;}   // 高度默认就是auto

• 元素具备最小高度的自适应

方法1: 
      min-height:value;  
       _height:value;
方法2: 
      因为IE6不识别min-height，第二个height的时候读到的是auto，第三个会覆盖掉第二个的属性): 建议使用
      min-height:value;  
      height:auto!important;  
      height:value;

  说明：
      height属性在IE6里就类似min-height作用
      min-height（最小高度）
      max-height(最大高度)
      min-width(最小宽度)
      max-width(最大宽度)
       注：IE6及以下版本不识别该组属性。

三、伪对象选择符

• :after:与content属性一起使用，定义在对象后的内容

  div:after{content:url(logo.jpg);}
  div:after{content:"文本内容";}

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

  div:before{content:"在其前放内容";}

• :first-letter: 指定元素第一个字母的样式

  说明: 该伪元素只能用于块级元素

四、高度塌陷

问题描述: 在一个大盒子.main中，分别装着.left和.right，main元素的高度，是可以通过left和right元素来确定高度的，但是由于left和right都写了浮动，从而导致main高度不存在问题;即是父元素不写高度，子元素写了浮动后，父元素会发生高度塌陷;

• 方法一: 给父元素添加声明: overflow:hidden;(一般都会加上宽度，如果没有添加宽度，在IE6宽度就会出现问题)；
• 方法二: 在浮动元素下方，添加空的div，并且给该元素添加声明: clear:both; height:0; overflow:hidden;
• 方法三: (万能清除浮动，比起上面两种方法好，不会引发其他问题，最好也是要加上宽度，不然IE6宽度会出现问题)

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

五、其他

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

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