面试题：面试经

目录

我碰到有意思的题会继续更新，如发现我的解答有问题，请告知，万分感谢。
如觉得对你有帮助，请帮忙点个赞，谢谢。

1. css的选择器，权重
2. ie和其他浏览器下，盒模型的区别
3. 盒模型互相转化
4. 元素水平垂直居中
5. 左边固定，右边自适应
6. 左右固定，中间自适应，高度通屏
7. 外边距margin
8. 边框圆角border-radius
9. border-color
10. margin负值
11. margin一些坑
12. dispaly有那些值
13. 伪类
14. css3新增了那些属性
15. 老生常谈的hack
16. 清除浮动
17. html5新增了那些标签
18. <!Doctype> 有什么作用？
19. link @import 有什么区别
20. lable有什么用
21. cookies，sessionStorage 和 localStorage 的区别？
22. WebSocket和socket有什么关系？ WebSocket和ajax的区别？
23. 正则验证邮箱
24. 闭包，你在开发中要经常使用闭包吗？为什么？
25. 数据类型
26. 获取元素自定义属性有什么区别？
27. 继承都有哪些
28. 编程题（测试）

css篇

1. css的选择器，权重
   答：

      id,class,标签，组合，继承，伪类，*
      !important > style > id > class > 标签 > *
      
   

2. ie和其他浏览器下，盒模型的区别
   答：

      - ie下的盒模型为 content（width+height+padding+border）+ margin
      - 实际大小：content
      - 标准盒模型为content(width+height) + padding + border + margin
      - 实际大小：content+padding+border
   
   

3. 盒模型互相转化
   答：

      - 给需要转化的元素设置 box-sizing:border-box；
      - content-box:    这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
      - border-box : 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
      - inherit   : 规定应从父元素继承 box-sizing 属性的值。
   

4. 元素水平垂直居中
   答：

      - css2 position：absolute; top：50%; left：50%; margin-left：-widht/2; margin-top：-height/2;
      - css2 position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;
      - css3 display:flex; justify-content:center; align-items:center;
      - css3 position:absolute; top:50%; left:50%; transfrom:translate(-50%,-50%);
   

5. 左边固定，右边自适应
   答：

      - css2 div1{float:left;} div2{overflow:hidden;};
      - css2 div1{float:left;} div2{ margin-left:-div1.width;}
      - css3 parent{dispaly:flex;} div1{wdith:200px;} div2{flex:1};
   

6. 左右固定，中间自适应，高度通屏
   答：

      // 布局
      <div class="wrap">
          <div class="left"></div>
          <div class="right"></div>
          <div class="center"></div>
      <div>
      // style
      html,body,.wrap{height:100%;overflow:hidden; background:green;}
      .left,.right,.center{height:100%;}
      .left,.right{width:100px;background:aqua;}
      .left{float:left;}
      .right{float:right;}
      .center{background:red}
      

7. 外边距margin

      margin:10px;        //  上下左右 10px
      margin:10px 10px;        //    上下10px  左右10px
      margin:10px 10px 10px;      //    上10px 左右10px  下10px
      margin:10px 10px 10px 10px;        //    上10px 右10px 下10px 左10px
      margin:10px 10px 10px 10px 10px;    //    坑
      margin:10px 10px 10px 10px 10px 10px;    //    坑
      margin:10px 10px 10px 10px 10px 10px 10px;    //    坑
      margin:10px 10px 10px 10px 10px 10px 10px 10px;    //    坑
   

8. 边框圆角border-radius

      //    左上右上右下左下 10px
      border-radius:10px;
      //    左上右下10px  右上左下10px
      border-radius:10px 10px;    
      //    左上10px    左下右上10p  右下10px
      border-radius:10px 10px 10px;    
      //    左上10px    右上10px    右下10px    左下10px
      border-radius:10px 10px 10px 10px;    
      //    左上左10px/左上上10px  右上右10px/右上上10px    右下右10px/右下下10px     左下左10px/左下下10px 
      border-radius:10px 10px 10px 10px / 10px;    
      //    左上左、右下右10px/左上上、右下下10px        右上右、左下左10px/右上上、左下下10px  
      border-radius:10px 10px 10px 10px / 10px 10px;
      //    左上左10px/左上上10px    右上右、左下左10px/右上上、左下下10p    右下右10px/右下下10px    
      border-radius:10px 10px 10px 10px / 10px 10px 10px;  
      //    左上左10px/左上上10px   右上右10px/右上上10px    右下右10px/右下下10px     左下左10px/左下下10px 
      border-radius:10px 10px 10px 10px / 10px 10px 10px 10px;      
   
   

9. border-color

   如题：如下代码最后生成出来是什么。
   width:0px;
   height:0px;
   border-width:60px;
   border-style:solid;
   border-color: red transparent transparent transparent;

