前端基础面试题（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>