面试题目（2）

     面试第二天，貌似已经习惯了记下笔试题目，然后去温习自己不懂的地方。就当面试，是一个不断温习的过程，不断进步的过程。

     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; width:500px; height:200px; position:relative;}
    #div2{border:1px solid #663399; width: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{
    width: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、三种清除浮动的方法

 

 

转载于:https://www.cnblogs.com/wanliyuan/p/3624403.html