前端笔试的记录

港控/mmm° 2021-07-25 12:04 256阅读 0赞

## 前端笔试的记录 ##

1.  一个200\*200的div如何在不同分辨率的屏幕下上下左右居中?

1、div{ 
    		position:absulote;
    		width:200px;
    		height:200px;
    		left:50%;
    		top:50%;
    		margin:-100px 0 0 -100px;//根据div中心点展开
    		}
    2、div{ 
    		position:absulote;
    		width:200px;
    		height:200px;
    		left:0;
    		top:0;
    		margin:0 auto;
    		}
    3、div{ 
    		position:absulote;
    		width:200px;
    		height:200px;
    		left:50%;
    		top:50%;
    		transform:translate(-50%,-50%);
    		}

1.  清除浮动的方式?

1、clear:both
    2、overflow:hidden//给父级设置，同时设置宽度，不能设置高度
    3、父级div定义伪类:after和zoom
    		div:after{ 
    			display:block;
    			~
    			}
    		div{ 
    			zoom=1;
    			}

1.  Doctype作用？标准模式与兼容模式各有什么区别？

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="widt0h=device-width, initial-scale=1.0">
      <title>transparent</title>
    </head>
    <body>
    </body>
    </html>

作用：
    	doctype是一种标准通用标记语言的文档类型声明，**目的是告知浏览器的解析器用什么文档标准解析这个文档。在html中的作用是触发浏览器的标准模式**。当在HTML中忽略了doctype或不标准使用时浏览器会进入到兼容模式。
    区别：
    	标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。
    	在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

[解析来源][Link 1]

1.  box-sizing（盒模型）常用的属性有哪些？作用是什么？

属性:content-box/border-box
    作用:
    	|--content-box:
    	   padding和border不被包含在定义的width和height之内,对象的实际宽度等于width + border + padding，是标准的盒模型。
    	|--border-box:
    	   padding和border被包含在定义的width和height之内，对象的实际宽度等于设置的width。

如下实例，当不设置box-sizing：border-box时div会溢出,也相当于设置了box-sizing：content-box

div{
        width:100%;
        height:100px;
        border:10px solid grey;
        box-sizing:border-box;
        background:red;

设置了box-sizing：border-box，屏幕左右撑满  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center]  
没有设置box-sizing：border-box； 或设置了box-sizing：content-box；  
![在这里插入图片描述][20201109164638924.gif_pic_center]  
box-sizing:content-box,由于两个子级div的宽都设置了50%，并设置了border，因此盒子的实际宽度不只50%，因此第二个盒子被挤到了第二行。  
![在这里插入图片描述][20201109165345985.png_pic_center]

1.  描述cookies、sessionStorage和LocalStorage的区别？  
    [参考博客…][Link 2]
2.  简述Ajax请求的步骤?  
    [参考博客][Link 3]

