文章目录
10/15面试题
1、盒子居中的方法
div居中父元素的六种常用方法:
<style>
/* .out {
width: 500px;
height: 500px;
background-color: pink;
position: relative;
} */
`1.transform translate`
/*.inner {
width: 200px;
height: 200px;
background-color: hotpink;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
} */
` 2.left: 0;right: 0;top: 0; bottom: 0;margin:auto `
/*.inner {
width: 200px;
height: 200px;
background-color: hotpink;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
} */
`3.flex justify-content: center;align-items: center;`
/*
.out {
width: 500px;
height: 500px;
background-color: pink;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
width: 200px;
height: 200px;
background-color: hotpink;
} */
`4.flex 父:display: flex; 子: margin: auto;`
/*.out {
width: 500px;
height: 500px;
background-color: pink;
display: flex;
}
.inner {
width: 200px;
height: 200px;
background-color: hotpink;
margin: auto;
} */
`5. 父: text-align: center; line-height: 500px;子:display: inline-block; vertical-align: middle;`
/*.out {
width: 500px;
height: 500px;
background-color: pink;
text-align: center;
line-height: 500px;
}
.inner {
width: 200px;
height: 200px;
background-color: hotpink;
display: inline-block;
vertical-align: middle;
} */
`6.定位50% 再margin-left margin-top移动负的宽高`
/* .out {
width: 500px;
height: 500px;
background-color: pink;
position: relative;
}
.inner {
width: 200px;
height: 200px;
background-color: hotpink;
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -100px;
} */
</style>
<body>
<div class="out">
<div class="inner"></div>
</div>
</body>
2、margin和padding的本质。
margin
是用来隔开元素与元素之间的间距,padding
是用来隔开元素和内容的间距。margin
用来布局分开元素使得元素互不相干。padding
用于元素和内容之间的间隔,让内容与包裹元素之间存在一段距离。何时使用margin
2.1、需要在border外侧田间空白时。
2.2、空白处不需要背景色时。
2.3、上下相连的两个盒子之间的空白,需要相互抵消时。如15px+20px的margin,将得到20px的空白。
何时使用padding
3.1、需要在border内测添加空白时。
3.2、空白处需要背景(色)时。
3.3、上下相连的两个盒子之间的空白,希望等于两者之和时。如15px+20px的padding,将得到35px的空白。
3、输入url之后发生了什么
1.DNS对域名进行解析;
2.建立TCP连接(三次握手);
3.发送HTTP请求;
4.服务器处理请求;
5.返回响应结果;
6.关闭TCP连接(四次挥手);
7.浏览器解析HTML;
8.浏览器布局渲染;html解析->外部样式、脚本加载->外部样式执行->外部脚本执行->html继续解析->dom树构建完成->加载图片->页面加载完成
4、实现深拷贝
`只考虑基本类型,数组,对象三种类型的情况`
function deepClone(source) {
let targetObj = source.constructor === Array ? [] : {};
for (let keys in source) {
if (source.hasOwnProperty(keys)) {
if (source[keys] && typeof source[keys] === "object") {
targetObj[keys] = source[keys].constructor === Array ? [] : {};
targetObj[keys] = deepClone(source[keys])
} else {
targetObj[keys] = source[keys];
}
}
}
return targetObj;
}
5、从哪些方面做性能优化?
- 加载方面
- 减少http请求(精灵图,文件的合并)
- 减小文件大小(资源压缩,图片压缩,代码压缩)
- CDN(第三方库)
- SSR服务器渲染,预渲染
- 懒加载
- 分包
- 。。。。
- 减少dom操作,避免回流,文档碎片
6、let,const和var的区别
var是ES5提出的,let和const是ES6提出的。
const声明的是常量,必须赋值
1)一旦声明必须赋值,不能使用null占位。
2)声明后不能再修改
3)如果声明的是复合类型数据,可以修改其属性let和var声明的是变量,声明之后可以更改,声明时可以不赋值
var允许重复声明变量,后一个变量会覆盖前一个变量。let和const在同一作用域不允许重复声明变量,会报错。
var声明的变量存在变量提升(将变量提升到当前作用域的顶部)。即变量可以在声明之前调用,值为undefined。
let和const不存在变量提升。即它们所声明的变量一定要在声明后使用,否则报ReferenceError错。var不存在块级作用域。let和const存在块级作用域。
ES5中作用域有:全局作用域、函数作用域。没有块作用域的概念。
ES6(简称ES6)中新增了块级作用域。块作用域由 { } 包括,if语句和for语句里面的{ }也属于块作用域。
7、vw,vh与 % 的区别是什么?
%
是基于【父元素】的宽度/高度的百分比,vw
,vh
是根据视窗的宽度/高度的百分比。- 视口单位优势在于【
vh
】能够直接获取高度,而用%
在没有设置body
高度情况下,是无法正确获得可视区域的高度。
8、如何让谷歌浏览器支持小于12px的字体?
translate scale(0.x)