前端基础面试题（1）
今天在某公司面试，做了笔试题，发现并没有理解题目要考什么，总结一下。
1.一个200*200的div在不同分辨率的屏幕上下左右居中，用css实现。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>一个200*200的div在不同分辨率的屏幕上下左右居中，用css实现。</title> 6 <style> 7 *{ 8 margin:0; 9 padding: 0; 10 } 11 /* 12 * 只是考察了一个定位而已。 13 */ 14 .box{ 15 width: 200px; 16 height: 200px; 17 position: absolute; 18 top: calc(50% - 100px); 19 left:calc(50% - 100px); 20 border: 1px solid red; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="box"></div> 26 </body> 27 </html>
2.写一个左中右布局，占满屏幕，其中左右两块固定宽200，中间自适应宽，要求先加载中间块，写出结构及样式。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 div{ 8 height:50px; 9 } 10 .mid{ 11 background: red; 12 float: left; 13 width: calc(100% - 400px); 14 margin-left: 200px; 15 16 } 17 .left,.right{ 18 background: blue; 19 width: 200px; 20 float: left; 21 } 22 .left{ 23 position: absolute; 24 } 25 </style> 26 </head> 27 <body> 28 <!-- 29 写一个左中右布局，占满屏幕，其中左右两块固定宽200，中间自适应宽，要求先加载中间块，写出结构及样式。 30 --> 31 32 <div class="mid"></div> 33 <div class="left"></div> 34 <div class="right"></div> 35 </body> 36 </html>
3.清除浮动的几种方式：
参考地址：http://www.cnblogs.com/AnotherLife/p/5800751.html，这里讲的很详细。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>清除浮动的几种方式</title> 6 <style> 7 /*基础样式*/ 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 .box{ 13 width: 100%; 14 /*height: 200px;*/ 15 border: 1px solid red; 16 margin-top: 200px; 17 /*padding-top: 25px;*/ 18 } 19 .s1,.s2,.s3{ 20 width: 150px; 21 height: 150px; 22 float: left; 23 border:1px solid blue; 24 } 25 26 27 /*添加空div*/ 28 .clearfloat1{ 29 clear:both; 30 } 31 32 /*父级添加伪元素*/ 33 .clearfloat2:after{ 34 display: block; 35 content: ''; 36 clear:both; 37 height: 0; 38 visibility: hidden; 39 } 40 .clearfloat2{ 41 zoom: 1; 42 } 43 44 .clearfloat3{ 45 overflow: hidden; 46 } 47 </style> 48 </head> 49 <body> 50 <!--为什么要清除浮动？--> 51 <!--当浮动元素组的父元素没有高度的时候： 52 浮动元素的浮动： 53 1.不会撑开父盒子； 54 2.在谷歌，火狐，新版IE上，margin，padding不受影响。 55 好像，就这一个副作用。但是会影响周边元素的布局。 56 --> 57 58 <!-- 59 几个方法： 60 1.高度固定的时候，手动给父盒子添加高度。 61 2.添加一个空div，clear：both； 62 3.伪元素，clear：both；zoom：1； 63 4.父级设置overflow：hidden 64 ... 65 66 比较： 67 兼容性和性能最好的是伪元素清除浮动。 68 69 我比较常用的是overflow：hidden; 70 使用overflow:hidden的时候，父级必须设置宽度。 71 72 --> 73 74 <!--浮动的时候--> 75 <div class="box"> 76 77 <div class="s1">浮动了 </div> 78 <div class="s2"></div> 79 <div class="s3"></div> 80 </div> 81 82 83 84 <!--添加空div--> 85 <div class="box"> 86 <div class="s1">添加空div</div> 87 <div class="s2"></div> 88 <div class="s3"></div> 89 <div class="clearfloat1"></div> 90 </div> 91 92 <!--伪元素清除--> 93 <div class="box clearfloat2"> 94 <div class="s1">伪元素清除</div> 95 <div class="s2"></div> 96 <div class="s3"></div> 97 </div> 98 99 <!--父级设置overflow：hidden--> 100 <div class="box clearfloat3"> 101 <div class="s1">父级设置overflow：hidden</div> 102 <div class="s2"></div> 103 <div class="s3"></div> 104 </div> 105 </body> 106 </html>
4.css Sprites 如何使用。（这个东西知道有这么回事，但是一次也没用过，参考百度搜索）
1 CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中， 2 再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位， 3 background-position可以用数字精确的定位出背景图片的位置。 4 5 6 优点 7 1.利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因； 8 2.CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。 9 3.解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。 10 4.更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。 11 缺点 ： 12 1.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景； 13 这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂； 14 2.CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活， 15 没什么难度，但是很繁琐；幸好腾讯的鬼哥用ADOBE AIR开发了一个CSS Sprites 样式生成工具，虽然还有一些使用上的不灵活， 16 但是已经比photoshop测量来的方便多了，而且样式直接生成，复制，拷贝就OK！ 17 3.CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动， 18 这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。 19 4.CSS Sprites非常值得学习和应用，特别是页面有一堆icon（图标）。总之很多时候大家要权衡一下利弊，再决定是不是应用CSS Sprites。
5.如何用原生js给按钮绑定两个onclick事件。
思路： 两个事件就是要做两件事，可以在同一个onclick里写入这两件事。我觉得这不是考察的点，
除此之外，onclick事件也能触发的方式就是事件冒泡机制。所以可以给父元素绑定一个onclick，通过addEventListener监听冒泡过来的事件。
6.拖拽会用到哪些事件：
1 * dragstart ：拖拽开始 2 * dragenter ：鼠标进入 3 * dragover： 鼠标进入之后触发 4 * dragleave 拖拽离开 5 * drag 拖拽的元素身上持续触发 6 * drop 鼠标释放拖拽目标 7 * dragend 鼠标释放拖拽目标时，在拖拽元素上触发。 8 *
7.列举jquery选择器
id，class，element，*，属性选择器，索引选择器(:eq(2))， first, 偶数个元素（:even），奇数个元素(:odd)
8.js中的定时器有哪些？区别及用法：
区别就是 一个单纯延迟，一个循环延迟。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 8 /* 9 * 8.js中的定时器有哪些？区别及用法： 10 * 11 * setTimeout 12 * setInterval 13 * 注意他们的返回值是number类型的，从1开始，依次+1，即使清除了，也不重置。 14 * 另外他们并不精确，受限于异步，不能精确到1ms。 15 * 16 */ 17 </style> 18 </head> 19 <body> 20 <script> 21 var s = setTimeout(()=>{alert(1)},3000); 22 console.log(s) 23 var s2 = setTimeout(()=>{clearTimeout(s)},6000); 24 console.log(s2) 25 var s3 = setTimeout(()=>{ 26 var s4 = setTimeout( 27 ()=>{ 28 alert(4); 29 console.log(s4) 30 },10000) 31 },6000); 32 console.log(typeof s3) 33 34 </script> 35 </body> 36 </html>
