面试第二天,貌似已经习惯了记下笔试题目,然后去温习自己不懂的地方。就当面试,是一个不断温习的过程,不断进步的过程。
1、div2放在div1中,需要通过CSS将div2放置于div1的右下角
<div id="div1">
<div id="div2"></div>
</div>
当时想到的是用margin去控制,但是想到没有宽度和高度,故而想到了定位,这个题目很狡猾,它从字面上没提到定位二字。所以,我在div2中写的是position:relative;bottom:0;right:0;没细想,事实上这句话是有问题的,因为我写的relative,div1是父元素,并没有定位,所以就算是相对定位,也依旧是左上角。正确的应该是这样:
<style> #div1{border:1px solid #ccc; 500px; height:200px; position:relative;} #div2{border:1px solid #663399; 198px; height:100px; position:absolute;bottom:0; right:0;} </style> <div id="div1"> <div id="div2"></div> </div>
2、ie中超过300px的文字就显示省略号
看到这个题目时,傻眼了,因为我脑子里深知有个css的属性来控制它的,但是总也想不起来。好吧,只能写了短点儿的js。好吧,现在还是好好回忆下真正的答案。
<style> span{ 200px; display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } </style> <div> <span>CSS实现文字超出宽度显示省略号</span> </div>
3、用js或者jq写出选项卡的实现(无需写css)
<div class="a" id="a">
<ul class="b" id="b">
<li class="cur">切换一</li>
<li>切换二</li>
<li>切换三</li>
</ul>
<ul>
<li class="active">内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
</div>
4、三种浏览器兼容性bug及其解决方案?
5、三种清除浮动的方法