标签：
下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。请使用 css3 中的功能实现它们的布局。 
已知 html 结构是：
<div>
<div>column 1</div>
<div>column 2</div>
<div>column 3</div>
</div>
答案：
<style>
div.divwrapper
{
width:100%;
background-color: #00ff00;
}
div.column1
{
width:200px;
background-color:#999999;
float:left;
border:solid #11ff33;
border-bottom-width: 15px;
border-top-width: 15px;
border-left-width: 15px;
border-right-width:15px;
}
div.column2
{
width:70px;
background-color:#999999;
float:left;
border:solid #11ff33;
border-top-width:15px;
border-bottom-width:15px;
border-right-width:15px;
}
div.column3
{
width:70px;
background-color:#999999;
float:left;
border:solid #11ff33;
border-top-width:15px;
border-bottom-width:15px;
border-right-width:15px;
}
</style>
<div class="divwrapper">
<div class="column1">column 1</div>
<div class="column2">column 2</div>
<div class="column3">column 3</div>
</div>
有两个盒子 A、B，B 在 A 盒子中，它们的 css 是这么定义的：
A {
position:relative;
width:500px;
height: 500px;
background-color:green;
}
B {
position:absolute;
max-width:300px;
max-height:300px;
background-color:blue;
}
如何实现 B 在 A 中水平方向和垂直方向居中
经常在SNS中看到如下图所示的功能：
请通过代码完成它，它至少应该：
1. 良好结构、语义化的HTML
2. 兼容主流的浏览器；
3. JS应该包括： 1) 实时计数功能 2)校验字数限制 3) 防止重复提交；
4. 如果时间所限，无法100%，但请说明实现方案及思路；
function test() {
var a = 1;
setTimeout(function() {
alert(a);
a = 3;
}, 1000);
a = 2;
setTimeout(function() {
alert(a);
a = 4;
}, 3000);
}
test();
alert(0);
//请注意,代码中有三处alert.他们分别会alert出什么值,时间上的顺序是怎样的?
//请详述得到这个答案的原因,特别是test函数的局部变量a是对运行结果的影响.
当 我 们使用CSS3新属性，比如：box-shadow或者transition时，我们怎么检测浏览器是否支持这些属性？
请设计一个 javascript 函数，该函数接受一个CSS属性名作为参数，并返回一个boolean值，表明浏览器是否支持这个属性。
如果你现在使用的是 Google Chrome 或 Apple Safari，如何让 input 元素在默认情况下显示 “alipay WD Team”，而在光标移入后则显示空白？
alert(Function instanceof Object);
alert(Object instanceof Function);
//现有代码如下：
var foo = 1;
function main(){
alert(foo);
var foo = 2;
alert(this.foo)
this.foo = 3;
}
//1.请给出以下两种方式调用函数时，alert的结果，并说明原因。
var m1 = main();
var m2 = new main();
//2.如果想要var m1 = main()产生的m1和前面的m2完全一致,又该如何改造main函数?
实现如下图所示的布局
要求：
sidebar 固定宽度200px，content和header宽度自适应
当window宽度小于600px时，变成三行布局
默认如下 
宽度小于600px时如下 
下面是html结构：
<div class=‘header‘>
<h1>header</h1>
</div>
<div>sidebar"</h1>
</div>
<div>
<h1>content</h1>
</div>
写一段脚本，实现：当页面上任意一个链接被点击的时候，alert出这个链接在页面上的顺序号，如第一个链接则alert(1), 依次类推；
请用 html5 标准完成以下页面布局（要求完整书写整个页面的html代码，不需要写CSS） 
有一个页面区块如图所示，请用符合语义化的标签书写HTML代码。
在CSS样式中常使用px、em两种长度单位，各有什么优劣，在表现上有什么区别？
(new Date).getTime() 和 +new Date() 都可以取到当前时间戳，它们的实现原理是什么，哪个效率更高？
在tmall.com的某个页面中存在一个id等于J_iframe_taobao的iframe，该iframe的域名是taobao.com。在不考虑IE浏览器的情况下，用最简洁的代码实现页面与该iframe进行双向通信？
...
<iframe id="J_iframe_taobao" src="http://taobao.com/xxx"></iframe>
...
请写一个 getParents 方法让它可以获取某一个 DOM 元素的所有父亲节点。
请写出至少5个html5新增的标签，并说明其语义和应用场景
有哪些前端代码优化/性能优化的方法？
请列举所知道的css选择器，并说明怎么判断优先级？
有一个数组，其中保存的都是小写英文字符串，现在要把它按照除了第一个字母外的字符的字典顺序(字典顺序就是按首字母从a-z顺序排列，如果首字母相同则按第二个字母……)排序，请编写代码：
例：
["abd","cba","ba",]
排序后
["ba","cba","abd"]
1.你了解arguments对象么,它有哪些属性?
2.arguments是数组么?如果不是请写一段代码将其转化为真正的数组,什么情况下需要这么做?
3.arguments有什么特性,可以用这些特性做什么?
请为JavaScript每个Array对象添加一个类似于PHP的shuffle()的方法。
CSS的“伪类”和“伪元素”有什么区别？请举例伪元素的几种应用场景。
页面中有个id为J_banner的区块，请使用CSS实现在普通屏幕上使用图片banner.png为背景，在retina屏幕上显示更高分辨率的图片banner_retina.png作为背景
<div id="J_banner"> ... </div>
下面是一段html代码，展示效果如图A所示。请给出一段css，使这段代码达到图B的展示效果。 
<ul>
<li>
<a href="#"><img width="100" height="100" src="a.jpg /></a>
<p>文字一</p>
</li>
<li>
<a href="#"><img width="100" height="100" src="a.jpg" /></a>
<p>文字二</p>
</li>
</ul>
<ul>
<li>文字三</li>
<li>文字四</li>
<li>文字五</li>
<li>文字六</li>
</ul>
要求：
1.不允许修改html结构；
2.css不必考虑浏览器默认样式的因素，布局正确即可；
3.不要求严格对齐，如有需要，元素尺寸可自定义。
var a = [-3,-1,0,1,3,5,7,9], b = [-4,-2,0,2,3,4,5,6,7,8];
//返回一个合并过的数组[-4,-3,-2,-1,0,0,1,2,3,3,4,5,5,6,7,7,8,9]
//请补全下面的函数，仅当p为数组时返回true.
//可给出多种实现方式,每种实现方式不一定完美,如果不完美,需要说明每种实现的限制
function isArray(p) {
//你的代码在这里
}
<p>1</p>
<p>2</p>
<p>3</p>
请编写一段css，让数字1颜色变蓝
请让页面中的一个元素（10px*10px）围绕坐标(200, 300) 做圆周运动
用HTML实现下面表格的结构： 
‘data-’属性的作用是什么？
请列举CSS中用于隐藏元素的两个属性？两者的差异？
display:none 和 visibility: hidden; 前者不占位，后者占位。
在 jquery 中，选择器使用的是sizzle，sizzle的基本原理是”从后往前查找”，比如选择器“ .a > .b > .c”，是先查找”.c”而不是”.a”。请解释为什么大部分情况下“从后往前”比“从前往后”查找速度更快
//现有代码如下:
var a = 1;
var obj = { b : 2 };
var fn = function() {};
fn.c = 3;
function test(x, y, z) {
x = 4;
y.b = 5;
z.c = 6;
return z;
}
test(a, obj, fn);
alert(a + obj.b + fn.c);
//这段代码能够正常运行么?如果不能正常运行,请说明原因.
//如果可以运行,最后一行alert的值是多少,并请说明原因.
请编写一段程序，将一个对象和它直接、间接引用的所有对象的属性字符串放入一个数组。
如
var o = {a:1,{b:2,c:{d:1}}}
这里o经过处理后，应该得到
["a","b","c","d"]
请举两个例子，解释一下strong和em标签用法有何不同？
请用实现一个最简单的输入框提示功能 
要求：
1.输入框内默认显示提示文案，当用户点击输入框后，光标定位到输入框最前，并继续显示提示文案，当用户输入后替换默认提示文案，当用户清空输入框后从新显示默认提示文案
2.要求支持ie（6，7，8，9），firefox，chrome等浏览器
3.请写出html结构，javascript代码逻辑部分写出实现思路即可（有时间能写出代码者最佳，可以使用js库）
标签：
原文地址：http://www.cnblogs.com/qilipeach/p/4381828.html
