thingir

css十道常见面试题

1、  如何定义高度很小的容器?

正解:在IE6下无法定义小高度的容器,是因为有一个默认的行高。

列举2种解决方案:overflow:hidden或font-size:容器高度px

 

2、  图片下方出现几像素的空白间隙?

正解:将img定义为display:block,或定义父容器为font-size:0

 

3、  IE6双倍margin的BUG?

正解:display:inline

 

4、  如何让层在falsh上显示?

正解:在falsh上添加<param name="mode" value="transparent"/>

 

5、  如何使得文字不换行?

正解:定义包含文字的容器为:width:xxx;white-space:nowrap;

 

6、  ie中如何让超出宽度的文字显示为省略号?

正解:定义容器为overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;

 

7、  如何使得英文单词不发生词内断行?

正解:word-wrap:break-word;

 

8、  如何区别display:none与visibility:hidden?

正解:相同的是display:none与visibility:hidden都可以用来隐藏某个元素;不同的是display:none在隐藏元素的时候,将其占位空间也去掉;而visibility:hidden只是隐藏了内容而已,其占位空间仍然保留。

 

9、如何实现ie6下的position:fixed?

正解:html{_overflow:hidden;}

body{_overflow:auto;height:100%;}

.fixed{position:fixed;_position:absolute;left:0;top:0;padding:10px;background:#000;color:#fff;}

 

9、  如何让min-height兼容ie6?

正解:.min-height{min-height:100px;_height:100px;}  <divclassdivclass="min-height">我是兼容的min-height</div>

 

10、已知高度的容器如何在页面中水平垂直居中?

正解:

示例:<style type="text/css">

#box{width:200px; height:200px; background:#f00; position:absolute; left:50%; top:50%; margin:-100px 0 0 -100px;}

</style>

<div id="box"></div>

来源:谈笑涧

评论