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;}