(1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象. 
    	(2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息. 
    	(3)设置响应HTTP请求状态变化的函数. 
    	(4)发送HTTP请求. 
    	(5)获取异步调用返回的数据. 
    	(6)使用JavaScript和DOM实现局部刷新.

1.  undefined和null区别？

[阮一峰的网络日志][Link 4]

1、null表示"没有对象"，即该处不应该有值
    典型用法：
    （1） 作为函数的参数，表示该函数的参数不是对象。
    （2） 作为对象原型链的终点。
    
    Object.getPrototypeOf(Object.prototype)
    // null

2、undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义
    典型用法：
    （1）变量被声明了，但没有赋值时，就等于undefined。
    
    （2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
    
    （3）对象没有赋值的属性，该属性的值为undefined。
    
    （4）函数没有返回值时，默认返回undefined。
    	
    var i;
    i // undefined
    
    function f(x){ console.log(x)}
    f() // undefined
    
    var  o = new Object();
    o.p // undefined
    
    var x = f();
    x // undefined

1.  Dom怎样添加、移动、移除、复制、创建和查找节点?

1.  HTML5的新特性？如何处理HTML5新标签的浏览器兼容问题？  
    [参考博客][Link 5]

HTML5的新特性：

1、语义化标签（如<header>、<nav>、<article>、<footer>、<aside>、<section>）
    
    2、增强型表单:新的表单input类型（color、date、datetime、url、search、tel等）
    			  新增表单元素（<datalist>、<keygen>、<output>）
    			  新增表单属性（placehoder、required 、pattern、min 、max、step、eight 和 width 属性，用于 image 类型的 <input> 标签的图像高度和宽度、autofocus、multiple ）
    3、新增视频<video>和音频<audio>标签
    4、Canvas绘图（标签只是图形容器，必须使用脚本来绘制图形）
    5、SVG绘图
    6、地理定位
    7、拖放API
    8、Web Worker
    9、Web Storage
    10、WebSocket

如何处理HTML5新标签的浏览器兼容问题：

方法一:平平淡淡summer
    如何处理HTML5新标签的浏览器兼容问题?
    方法一 :
    	1、使用静态资源的html5shiv包
    	
    	
    	2、载入后，初始化新标签的css
    	header, section, footer, aside, nav, main, article, figure { display: block; }
    	
    	方法二:
    	1、IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签

1.  CSS3的新特性？  
    [菜鸟教程][Link 6]

1、选择器
    2、过渡 transition
    3、动画效果 animation 
    	（1）animation: name duration timing-function delay iteration-count direction fill-mode;
    	（2）创建动画@keyframes name{..}
    4、形状转换 transfrom:translate()、rotate()、scale()、skew()、matrix()
    5、边框 
    	（1）盒子阴影 box-shadow: 10px 10px 5px #888888;依次为阴影水平偏移量x、阴影垂直偏移量y，y，阴影模糊半径、阴影颜色
    	（2）圆角  border-radius
    	（3）边界图片 border-image
    6、盒模型定义  box-sizing
    	（1）box-sizing:content-box;即padding和border被包含在定义的width和height之内，对象的实际宽度等于设置的width。
    	（2）box-sizing:border-box;即padding和border不包含在定义的width和height之内，对象的实际宽度等于设置的width+padding+border。
    7、新的背景属性
    	（1）background-image
    	（2）background-size
    	（3）background-origin
    	（4）background-clip
    8、渐变 background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
    	（1）线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
    	（2）径向渐变（Radial Gradients）- 由它们的中心定义
    9、 弹性布局(Flex Box)
    	display:flex;
    10、字体 @font-face
    <style> @font-face{ font-family: myFont; src: url(..); } div{ font-family:myFont; } </style>
    11、文本效果 
    	（1）text-shadow
    	（2）box-shadow
    	（3）text-overflow
    	（4）word-wrap
    	（5）word-break
    12、多列布局
    13、新的用户界面特性
    	（1）调整尺寸:resize
    	（2）方框大小定义:box-sizing
    		（a）box-sizing:content-box;即padding和border被包含在定义的width和height之内，对象的实际宽度等于设置的width。
    		（b）box-sizing:border-box;即padding和border不包含在定义的width和height之内，对象的实际宽度等于设置的width+padding+border。
    	（3）外形修饰:outline-offset （	外轮廓修饰并绘制超出边框的边缘）
    	（4）appearance
    	（5）icon
    	  .......
    14、多媒体查询@media

1.  call()、applay（）、bind（）的区别和作用?
2.  数组去重？

举例其中几种：

// 1、map去重
          let arr = [1, 2, 3, 4, 5, 3, 4, 6, 7, 86, 5, 4, 22, 1];
          const result = [];
    
          const map = new Map();
          for (let i of arr) { 
            if (!map.has(i)) { 
              map.set(i, true);
              result.push(i);
            }
          }
          console.log(result);
    
          // 2、new Set()去重，Set类似数组，其所有成员唯一,Array.from将一个类数组或可遍历对象转换成一个真正的数组
          let result2 = new Set(arr);
          let a = Array.from(result2);
          console.log(a);
    
          // 3、Array includes去重
          let result3 = [];
          for (i of arr) { 
            if (!result3.includes(i)) { 
              result3.push(i);
            }
          }
          console.log(result3);
    
          //4、splice(开始下标，删除的元素数，添加的新元素)方法用于添加或删除数组中的元素
    
          // let result4 = [];
    
          for (var i = 0; i < arr.length; i++) { 
            for (var j = i + 1; j < arr.length; j++) { 
              if (arr[i] === arr[j]) { 
                arr.splice(j, 1);
                j--;
              }
            }
          }
          console.log(arr);

1.  web前端性能优化的方法？  
    [参考博文][Link 7]
2.  CSS是否大小写敏感？
3.  border-top/border-bottom对行内元素是否其作用

border-top/border-bottom对行内元素不起作用，但border-right/border-left对行内元素有作用

1.  写出HTML5的两个web存储对象

sessionStorage、localStorage

1.  描述一下脚本

放在<head>中：脚本会优先加载，但加载过程中，<body>还没加载完，会使脚本访问不到<body>中的元素。
    放<body>底部：脚本在<body>加载后加载，能够保证脚本有效地访问<body>的元素。
    
     script放在<head>，无法通过脚本改变内联的CSS样式，而放在<body>底部时，可以通过脚本改变内联的CSS样式 
    
    例外情况：脚本中没有访问<body>元素的情况下，两种加载方式效果一致。

1.  HTTP状态码？
2.  HTTP请求方法？  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 1]
3.

[Link 1]: https://www.cnblogs.com/king18181753985/p/6508435.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/70fde4c4013d4af5a0cb2fd321a0fc34.png
[20201109164638924.gif_pic_center]: /images/20210725/1016f7ec25664554a9e42f3e5374c26c.png
[20201109165345985.png_pic_center]: /images/20210725/88483488d2ff4e8c961a434431694f39.png
[Link 2]: https://www.cnblogs.com/zr123/p/8086525.html
[Link 3]: https://www.cnblogs.com/Ann-web-1/p/11354781.html
[Link 4]: http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html
[Link 5]: https://www.cnblogs.com/vicky1018/p/7705223.html
[Link 6]: https://www.runoob.com/css3/css3-mediaqueries.html
[Link 7]: https://www.cnblogs.com/bobo-site/p/9317930.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/86d1d5131e214373afcff0f068eafc68.png