一、过滤器

  • 下划线属性过滤器(过滤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;的区别:


本文由 zyz 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

楼主残忍的关闭了评论