10/15 面试题

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、从哪些方面做性能优化?
  • 加载方面
  1. 减少http请求(精灵图,文件的合并)
  2. 减小文件大小(资源压缩,图片压缩,代码压缩)
  3. CDN(第三方库)
  4. SSR服务器渲染,预渲染
  5. 懒加载
  6. 分包
  7. 。。。。
  • 减少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与 % 的区别是什么?
  1. % 是基于【父元素】的宽度/高度的百分比,vwvh是根据视窗的宽度/高度的百分比。
  2. 视口单位优势在于【vh】能够直接获取高度,而用 % 在没有设置 body 高度情况下,是无法正确获得可视区域的高度。
8、如何让谷歌浏览器支持小于12px的字体?

translate scale(0.x)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值