1.在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存？
（1）DNS缓存
（2）cdn缓存
（3）浏览器缓存
（4）服务器缓存
2.一个页面上有大量的图片（大型电商网站），加载很慢，有哪些办法优化这些图片的加载，给用户更好的体验
图片懒加载，在页面上非可视区域添加一个滚动条事件，判断图片位置与浏览器顶端的距离和窗口的距离，如果前者小于后者，优先加载
如果为幻灯片，相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载
如果图片为css图片，可以使用Iconfont、Base64等技术
加载大图的时候，我们可以先显示模糊的缩略图，等到大图加载完了，再把缩略图替换掉，这样填补了图片加载期间的空白时间。
如果图片展示区域小于图片的真实大小，则在服务器端根据业务需要先进行图片压缩，图片压缩后大小与展示一致
3.如何理解HTML结构的语义化
去掉或样式丢失的时候能让页面呈现清晰地结构。
语义化的好处：
（1）当页面样式加载失败时能够让页面呈现清晰的结构
（2）有利于SEO优化，利于被搜索引擎收录（更便于被搜索引擎的爬虫程序识别，爬虫依赖于标签来确定上下文和各个关键字的权重）
（3）便于项目的开发和维护，使html更具有可读性，便于其他设备解析
4.有哪些方式可以对一个dom设置它的css样式
①外部样式表 引入一个外部css文件
②内部样式表 将css代码放在<head>标签内部
③内联样式 将css样式直接定义在HTML元素内部
5.css都有哪些选择器？哪些属性可以继承？优先级算法如何计算？css3新增伪类有哪些
①派生选择器（用HTML标签申明）
②id选择器（用dom的id申明）
③类选择器（用一个样式类名申明）
④后代选择器
⑤群组选择器
⑥通配符选择器（*）
优先级（权重）
标签选择器权重 1
类选择器权重 10
id选择器权重 100
可继承： font-size font-family color, ul，li,dl ,dd,dt
不可继承 ：border padding margin width height ;
优先级就近原则，样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important 比 内联优先级高
CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
6.css中可以通过哪些属性定义使得一个dom元素不显示在浏览器可视范围内
①display：none
②visibility：hidden
③设置宽高为0
④设置透明度为0
⑤设置z-index位置在-1000
7.超链接访问过后hover样式就不出现的问题是什么？如何解决
被惦记访问过的超链接样式不再具有hover和active了，解决方法是改变css属性的排列顺序（link visited hover active）
8.什么是Css Hack?IE6,7,8的hack分别是什么？
针对不同的浏览器写不同的css code的过程就是css hack
ie6 _background-color：orange；
ie7 +background-color：orange；
ie8 background-color：orange；
9.用css写一个简单的幻灯片效果
<head>
<title></title>
<style type="text/css">
.myDiv {
width: 600px;
height: 400px;
margin: 20px auto;
background-size: cover;
background-position: center;
-webkit-animation-name: 'loop';
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes "loop"{
0% {background: url(http://img5.duitang.com/uploads/blog/201408/12/20140812150016_8NMUU.jpeg) no-repeat;}
25% {background: url(http://pic29.nipic.com/20130518/9908282_142904524164_2.jpg) no-repeat;}
50% {background: url(http://uploadfile.huiyi8.com/2014/0605/20140605114503719.jpg) no-repeat;}
75% {background: url(http://img3.redocn.com/20100322/Redocn_2010032112222793.jpg) no-repeat;}
100% {background: url(http://uploadfile.huiyi8.com/2014/0605/20140605114447934.jpg) no-repeat;}
}
</style>
</head>
<body>
<div class="myDiv"></div>
</body>
10.行内元素和块级元素，空(void)元素的区别？行内元素的padding和margin可设置吗？
块级元素特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示；宽度，高度，内边距和外边距都可控制
块级元素：div p h1 h2 h3 h4 form ul
内联（行内元素）元素特性：
和相邻的内联元素在同一行；只有左右的padding和margin可设置
行内元素: a b br i span input select
默认的inline-block（内联块元素）元素（拥有内在尺寸，可设置宽高，但不会自动换行）
例如：<input> <button> <img> <textarea> <label>
空(void)元素：<br><hr><img><input><link><meta>
网友评论