10. margin负值

    如题：有一组li，它们宽高为100px，边框为10px灰色，每一个li之间的间隔为10px，鼠标滑过的时候，让其边框颜色改变为红色，整体排版不能乱，而且边框要展示全。(用css实现)

    答：

       ul>li*N   //html
       li{ width:100px; height:100px; border:10px solid #ccc; margin:-10px 0 0px -10px; position:relative; }
       li:hover{ border:10px solid red; z-index:9; }
    

11. margin一些坑

    如题：有两个div，宽高为100px，边框为10px，div1=margin:10px 20px 30px40px，div2=margin:40px 30px 20px 10px，请问这两个元素中间的间隔为像素；

    答：

       上下布局（div1在上div2在下）：40px;
       上下布局（div2在上div1在下）：20px;
       左右布局（div1在左div2在右）：30px;
       左右布局（div2在左div1在右）：70px;
    

    如题：有两个div，父子级关系，父级：parent，子级：child;parent宽高为100px，child宽高为50p，外边距为50px;child和parent都在什么位置？（浏览器的margin和padding已经清零）。

    答：

       child在parent右上角；
       parent：    距顶部50px，距左0px；
       child： 距离顶部50px， 距左50px，底部距离父级底部50px；
    

    如题：有两个div，兄弟关系，div1在上，div1宽高100px，加float：left，div2宽高50px，margin：50px，div1和div2在什么位置？手动加重点：怎么展示的？

    答：

       div1覆盖div2。
       div1:距上50px，距左0px，距下和右0px;
       div2:距上50px，距左50px，距下和右50px;
    

    附加：如果child外边距为100px，他们的位置呢？

12. dispaly有那些值
    答：

     // 常用值：
     block|inline|inline-block|none|table|list-item| inherit 
    

13. 伪类
    答：

       常用：
       :link | :hover | :active | :visited | :after | :before | :first-child | :last-child
       :nth-child()
     

14. css3新增了那些属性
    答：

       //个人常用：
       transform:rotate(90deg);           // 旋转
       transform-origin:center center;    // 定位中心点
       transform:translate(x,y);          // 在x和y轴上定位
       transtion:.1s;                     // 过渡动画
       animation: obj 2s;                 // 动画
       border-radius:5px;                 // 边框圆角
       background-size:100% 100%;         // 背景大小
       box-show:0 0 0 #000;               // 阴影
     

15. 老生常谈的hack
    答：

       width:100px;     // 所有都识别
       width:100px\9;   // ie6、ie7、ie8
       *widht:100px;    // ie6、ie7
       _width:100px;    // ie6
       widht:100px\0;   // ie8
       

16. 清除浮动
    答：

       .clear{zoom:1;};
       .clear:after{content:''; dislay:block; clear:both; }
       

HTML篇

1. html5新增了那些标签
   答：

      video canvas header footer section nav 
    

2. <!Doctype> 有什么作用？
   答:

      让浏览器按照什么版本解析文档。
      

3. link @import 有什么区别
   答：

      link是通过html链接引入，@import在css文件中引入。
      link在页面加载的时也同时加载，而@import是需要css加载完成后在开始加载。

4. lable有什么用
   答：

     标注input，点击lable中的文字，就会触发此控件，自动把焦点转移到绑定的表单元素上。
      
      

综合篇

1. cookies，sessionStorage 和 localStorage 的区别？
   答：

      cookies：储存最多20多条数据，储存大小在4kb左右，在设置的时间前不会因为浏览器的关闭而消失，安全性存在漏洞，容易被拦截，在所有同源窗口共享。
      sessionStorage: 大小在5M或者更大，不在不同浏览器下共享及时在一个页面（iframe）;浏览器关闭消失
      localStorage:大小在5M或者更大，不会因为浏览器关闭而消失，在所有同源窗口共享
      

2. WebSocket和socket有什么关系？ WebSocket和ajax的区别？
   答：

     1. mmp！就跟javascript和java,锤子手机和锤子一样，有锤子的关系。
     2. web是长连接，连接一直保持，ajax是短连接，发起，接收，关闭。
        ajax是客户端发起，web是客户端服务器互相推送。
   

3. http和https的区别
   答：

      自己的个人理解：https比http更安全。
      为什么安全不知道，请自行搜索。虽然搜索过，并看过好几遍但是个人一直无法融会贯通，所以不再次标注答案。等什么时候吃透了，我在写上。
   

4. http和https之间怎么传输？
   答：

     mmp，还是自己去搜索吧。
   

5. 正则验证邮箱
   答：

      var str = [e-mail]
          reg = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/g;));
      console.log(reg.text(str));
   

JavaScript篇

1. 闭包，你在开发中要经常使用闭包吗？为什么？
   答：

      可以访问另外一个函数作用域里的变量和函数。不建议频繁使用，或者对自己的技术不是蜜汁自信的不要过多使用，因为闭包使用多了，操作不当，容易造成内存泄漏，变成内存溢出。
   

2. 数据类型 、
   答：

      number string boolean undefined null object 
   

3. 获取元素自定义属性有什么区别？
   答：

      getAttribute;    // 返回对象
      getparameter;    // 返回字符串
      

4. 继承都有哪些
   答：

      原型链、组合、寄生、寄生组合、构造、实例、拷贝
      

5. 题

   • var arr1 = [1,2,3,4,5,6,7,8,9], arr2 = [9,8,7,6,5,4,3,1,11,10,7,9];
     找出arr1和arr2中耦合的数字。
   • 把 {"a":[1,2,3],"b":[4,5],"c":[6],"d":[7,8,9,10]} 转成 [{"type":"a","name":1},{"type":"a","name":2},{"type":"a","name":3},{"type":"b","name":4},{"type":"b","name":5},{"type":"c","name":6},{"type":"d","name":7},{"type":"d","name":8},{"type":"d","name":9},{"type":"d","name":10}]