前端面试题汇总（不断更新中_带宽高的元素-CSDN博客

本文链接：https://blog.csdn.net/yinyinlee07/article/details/122350747

文章目录

HTML+CSS部分

1.块级元素有哪些？行内元素有哪些？行内块元素有哪些？

块级元素有：<div>、<p>、<h1>~<h6>、<ul><ol>、<table>等；行内元素有：<span>、<a>标签、<b>、<br>等；行内块元素有：<img>、<input>等

2.选择器有哪些？哪个权重最高？

id选择器、类选择器、标签选择器、通配符选择器；权重由高至低依次为id、类、标签、通配符，当然内联样式权重比这些都高，最高的是!important。

3.相对定位和绝对定位有什么区别？

相对定位是元素相对于它之前的位置来定位的；而绝对定位要分两种情况，第一种是父级元素中没有定义相对或者绝对定位，它会根据HTML自身来定位，第二种是父级元素中有定义相对或者绝对定位，那么它会根据父级元素来进行定位（如果有多个定义了的父级元素，那么它会选择最近的父级元素进行定位）。

4.怎样实现垂直居中？★

共有四种方式实现垂直居中，分两种情况来实现。

情况一：带宽高的元素实现垂直居中

（1）第一种方式：利用绝对定位和margin:auto来实现；

<style>
        .father{
            width: 300px;
            height: 300px;
            position: relative;
            background-color: cornflowerblue;
        }
        .son{
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: crimson;
            top: 0;   //利用绝对定位，先将子元素定位到父元素的左上角，这样利于margin:auto将它在父元素中居中
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }
</style>

<div class="father">
    <div class="son"></div>
</div>

（2）第二种方式：

<style>
        .father{
            width: 300px;
            height: 300px;
            position: relative;
            background-color: cornflowerblue;
        }
        .son{
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: crimson;
            top: 50%;  //利用绝对定位，将子元素定位到父元素左边和上边各50%的位置
            left: 50%;
            margin-top: -25px;  //子元素本身有宽高，所以定位后视觉上看起来还是不居中
            margin-left: -25px;  //要将子元素的左边和上外边距都反方向移动元素高宽二分之一的距离
        }
</style>

情况二：元素不带宽高（根据文本/图像内容自适应的宽高）

（3）第三种方式：利用绝对定位和transform:translate实现；

<style>
        .father{
            width: 300px;
            height: 300px;
            position: relative;
            background-color: cornflowerblue;
        }
        .son{
            position: absolute;
            background-color: crimson;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);  //参照子元素之前位置，反方向平移50%
        }
</style>

<div class="father">
        <span class="son">我叫不带宽高</span>
</div>

（4）第四种方式：弹性布局；

