1. css隐藏元素的方法：
- opacity:元素的不透明级别，取值.0~1.0。在取值为.0即完全透明，从视觉上隐藏了，但是依然占据自己的位置并对网页布局起作用，也会响应用户交互。
- Visibility:使元素不可见，取值有
- collapse[kəˈlæps]:当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用.
- 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代码：<div class="list_row"> <div class="list_cell"></div> <div class="list_cell"></div> <div class="list_cell"></div> </div>
CSS代码：
.list_row{display:table-row;} .list_cell{display:table-cell; width:30%; padding:1.6%; background-color:#f5f5f5;} /*中间一个元素背景淡蓝，有别于两边的淡灰色*/ .list_center{background-color:#f0f3f9;}
网友评论