前端面试题总结整理，css第一篇（主要讲解元素隐藏，清除浮动和display特性）！

1. css隐藏元素的方法：

---

• opacity:元素的不透明级别，取值.0~1.0。在取值为.0即完全透明，从视觉上隐藏了，但是依然占据自己的位置并对网页布局起作用，也会响应用户交互。
• Visibility:使元素不可见，取值有

1. collapse[kəˈlæps]:当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用.
2. hidden:元素是不可见的,和opacity唯一的区别是不会响应用户交互的！

• display:设置为“none”，可以说是彻底的消失，用户交互操作不生效，客户端也不能读取到！
• position: 通过设置 absolute来实现，代码如下：

.hide{
        position: absolute;
        left: -9999px;
        top: -9999px;
}

---

总结：如果有一个元素想要交互和不影响布局兼得，因为opacity可以响应交互，但会占据位置，影响布局；visibility既不响应交互，也影响布局；display虽不占据位置了，影响布局，但是不能响应交互。所以可以选择上面的position实现，代码可作为参考！

2. CSS清除浮动的几种方法和优缺点？

---

为何？

首先我们要知道为什么要清除浮动，也就是说什么情况下要清除浮动所带来的布局影响：

1) 父元素没有定义高度，那么子元素浮动了，父元素就会发生高度坍塌。

2) 块状元素，会钻进浮动元素的下面，被浮动元素所覆盖

3) 行内元素，例如文字， 则会环绕在浮动元素的周围，为浮动元素留出空间

---

方法

• 使用带有clear属性的空元素：在浮动元素下方添加空元素

{clear: both; height: 0; overflow: hidden;}

• 给浮动元素的父元素设置高度

缺点：在浮动元素高度不确定的时候不适用

• 以浮制浮（父级同时浮动）

缺点：需要给每个浮动元素父级添加浮动，浮动多了容易出现问题

• 父级设置成inline-block

缺点：父级的margin左右auto失效，无法使用margin: 0 auto;居中了

• 给父级添加overflow:hidden 清浮动方法,出发父级元素BFC

问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；

{zoom: 1;}

• 万能清除法 after伪类 清浮动（现在主流方法，推荐使用）

.选择符：after{
                  content： ”“；
                  height：0；
                  clear: both ;
                  display: block;
                  overflow: hidden;
                  visibility:hidden;
}

同时为了兼容 IE6，7 同样需要配合zoom使用例如：

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

需要注意的

after伪类： 元素内部末尾添加内容；
:after{content"添加的内容";} IE6，7下不兼容
zoom 缩放
a、触发 IE下 haslayout，使元素根据自身内容计算宽高。
b、FF 不支持；

总结：上面几种方法中，对父元素进行设置都是解决父元素高度坍塌的问题，比如 父元素设置float; overflow：hidden; display: inline-clock都是为了触发父元素的BFC，因为BFC有条规则是: 当计算一个为BFC元素的高度时，如果该元素包含有 浮动的子元素也 参与计算的。所以就有了这样的方法了！

3. display你所不知道的知识

• 取值

inline-block: 默认宽度为内容宽度，可以设置宽高，同行显示（这点是最重要的，也是block为何设置为inline-block所需要的特性！）
table: 参与块格式化上下文，大体同 block。
table-cell:让标签元素以表格单元格的形式呈现，类似于td标签。
作用：

• 让大小不固定元素垂直居中,注意:是设置包裹父元素的属性，如下：
  {display: table-cell; text-align: center; vertical-margin: middle;}
• 创建等高布局，子元素设置display: table-cell;包裹元素diaplay: table-row,如下
  HTML代码：

CSS代码：

  .list_row{display:table-row;}
  .list_cell{display:table-cell; width:30%; padding:1.6%; background-color:#f5f5f5;}
  /*中间一个元素背景淡蓝，有别于两边的淡灰色*/
  .list_center{background-color:#f0f3f9;}