聚美
CSS
2. 请列举几种可以清除浮动的方法(至少两种)
先来说说浮动的原理和清除浮动的原因:浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于(或脱离了)文档中的普通流,当一个元素浮动之后,不会影响到块级框的布局而只会影响行内元素(如 span、a、em)的排列,即行内元素浮动后就会表现得像块级元素一样。当浮动框高度超出包含框的时候,也就会出现包含框不会自动伸高来闭合浮动元素(或者可以称为“高度塌陷”现象)。在实际布局中,往往这并不是我们所希望的,所以需要闭合浮动元素,使其包含框表现出正常的高度。
清除浮动方法:
(1)添加额外(空)标签
通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>
优点:通俗易懂,容易掌握;
缺点:增加无意义的标签,有违结构与表现的分离。
(2)父元素设置 overflow:hidden
通过设置父元素 overflow 值为 hidden;在 IE6 中还需要触发 hasLayout ,例如 zoom:1;
优点:不存在结构和语义化问题,代码量极少;
缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
(3)父元素也设置浮动
优点:不存在结构和语义化问题,代码量极少;
缺点:使得与父元素相邻的元素的布局会受到影响,不可能一直浮动到 body,不推荐使用。
(4)给父元素添加 clearfix 类
由于 IE6-7 不支持:after,使用 zoom:1 触发 hasLayout。
优点:结构和语义化完全正确,代码量居中;
缺点:复用方式不当会造成代码量增加。
clearfix 类代码如下:
//:after 会在元素内容——而不是元素后面插入一个伪素,该规则只添加了一个清除的包含句点作为非浮动元素,注意,:after 不是伪类,而是伪元素
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
// 触发IE6、7下的haslayout
.clearfix {
*zoom: 1;
}
3. display:none 和 visibility:hidden 的区别是什么
相同点:display:none 与 visibility:hidden 都可以用来隐藏某个元素;
不同点:display:none 在隐藏元素的时候,将其占位空间也去掉;而 visibility:hidden 只是隐藏了内容而已,其占位空间仍然保留。
4. 请缩写以下代码:
.box {
background-position: 10px 20px;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: red;
background-image: url(box.png);
}
这个没什么好说的,只要是使用过 css 背景属性的人都知道缩写形式,另外需一提的是 color 属性可放在最前面也可以放在最后面。
.box {
background: red url(box.png) no-repeat 10px 20px fixed;
}