<style>
        .father{
            width: 300px;
            height: 300px;
            background-color: cornflowerblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .son{
            background-color: crimson;
        }
    </style>

5.怎样实现两列浮动布局、三列布局（两边固定中间自适应）？

两列浮动布局可以用float或者position:absolute实现，float和position都会让元素脱离文档流；

<style>
        .left{
            width: 200px;
            height: 200px;
            float: left;
            background-color: rgb(216, 126, 62);
        }
        .right{
            height: 200px;
            background-color: rgb(75, 183, 187);
        }
</style>

<body>
    <div class="left"></div>
    <div class="right"></div>

<style>
        .left{
            width: 200px;
            height: 200px;
            position: absolute;
            background-color: rgb(216, 126, 62);
        }
        .right{
            height: 200px;
            background-color: rgb(75, 183, 187);
        }
</style>

<body>
    <div class="left"></div>
    <div class="right"></div>

三列布局（两边固定中间自适应）原理也一样；

<style>
        .left{
            width: 200px;
            height: 200px;
            float: left;
            background-color: rgb(216, 126, 62);
        }
        .right{
            width: 200px;
            height: 200px;
            float: right;
            background-color: rgb(216, 126, 62);
        }
        .center{
            height: 200px;
            background-color: rgb(75, 183, 187);
        }
</style>

<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>  //注意自适应模块要放在最后

<style>
        .left{
            width: 200px;
            height: 200px;
            position: absolute;
            background-color: rgb(216, 126, 62);
        }
        .center{
            height: 200px;
            background-color: rgb(75, 183, 187);
        }
        .right{
            width: 200px;
            height: 200px;
            position: absolute;
            right: 0;  //  用绝对定位将元素定位到最右边
            background-color: rgb(216, 126, 62);
        }
</style>
    
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>

6.怎样理解CSS盒模型？

任何元素都可以理解为一个盒模型，不同浏览器有其不同的盒模型。完整的盒模型包括这些：content、padding、border、margin。

IE浏览器中的IE盒模型中，content内容部分包括了width、height、padding和border；

而W3C盒模型（标准模型）中，content只包括width和height。

想要转换盒模型，可以box-sizing属性。

IE模型：box-sizing:border-box;

标准模型：box-sizing:content-box;

7.BFC是什么？能解决什么问题？

BFC，全称Block Formatting Context，翻译过来就是格式化上下文，它是一种布局格式，可以用来解决外边距重合、高度坍塌等问题。

构成BFC的条件有以下几个：

浮动元素float（除none值以外）
绝对定位position:absolute以及position:fixed
display属性中flex、inline-block、table-cells
overflow属性中hidden、auto、scroll

外边距重合：如果给两个盒子分别设置20px和10px的外边距，运行后两个盒子的外边距发生了重合；

解决方法：在第二个盒子外包裹一个盒子，将该盒子设置为BFC；

<style>
        .one{
            width: 100px;
            height: 100px;
            background-color: red;
            margin:20px;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 10px;
        }
        .bfc{
            overflow: hidden;
        }
    </style>

    <div class="one">
        第一个盒子
    </div>
    <div class="bfc"> 
        <div class="two">
            第二个盒子
        </div>
    </div>

运行结果：

高度坍塌：设置一个父元素盒子和它的子元素盒子，给子元素盒子设置20px的外边距，运行后上方外边距与父元素盒子重合了；

解决方法：在父元素盒子中设置为BFC；

<style>
        .father{
            width: 200px;
            height: 200px;
            background-color: brown;
            overflow: hidden;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 20px;
        }
</style>

<body>
    <div class="father">
        <div class="son">
        </div>
    </div>

运行结果：

8.CSS画三角问题

利用border设立边框以及透明transparent可以画一个三角。

第一步，高宽为0，设置50px的边框和四种不同颜色，可以得到四个三角形

<style>
        .one{
            width: 0;
            height: 0;
            border-top: 50px solid red;
            border-right: 50px solid yellow;
            border-bottom: 50px solid green;
            border-left: 50px solid blue;
        }
</style>

    <div class="one"></div>

第二步，给上边框、左右边框设置透明，这样就可以得到一个三角形

.one{
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid green;
            border-left: 50px solid transparent;
        }

如果想要得到一个等边三角形，可以这样：

.one{
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 85px solid green; //下边框改为85px
            border-left: 50px solid transparent;
        }

9.link和@import的区别

link和@import都是用来引入外部CSS文件。

区别一：link本质上是HTML标签，它不仅可以用来引入外部CSS文件，还可以用来定义其他事务；@import本质上是CSS样式，所以它只能用来加载CSS。

区别二：link会在页面加载时同时被加载；@import要在页面加载完之后再加载

区别三：link是XHTML标签，无兼容问题；@import是CSS2.1提出的，低版本的浏览器可能不支持。

区别四：link标签的权重高于@import。

区别五：link可以使用JavaScript控制DOM去改变样式；@import不支持。

10.伪类和伪元素的区别

伪类是用于给DOM树中已存在的元素来添加一些样式，而伪元素会在DOM树之外创建元素并为它添加样式。所以它们的区别就在于是否创建了DOM树之外的元素。

伪元素是使用（::）双冒号表示的，伪类是（:）单冒号。

11.清除浮动

当父元素不设置高宽，而子元素们有高宽但都设置了浮动，这时父元素无法被子元素撑开（子元素浮动脱离了文档流），父元素高度为0：

 .father{
            border: 2px solid crimson;
        }
        .son1,
        .son2,
        .son3{
            float: left;
        }
        .son1{
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }
        .son2{
            width: 200px;
            height: 100px;
            background-color: blue;
        }
        .son3{
            width: 100%;
            height: 100px;
            background-color: springgreen;
        }
 </style>

    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
    </div>

（1）清除浮动第一种：设置一个新的元素，用clear属性清除浮动；

（2）在父元素中触发BFC，清除浮动；

（3）使用:after伪类清除浮动；

（4）使用before和after双伪类清除浮动。

后两种更推荐使用。

12.innerHTML和innerText的区别

这两个属性属于Document对象，都可以用来获取文本内容。innerHTML是可以识别标签元素的，并且去解析然后显示带有标签效果的文本内容，innerText只能以文本的形式显示，并且去除了空格和换行。

function hand1()
{
            var a=document.getElementsByClassName("one")[0];
            a.innerHTML="<b>你好呀~</b>";
}

JavaScript部分

13.typeof和instanceof的区别

typeof属性返回的值是指定元素的数据类型，如果是基础数据类型，是number就会返回number（除了NULL返回的是Object）；如果是引用数据类型，除了function返回的是function之外，其他返回值都是Object，所以用typeof来检测数据类型有一定局限性。

instanceof属性测试它左边对象是否为右边对象的实例，也就是如果右边对象是数组，那么就会测试左边对象是否为数组，如果是，返回true，否则返回false；使用instanceof的前提是两者必须是对象。

14.Document对象属性中，getElementsByClassName和getElementById有什么区别？

getElementsByClassName()返回的是整个元素集合对象；而getElementById()返回的是第一个对象。

15.函数与方法的区别？

函数是可执行的JavaScript代码块，可以自定义以及JavaScript内置定义；方法是通过对象来调用的函数，它与一个对象相关联，本质上也是一种函数，不过是函数里的特殊。

16.== 与 ===的区别？

两个等号与三个等号相比较，三个等号更加严谨严格；

两个等号会让两边发生强制类型转换，将两边都转换成数字型，再来比较相不相等；

而三个等号不允许强制类型转换，所以两边如果数据类型不一致，也是不相等的。

let a = 10;
let b = "10";
console.log("== ",a == b);
console.log("===",a === b);

17."[]==![]"的输出结果是什么？

输出结果是true。首先取反这个运算符会将右边的空数组转成布尔型，空数组（真值）的布尔型是true，然后取反是false；然后两个等号使两边都转成数字型再比较，左边数字型是0，右边false的数字型也是0，所以输出的结果就是true。

console.log([]==![]);

18.如何阻止默认事件？

方法一：return false;。该方法在原生JS中只能阻止默认事件，不能阻止事件冒泡。

方法二：e.preventDefault()方法。它可以用来阻止默认事件，但是阻止不了事件冒泡

19.JS中get和post的区别

语义上：get是向服务器提交数据；post是从服务器获取数据。
参数上：get以queryString形式来携带参数，将参数存放在地址栏中；post是以requestBody携带参数，不在地址栏中。
安全性：由于参数的存放位置，post相对更加安全，get参数暴露在地址栏上，安全性相对较低。
存放量：get参数存放数量受地址栏大小限制，而post只受服务器限制。

20.同步任务、异步任务（宏任务/微任务）是什么？优先级？

由于JS是单线程的，所以同步任务之间要等前一个任务执行完，后一个才能进入主线程执行；异步任务

宏任务和微任务都属于异步任务，属于宏任务的有：setTimeout定时器、事件绑定、ajax、回调函数；属于微任务的有：Promise .then() .cath() .finally()、MutationObserver。

优先级顺序：同步任务>微任务>宏任务

21.ES6有什么新特性？

let、const命令和块级作用域，这两个命令就是作用于块级作用域的；
promise异步请求；
set、map；
数组方法，Array.form、Array.of等
扩展运算符[…]
箭头函数=>{}

22.深拷贝和浅拷贝区别 ★

拷贝也可以理解为复制和克隆，浅拷贝和深拷贝的区别就是：

A拷贝给B，当A内容改变时，会直接影响B，这就是浅拷贝；

A拷贝给B，当A内容改变时，不会影响B，这就是深拷贝。

其原理是：

浅拷贝增加了一个指针去指向该内容的内存地址，所以当内容改变时，浅拷贝出来的内容也会随指向的内容改变；深拷贝则是开辟了一个新内存空间去放拷贝的内容，所以内容改变时不会受影响。

23.JS中函数的参数传递方式？

有两种方式，值传递和引用传递；基础数据类型就属于值传递，引用数据类型就是引用传递。

值传递类似于深拷贝，将值传递给函数中的变量，之后两个变量完全独立不会互相影响；引用传递类似于浅拷贝，它传递的是指向该变量的指针，所以之后两个变量会互相影响。

24.数组操作——添加、删除、截取

添加：

push()尾部添加

unshift()头部添加

splice()插入，第一个参数是插入的起始位置，第二个参数是起始位置数量，第三个是插入内容。（splice会改变原有数组）

删除：

splice()删除，第一个参数是起始位置，第二个参数是删除的数量。

截取（裁剪）：

slice()不会改变原有数组的值，会新建一个数组。

只有一个参数时，会截取参数索引之后所有的值；（索引是数组值的下标）

有两个参数时，第一个参数时起始索引，第二个参数是结束索引，会截取起始索引到结束索引中的值（不包括结束索引的值）

Vue部分

24.for in 和for of有什么区别？

for in用于枚举对象中的非符号键的属性，for of用于遍历可迭代对象的元素；简单理解就是for in在对象中遍历的是键名，for of则会报错；for in在数组中遍历的是数组下标，for of 遍历的是内容。

25.v-if和v-for为什么避免一起用？

1.v-if是条件性的渲染一块内容，v-for是基于一个数组来渲染一个列表。

2.v-for优先级比v-if高，如果将它们用在同一元素上会造成性能上的浪费，因为每次渲染都会先进行循环再去条件判断。

如果要一起用的话，可以将v-if放在外层的template进行条件判断，在内部进行v-for循环。

26.v-if和v-show分别适用于什么情况？★

v-if会将DOM元素在DOM树中进行移除或复原，有更高的切换消耗，所以适用于切换条件较少的情况；

v-show是修改元素的CSS属性来进行显示和隐藏，如果需要频繁的切换，就可以使用v-show。

27.watch和computed有什么区别？★

watch是监听属性，监听数据变动，它有两个参数，分别是数据变化前和变化后的值；computed是计算属性，任何复杂逻辑都可以用到它，它是具有缓存的。

第一，watch是没有缓存的，而computed是有缓存的，computed根据它们的响应式依赖进行缓存，只有依赖发生改变时它才会重新求值。

第二，computed中的方法是可以直接在插值表达式中使用，而watch不行。

第三，watch中可以放异步方法，而computed中不能放。

28.Vue传值

传值的类别有三种：

1.父组件传子组件

父组件传值给子组件，子组件用props接收父组件传来的值。

2.子组件传父组件

子组件传值给父组件，需要用到$emit去传，其中有两个参数，第一个是自定义事件，第二个就是传过去的值，然后再父组件中，子组件标签中用自定义事件获取传来的值。

3.子组件传子组件（兄弟传值）

兄弟传值的话，可以用bus总线传值，需要新建并导入bus.js，mian.js中引用并使用它，这样子组件就可以用 $b u s .$ emit传值，参数也与 $e m i t 传值相似；另一个子组件用$ bus.$on接收值，后面接的是一个回调函数，函数中对接收的值进行操作。

原理及其他部分

29.闭包的特性和优缺点

闭包特性：1.函数嵌套函数。2.函数内部可以引用外部的参数和变量。3.参数和变量不会被垃圾回收机制回收。

优点：1.变量长期储存在内存中。2.避免全局变量的污染。3.私有成员的存在。

缺点：1.常驻内存会增加内存使用量。2.使用不当会造成内存泄露。

30.浏览器从输入 `url` 到页面渲染之间做了哪些事情？★

浏览器解析url获取协议、端口、主机和path，再获取IP地址，向服务器发起http请求
服务器接受请求并解析处理，完成后发起http响应并返回数据
浏览器接收http响应，载入文件进行解析，建立相应内部结构（HTML的DOM树）
载入解析的资源文件，渲染页面