CSS常见问题的解决办法

一、隐藏元素

• opacity： 0；占据空间，但是可以交互；
• visibility: hidden；占据空间，也不能交互；
• overflow：hidden；只隐藏元素溢出的部分；
• display：none；元素从文档流中消失，既不占据空间也不交互，还可能影响布局；
• z-index：-9999；放在最底层，被覆盖掉，看起来是隐藏了；
• transform：scal（0，0）；平面交换，将元素缩小为0，占据空间，也不能交互；
• position：absolute；将元素移到可视区外部

二、清除浮动

• 父级div定义height
• 结尾处加空标签clear: both;
• 父级div定义伪类：after（IE8以上和非IE浏览器支持）和zoom（IE浏览器专属）
• 父级div定义overflow:hidden

  .clearfix::after,.clearfix::before{
    content: "";
    display: block;
    clear: both;
  }
  .box{
    *zoom: 1;
  }

  .clearfix::after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
  }
  .clearfix{
     *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
  }

三、text-align: center和margin：0 auto的区别

1. text-align：设置文本内容的对齐方式（包括其子孙的文本）
2. margin：设置元素的对齐方式，只适用于水平边距，不适合浮动和行内元素（不包括其子孙）（如果该元素没有设置宽度，那么auto对块级元素也是无效的）