10/15 面试题

最新推荐文章于 2024-02-03 22:20:59 发布

小狐狸ya

最新推荐文章于 2024-02-03 22:20:59 发布

阅读量245

点赞数

分类专栏：每日面试题笔记文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_56607109/article/details/127352781

版权

笔记同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

每日面试题

1 篇文章 0 订阅

订阅专栏

文章目录

- 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、从哪些方面做性能优化？

加载方面

减少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）

小狐狸ya

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10/15 面试题

3.3、上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。2.3、上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。即它们所声明的变量一定要在声明后使用，否则报ReferenceError错。let和var声明的是变量，声明之后可以更改，声明时可以不赋值。var是ES5提出的，let和const是ES6提出的。
复制链接

扫一扫