面试问题（。。。不完整）
- 高度跟宽度不定，自适应两栏布局
- 两栏布局，左栏宽度为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循环 跳出循环
7、html5以及css3
8、页面性能优化
