本文分享了前端开发中常用的技巧，包括元素水平垂直居中、GET与POST请求的区别、HTTP状态码解析、盒模型的深入理解及CSS控制元素显示隐藏的方法等。
实现元素水平垂直居中
html
<div class="wrap">
<div class="box"></div>
</div>
css
.wrap {
position: relative;
width: 400px;
height: 400px;
background: #fcf;
}
.box {
width: 200px;
height: 200px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
background: #999;
}
复制代码设置了绝对定位的话，CSS属性top、bottom、left、right都为0的话，这是不可能的，因为.box的元素有设置宽高，所以你只要在设置一个margin：auto，自然就居中了。
.wrap {
display: table-cell;
width: 400px;
height: 400px;
background: #fcf;
vertical-align: middle;
}
.box {
width: 200px;
height: 200px;
margin: 0 auto;
background: #999;
}
复制代码不会有高度的限制
知道其中居中元素的宽高，使用定位 margin负值
.wrap {
height: 400px;
width: 400px;
background: #fcf;
position: relative;
}
.box {
height: 200px;
width: 200px;
background: #eee;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
}
复制代码谈谈你对http中 get和post的理解？什么时候运用他们？
-
GET请求，请求的数据会附加在URL之后，以?分割URL和传输数据，多个参数用&连接。URL的编码格式采用的是ASCII编码，而不是uniclde，即是说所有的非ASCII字符都要编码之后再传输。
-
POST请求：POST请求会把请求的数据放置在HTTP请求包的包体中。
-
GET请求时，传输数据会受到URL长度的限制
-
POST，由于不是URL传值，理论上是不会受限制的
-
安全性
POST的安全性比GET的高。这里的安全是指真正的安全，而不同于上面GET提到的安全方法中的安全，上面提到的安全仅仅是不修改服务器的数据。比如，在进行登录操作，通过GET请求，用户名和密码都会暴露再URL上，因为登录页面有可能被浏览器缓存以及其他人查看浏览器的历史记录的原因，此时的用户名和密码就很容易被他人拿到了。除此之外，GET请求提交的数据还可能会造成Cross-site request frogery攻击
- 常见的状态码以及含义如下：
200 OK 服务器成功处理请求
301/302 Moved Permanently（重定向）请求的URL已移走。响应报文中应该包含一个Location URL，说明资源现在所处的位置
304 Not Modified（未修改） 客户的缓存资源是最新的，要客户端使用缓存内容
404 Not Found 未找到资源
501 Internal Server Error 服务器遇到错误，使其无法对请求提供服务
HTTP请求报文
一个HTTP请求报文由四个部分组成：请求行、请求头部、空行、请求数据。
盒模型
box-sizing : content-box|border-box|inherit;
(1) content-box ,默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。
即总宽度=margin+border+padding+width
(2) border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容
即总宽度=margin+width
很多CSS框架，都会对盒子模型的计算方法进行简化。
(3) inherit , 规定应从父元素继承 box-sizing 属性的值
关于border-box的使用：
1 一个box宽度为100%，又想要两边有内间距，这时候用就比较好 2 全局设置 border-box 很好，首先它符合直觉，其次它可以省去一次又一次的加加减减，它还有一个关键作用——让有边框的盒子正常使用百分比宽度。
元素水平垂直居中
未知子元素高度
- 思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3transform:translate(-50%; -50%) ；
优点：高大上,可以在webkit内核的浏览器中使用
缺点：不支持IE9以下不支持transform属性 - 思路：使用css3 flex布局
display: flex;
justify-content: center;
align-items: center;
复制代码- 思路：显示设置父元素为：table，子元素为：cell-table，这样就可以使用vertical-align: center，实现水平居中
优点：父元素（parent）可以动态的改变高度（table元素的特性）
缺点：IE8以下不支持
.parent1{
display: table;
height:300px;
width: 300px;
background-color: #FD0C70;
}
.parent1 .child{
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
font-size: 16px;
}
复制代码html中data-* 属性，怎么在js和jq中使用它们？
data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
- data-*属性和jQuery交互
使用jQuery中的.data()函数取用data-*属性值
注意事项： 1. data-**属性名格式驼峰命名改写
2. data-属性是在第一次使用这个数据属性后不再存取或改变（所有的数据值都在jQuery内部存储
- 使用jQuery中.attr()函数设置data-*属性值
-
data-*属性和JS交互
- 获取设置使用 .dataset（）方法
- 使用原生的getAttribute/setAttribute方法
JSON
- JSON.stringify(value[, replacer [, space]])
将一个JavaScript值(对象或者数组)转换为一个 JSON字符串，如果指定了replacer是一个函数，则可以替换值，或者如果指定了replacer是一个数组，可选的仅包括指定的属性。 - JSON.parse()
用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。提供可选的reviver函数用以在返回之前对所得到的对象执行变换(操作)。
截取get参数，以键值对的形式保存在JSON数据格式中
function urlVal (url) {
let arr=url.split("?")[1];
let arr2=arr.split("&");
let jsonarr={};
for(let i=0;i<arr2.length;i++){
let arr3 = arr2[i].split("=");
jsonarr[arr3[0]] = arr3[1];
}
return JSON.stringify(jsonarr);
}
复制代码CSS控制元素显示或者隐藏的属性？visibility和dispiay：none；区别？
答.visibility::hidden 不可见的元素也会占据页面上的空间,dispiay：none；不占据页面空间的不可见元素; 还有opacity透明度也可以隐藏元素。
js有2钟定时器是什么？
答：1. 循环执行：window.setInterval（“方法名或方法”，“延时”）; 2. 定时执行：window.setTimeout(“方法名或方法”,“延时”);当方法执行完成定时器停止(但是定时器还在,只不过没用了);
3. 去掉定时器的方法 ：window.clearTimeout(定时器名称变量);
vue axios 中多个验证返回多个401错误，如何写错误提示，如果用axios.catch（）写难道要写多个一样的返回错误函数？？
答： 使用拦截器 拦截器的目的是当我们需要统一处理http请求和响应时我们通过设置拦截器处理方便很多. 你可以截取请求或响应在被 then 或者 catch 处理之前
//添加请求拦截器
axios.interceptors.request.use（function（config）{
//在发送请求之前做某事
return config;
}，function（error）{
//请求错误时做些事
return Promise.reject（error）;
}）;
//添加响应拦截器
axios.interceptors.response.use（function（response）{
//对响应数据做些事
return response;
}，function（error）{
//请求错误时做些事
return Promise.reject（error）;
}）;
复制代码请编写一个单机【五子棋】游戏，要求如下：
使用原生技术实现，兼容 Chrome 浏览器即可。
实现胜负判断，并给出赢棋提示；任意玩家赢得棋局，锁定棋盘。
请尽可能的考虑游戏的扩展性，界面可以使用 DOM / Canvas 实现。考虑后续切换界面实现的方式成本最低。（比如选择使用 DOM 实现界面，需求改变为使用 Canvas 实现时尽可能少的改动代码）。
实现一个悔棋功能
实现一个撤销悔棋功能
实现一个人机对战功能
尽可能的考虑实现的灵活性和扩展性
利用冒泡排序法排列var a = [B, A, D, E, F ,C]变成[A, B, C, D, E, F]
function sortArr(arr) {
for (let i = 0; i < arr.length -1; i++) {
for (let j = 0; j < arr.length -1 - i; j++) {
if (arr[j] > arr[j+1]) {
let temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
return arr;
}
var example = [15, 44, 66, 2, 90, 67, 1, 3];
console.log(sortArr(example));
// 快速排序
function sortFast(arr) {
if (arr.length < 2) {
return arr;
}
var left = [];
var right = [];
var middleIndex = Math.floor(arr.length/2);
var middleNum = arr.splice(middleIndex, 1)[0];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < middleNum) {
left.push(arr[i]);
}else{
right.push(arr[i]);
}
}
return sortFast(left).concat([middleNum], sortFast(right));
}
console.log(sortFast(example));
复制代码添加css样式
<div class="con">
<div class="left cicle"></div>
<div class="right cicle"></div>
</div>
复制代码其中.con在body页面水平垂直居中 两个圆宽高都是100px，就这么多条件！加css样式 效果图
写出从浏览器输入网址到静态页面加载完毕，经历了哪些过程？
- 输入网址后浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第二步操作。
- 解析url找到对应ip地址
- 浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。
- 握手成功后，浏览器向服务器发送http请求，请求数据包。
- 服务器处理收到的请求，将数据返回至浏览器
- 浏览器收到HTTP响应
- 读取页面内容，浏览器渲染，解析html源码
- 生成Dom树、解析css样式、js交互
- 客户端和服务器交互
- ajax查询 其中，步骤2的具体过程是：
浏览器缓存：浏览器会记录DNS一段时间，因此，只是第一个地方解析DNS请求； 操作系统缓存：如果在浏览器缓存中不包含这个记录，则会使系统调用操作系统，获取操作系统的记录(保存最近的DNS查询缓存)； 路由器缓存：如果上述两个步骤均不能成功获取DNS记录，继续搜索路由器缓存； ISP缓存：若上述均失败，继续向ISP搜索。
6.25 面试公司
面试题： 1. 元素水平垂直居中 2.js函数执行 主要是变量提升和立即执行函数内的变量 3.输入url到页面加载的过程。
4.Vue 生命周期的理解；
beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化；el还是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去
mounted ：完成挂载
vue实例进行销毁。销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。
beforecreate : 举个栗子：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestroy： 你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容
参考文章（很经典）
5.谈谈你对前端工程化的理解？
前端工程化是根据具体的业务特点，将前端的开发流程、技术、工具、经验等规范化、标准化。它的目的是让前端开发能够“自成体系”，最大程度地提高前端工程师的开发效率，降低技术选型、前后端联调等带来的协调沟通成本。
6.27下午面试的公司
1. 使用css控制左边元素宽度为500px保持不变，右边元素随浏览器大小自适应，左右元素高度满屏。
<style>
body,html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.left {
width: 500px;
height: 100%;
float: left;
box-sizing: border-box;
border: 1px solid red;
}
.right {
height: 100%;
margin-left: 500px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
复制代码html和body必须设置height：100%；否则子元素的height：100%；不会起作用；
2. 元素水平垂直居中；
3. css选择器的优先关系？
答 !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
内联样式表的权值为 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1
权重大小进制不是十进制的，为256进制
4. 行内元素和块级元素有哪些？
行内元素：
- i – 斜体
- img – 图片
- input – 输入框
- label – 表格标签
- select – 项目选择
- sub – 下标
- sup – 上标
- br – 换行
- abbr – 缩写
块级元素
- div
- p
- h1~h6
- ol
- ul
- hr 水平线
- table 表格
- nav 导航语义元素标签
- header
- footer 元素描述了文档的底部区域.
- section 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分
- article 标签定义独立的内容
- aside 标签定义页面主区域内容之外的内容（比如侧边栏）。
标签上title和alt的区别？
alt是html标签的属性，而title既是html标签，又是html属性。
title标签，网页的标题就是写在这对标签之内的。
title作为属性时，可以为元素提供额外说明信息。例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。
而alt属性只能用在img、area和input元素中，用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。alt是替代图像作用而不是提供额外说明文字的。使用alt属性还具有搜索引擎优化效果，因为搜素引擎是无法直接读取图像的信息的，alt可以为其提供文字信息所以对搜索引擎比较友好。
title和alt属性存在一个标签纸时候，值最好写一样
数组去重
- 方法一：利用es6的Set数据结构和Array.from（）方法
function demo(arr) {
return Array.from(new Set(arr));
}
var arr = [1,2,5,6,8,7,1,2,5];
console.log(demo(arr));
复制代码- 方法二 定义一个新数组，判断新数组内是否有arr的arr[i]项，没有则吧arr[i]推进新数组, arr.indexOf(item)方法，返回arr内item第一次出现的位置，如果arr内没有item则返回-1
function demo(arr) {
let res = [];
for (let i = 0; i < arr.length; i++) {
res.indexOf(arr[i]) == -1? res.push(arr[i]): '' ;
}
return res;
}
复制代码
扫一扫
15万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
