面试问题（。。。不完整）

• 高度跟宽度不定，自适应两栏布局
• 两栏布局，左栏宽度为200，右栏高度跟左栏高度一致
• js插入p元素
• js截取字符串并计算字符串个数
• ajax按钮提交一次后失效并修改当前点击的按钮
• for循环 跳出循环
• html5以及css3
• 页面性能优化

1、高度跟宽度不定，自适应两栏布局

2015年3月 4日 总结：

实现方法：①、overflow: hidden;

②、display: table-cell;

两种方法可能都跟浏览器的BFC有关。

首先，当使用overflow的时候：

.box { width: 600px; background-color: #dcdcdc; }
.cell1 { overflow: hidden; }

<div class="box fix">
        <img class="l p10" src="images/xxx.jpg" width="100">
        <div class="cell1">
            <p class="f14">1977年的今天，28岁的拉齐奥中场球员Luciano Re
                Cecconi和两个朋友走入罗马的一家珠宝店。不知为何，他突然想来个恶搞玩笑。进入珠宝店后他就大喊，"别动！打劫！"他随后、也是最后的两句话是在珠宝店主冲出开枪命中他后说的，"It's a joke！It's
                a Joke！"30分钟后，他死了。
                <span class="g6">//zxx:我xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
            </p>
            <p>It's a joke！It's a JokeIt's a joke！It's a JokeIt's a joke！It's a JokeIt's a joke！It's a JokeIt's a joke！It's a JokeIt's a joke！It's a Joke</p>
            <h3>无处理</h3>
        </div>
    </div>

在浏览器firefox，chrome，ie7+运行正常。（特殊符号xxx不会换行）

在ie6中文字出现环绕，

当为cell添加*display:inline-block；或者*zoom：1触发haslayout，结果为：

其次，当使用table-cell的时候

.cell { display: table-cell;}

firefox效果

chrome，ie8+效果

ie6,7效果

因此使用display: table-cell+display:table-cell

.box { width: 600px; background-color: #dcdcdc; }
.cell1 {display: table-cell;*zoom:1;}
.cell_bk1 { display: table; width: 100%; table-layout: fixed; word-wrap: break-word; }

<div class="box fix">
        <img class="l p10" src="images/xxx.jpg" width="100">
        <div class="cell1">
            <p class="f14 cell_bk1">1977年的今天，28岁的拉齐奥中场球员Luciano Re
                Cecconi和两个朋友走入罗马的一家珠宝店。不知为何，他突然想来个恶搞玩笑。进入珠宝店后他就大喊，"别动！打劫！"他随后、也是最后的两句话是在珠宝店主冲出开枪命中他后说的，"It's a joke！It's
                a Joke！"30分钟后，他死了。
                <span class="g6">//zxx:我xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
            </p>
            <p>It's a joke！It's a JokeIt's a joke！It's a JokeIt's a joke！It's a JokeIt's a joke！It's a JokeIt's a joke！It's a JokeIt's a joke！It's a Joke</p>
            <h3>无处理</h3>
        </div>
    </div>

运行兼容所有浏览器。其中display: table-cell;也可以用overflow:hidden代替。在ie6中需触发haslayout。

综上所述，当不需要考虑ie6效果并且不许考虑特殊字符的换行问题时候可以使用overflow:hidden方法比较简单。

除此，使用方法二。

2、两栏布局，左栏宽度为200，右栏高度跟左栏高度一致

.content{overflow:hidden;}
.left{width:200px;  background:#cad5eb; float:left;}
.right{ margin-left: 210px; background:#f0f3f9;}
.left,.right{ margin-bottom:-3000px; padding-bottom:3000px; }

<div class="content">
        <div class="left">
            左边，无高度属性，自适应于最高一栏的高度<br/>左边，无高度属性，自适应于最高一栏的高度<br/>左边，无高度属性，自适应于最高一栏的高度<br/>左边，无高度属性，自适应于最高一栏的高度<br/>左边，无高度属性，自适应于最高一栏的高度<br/>左边，无高度属性，自适应于最高一栏的高度<br/>
        </div>
        <div class="right">
            右边，无高度属性，自适应于最高一栏的高度
        </div>
    </div>

　　

说明：核心CSS代码部分的3000像素是个可变值，如果您的分栏高度不可能高度超过2000像素，您就可以设为2000像素，如果会超过3000像素，那么您要修改值为4000像素或是更高。
父标签的overflow:hidden属性是必须的，否则会显示溢出的内容。　　

margin负值实现分栏高度显示一致可以说是最好的方法，当然，还有其他一些轻便的替代方法。例如使用min-height属性，IE6不支持min- height但是height会自动撑高，所以min-height + _height的组合也是常用手段之一；另外就是使用背景图片了，利用背景图片的垂直平铺，可以模拟分栏的等高背景效果，但是，此方法对布局宽度有一定的 要求，如果布局宽度改变，背景图片可能也要做一番修改。

3、js插入p元素

<div id="box">
        <p>测试段落一...</p>
        <p>测试段落二...</p>
        <p>测试段落三...</p>
    </div>

window.onload=function(){
       var box=document.getElementById("box");
       var items=document.getElementsByTagName("p");
       for(var i=0;i<items.length;i++) {
           var span = document.createElement("span");
           span.innerHTML = "i am a span";
           insertAfter(span,items[i]);
       }
       function insertAfter(newElement,targetElement){
           var parent=targetElement.parentNode;
           if(parent.lastChild==targetElement){
               parent.appendChild(newElement,targetElement);
           }else{
               parent.insertBefore(newElement,targetElement.nextSibling);
           };
       };
    }

4、js截取字符串并计算字符串个数

var s="ww.mma.cnxxxxxmama.cn......";
var i= s.indexOf("mama.cn"); //14
var k= s.indexOf("mamama.cn");  //-1
alert(i);
alert(k);
var s1="ww.mama.cnxxxxxmama.cn......mama.cn";
var j= s1.split("mama.cn").length-1;
alert(j); //3

5、ajax按钮提交一次后失效并修改当前点击的按钮

6、for循环 跳出循环

详见 break和continue语句

7、html5以及css3

8、页面性能优化