1.写一种清除浮动的方法（在不添加任何语义标签的前提下）
答：给当前需要清除浮动的元素，即父级元素里面加上一个“clearfix”的标签，例如：
<div id="div-need-clear" class="clearfix">
在css里面clearfix的定义如下：
.clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; }
1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
4）通过 content:"."生成内容作为最后一个元素，有些版本可能content 里面内容为空,不推荐这样做,firefox直到7.0 content:”" 仍然会产生额外的空隙；
5）zoom：1 触发IE hasLayout。
通过分析发现，除了clear：both用来清除浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
4）通过 content:"."生成内容作为最后一个元素，有些版本可能content 里面内容为空,不推荐这样做,firefox直到7.0 content:”" 仍然会产生额外的空隙；
5）zoom：1 触发IE hasLayout。
通过分析发现，除了clear：both用来清除浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。
2.CSS优先级是怎样判断的
|
通配 |
0000 |
伪类 |
0010 |
|
标签 |
0001 |
伪元素(after/b/f-line/f-letter) |
0001 |
|
类 |
0010 |
ID |
0100 |
|
属性 |
0010 |
important |
1000 |
要注意的是，以上数字为256进制，256个类选择器相当一个ID选择器，如果权值完全相同时，后面会覆盖前面。行内样式优先级低于!important而高于其他。
3.font-family:Tahoma;font-size:14px;line-height:22px;font-weight:bold;写出CSS的缩写
答： font:14px/22px bold Tahoma;
4.CSS怎样定义才能使一个没有定义宽度的div水平居中
父容器container加css属性 text-align:center;
子容器center加css属性display:inline-block;
.center{_display:inline;} 为针对ie6的hack，针对ie6前面的display:inline-block;的作用是在ie下触发元素的layout，使其haslayout。
.center{_display:inline;} 为针对ie6的hack，针对ie6前面的display:inline-block;的作用是在ie下触发元素的layout，使其haslayout。
补充：怎样定义一个没有定义高度的div垂直居中
无固定高度的div垂直居中代码要点：
父容器vc的css属性 display:table;overflow:hidden;
子容器vci的css属性 vertical-align:middle;display:table-cell;
针对ie6的hack，vci容器的 _position:absolute;_top:50%; 和content容器的 _position:relative; _top:-50%;
父容器vc的css属性 display:table;overflow:hidden;
子容器vci的css属性 vertical-align:middle;display:table-cell;
针对ie6的hack，vci容器的 _position:absolute;_top:50%; 和content容器的 _position:relative; _top:-50%;
5.说说CSS Sprite的优缺点
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
优点：
1.利用CSS Sprites能很好地减少网页的http请求；
2.CSS Sprites能减少图片的字节；
3.解决了FE在图片命名上的困扰；
4.更换风格方便。
缺点：
1.在图片合并的造成多余的工作量；
2.开发过程中定位的麻烦；
3.修改麻烦，维护复杂
6.说说em和strong标签的语义
em: Indicates emphasis.
strong: Indicates stronger emphasis.
em 表示强调，strong 表示更强烈的强调。言简意赅，表明了 em 和 strong 的命名来历。在浏览器中，em 默认用斜体表示，strong 用粗体表示。这是第一个层次上的区别。
em 是句意强调，加与不加会引起语义变化。
strong 是重要性强调，和局部还是全局无关，局部强调用strong也可以，strong强调的是重要性，不会改变句意。
strong 是重要性强调，和局部还是全局无关，局部强调用strong也可以，strong强调的是重要性，不会改变句意。
7.test a{}和.test .exp{}两种样式写法哪种性能比较好，说明理由
答： 浏览器读取你的选择器，遵循的原则是从选择器的右边到左边读取。换句话说，浏览器读取选择器的顺序是由右到左进行。选择器的最后一部分，也就是选择器的最右边部分被称为“关键选择器”，它将决定你的选择器的效率如何，是高还是低。
选择器有一个固有的效率，从高到低顺序如下：
- id选择器（#myid）
- 类选择器（.myclassname）
- 标签选择器（div,h1,p）
- 相邻选择器（h1+p）
- 子选择器（ul > li）
- 后代选择器（li a）
- 通配符选择器（*）
- 属性选择器（a[rel="external"]）
- 伪类选择器（a:hover,li:nth-child）
上面九种选择器的效率是从高到低排下来的，基中ID选择器的效率是最高，而伪类选择器的效率则是最底。
CSS选择器优化建议：
- 避免普遍规则
- 不要在ID选择器前加标签名或类名
- 不要在类名选择器前加标签名
- 尽可能使用具体的类别
- 避免使用后代选择器
- 标签分类规则中不应该包含一个子选择器
- 子选择器的问题
- 借助相关继承关系
- 使用范围内的样式表
8.javascript中怎么给一个div定义margin-top:30px样式
首先给div定义一个id,然后JS如下：
document.getElementById("div1").style.marginTop="30px";
9.下面代码运行后，alert弹出的值为多少？
HTML部分：(用了smarty模板）
13.用css实现鼠标悬浮在a元素上1秒后文字颜色变红
14.如何实现仅加载可视区域内的图片
lazyload;
15.用json表示一个数组，每个数组元素是一个对象，每个对象有两个属性
16.用json表示一个树结构（递归）
17.http请求状态码表示的意义
18.form标签里还有哪些属性
19.表单中有一些checkbox该如何提交值，name一样吗
function(){
var a=[1,2,3];
var b=a;
a[0]=99;
alert(b);
})();
var a=[1,2,3];
var b=a;
a[0]=99;
alert(b);
})();
答：[99,2,3]
10.写一个简单的选项卡js
10.写一个简单的选项卡js
显示部分：渐入渐出切换，包含选项卡序号和对应标题
HTML部分：(用了smarty模板）
<div class="content-carousel " id="content-carousel"> <div class="content-carousel-img"> <%foreach $carousel as $i => $item%> <img src="<%$item.url%>" <%if $i === 0%>class="active"<%/if%>/> <%/foreach%> </div> <div class="content-carousel-title"> <%foreach $carousel as $i => $item%> <span <%if $i === 0%>class="active"<%/if%>><%$item.title%></span> <%/foreach%> </div> <div class="content-carousel-count"> <%foreach $carousel as $i => $item%> <span <%if $i === 0%>class="active"<%/if%>><%$i + 1%></span> <%/foreach%> </div> </div>
css部分：用到LESS
.content-carousel {
675px;
height: 410px;
float: left;
display: inline;
position: relative;
.content-carousel-img {
675px;
height: 410px;
img {
display: none;
position: absolute;
left: 10px;
top: 10px;
675px;
height: 410px;
&.active {
display: block;
}
}
}
.content-carousel-title {
background-color: rgba(0, 0, 0, 0.3);
color: #cccccc;
font-weight: bold;
line-height: 20px;
position: absolute;
left: 10px;
bottom: 10px;
padding: 10px;
655px;
font-size: 14px;
span {
display: none;
&.active {
display: inline;
}
}
}
.content-carousel-count {
position: absolute;
right: 15px;
bottom: 20px;
span {
float: left;
display: inline;
font-size: 10px;
line-height: 15px;
15px;
margin: 0 2px;
background-color: #000000;
color: #cccccc;
text-align: center;
&.active {
background-color: #FF3300;
color: white;
}
}
}
}
js部分：
// 轮播图片 function carousel() { var current = 0; var carousel = $('#content-carousel').children('div'); var carousel_img = $(carousel[0]).children('img'); var carousel_title = $(carousel[1]).children('span'); var carousel_count = $(carousel[2]).children('span'); var total = carousel_count.length; carousel_count.each(function (i) { $(this).click(function () { carousel_img.addClass('active').fadeOut(0).eq(i).fadeIn(500); carousel_title.removeClass('active').eq(i).addClass('active'); carousel_count.removeClass('active').eq(i).addClass('active'); }); }); setInterval(function () { current = (current + 1) % total; carousel_img.addClass('active').fadeOut(0).eq(current).fadeIn(500); carousel_title.removeClass('active').eq(current).addClass('active'); carousel_count.removeClass('active').eq(current).addClass('active'); }, 3000); }
11.页面上有些图片需要放到最后加载，请基于jquery写一段大致的实现方法
一个基于Lazy Load, 延迟加载图片的 jQuery 插件，Lazy Load 依赖于 jQuery. 可以将下列代码加入页面 head 区域:
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script>
必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片. 并且需要将真实图片的 URL 设置到 data-original 属性. 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.
代码如下：
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
处理图片代码如下：
$("img.lazy").lazyload();
12.在a页面点击一个连接b.html后如何将页面以无刷新的方式切换到b，且url为b.html
答：传统的ajax有如下的问题：可以无刷新改变页面内容，但无法改变页面URL，为了更好的可访问性，内容发生改变后，通常改变URL的hash
HTML5里引用了新的API，history.pushState和history.replaceState，可以做到无刷新改变页面URL的html可以替换，这里实现方案是：
HTML5里引用了新的API，history.pushState和history.replaceState，可以做到无刷新改变页面URL的html可以替换，这里实现方案是：
通过ajax获取b.html，然后document.documentElement.innerHTML = response
最后：history.replaceState('b.html')
13.用css实现鼠标悬浮在a元素上1秒后文字颜色变红
答:利用css3过渡：
a{
-ms-transition:all 0 ease-in 1s;
-o-transition:all 0 ease-in 1s;
-moz-transition:all 0 ease-in 1s;
-webkit-transition:all 0 ease-in 1s;
transition:all 0 ease-in 1s;
}
a:hover{
color:red;
}
14.如何实现仅加载可视区域内的图片
lazyload;
15.用json表示一个数组，每个数组元素是一个对象，每个对象有两个属性
[ { "name": "qingqing", "age": 22 }, { "name": "tianxia", "age": 24 } ]
16.用json表示一个树结构（递归）
var x = { left: { left: { value: 31 }, right: { value: 32 } }, right: { value: 30 } };
17.http请求状态码表示的意义
|
1xx:请求已被接受，需要继续处理，临时响应 |
100 continue |
||||
|
2xx: 代表请求已成功被服务器接收、理解、接受 |
200OK 201 Created 206Partial Content |
||||
|
3xx:重定向 |
301 moved permanently |
302 found |
304 not modified |
||
|
4xx: 错误的客户端请求 |
400 bad request |
403 forbidden |
404 not found |
||
|
5xx: 服务端错误 |
500 Internet server Error |
502 bad Gateway |
|||
18.form标签里还有哪些属性
form,表单，表单，用来向服务器提交信息，实现浏览者与服务器的交互。
比如我们常见到代码：里面就涉及到action和method属性。
<form action="form_action.asp" method="get"> <p>First name: <input type="text" name="fname" /></p> <p>Last name: <input type="text" name="lname" /></p> <input type="submit" value="Submit" /> </form>
这里参考w3school关于form的属性列表：
19.表单中有一些checkbox该如何提交值，name一样吗
答：form.submit()