前端常见面试题

原创已于 2022-03-14 20:31:42 修改 · 538 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #css

于 2022-03-08 20:50:16 首次发布

本文总结了前端面试中常见的HTML和CSS问题，包括浏览器内核、元素类型、HTML5新标签、CSS布局理解、清除浮动、隐藏元素方法、选择器权重、定位方式、CSS中link与@import的区别、跨域问题及其解决方案，以及前端性能优化策略等，旨在帮助开发者提升面试准备。

HTML部分

1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

在这里插入图片描述

1、IE浏览器（Internet explorer） trident内核

2、火狐浏览器（Firefox）   gecko内核

3、谷歌浏览器（Chrome） Blink(基于webkit，Google与OperaSoftware共同开发)

4、苹果浏览器（Safari）                webkit内核

5、欧朋浏览器（Opera）               以前是presto内核，Opera现已改用GoogleChrome的Blink内核

2、行内元素、块元素和行内块元素都有什么？区别是什么？ *****

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换：

(1)display:inline;转换为行内元素

(2)display:block;转换为块状元素

(3)display:inline-block;转换为行内块状元素

行内元素主要有：

span,strong, em, label, select, textarea

特征如下：

(1)设置宽高无效

(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

(3)不会自动进行换行

块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。

块状元素特征：

(1)能够识别宽高

(2)margin和padding的上下左右均对其有效

(3)可以自动换行

(4)多个块状元素标签写在一起，默认排列方式为从上至下

行内块状元素

综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。

行内块状元素主要有img、input.

特征：

        (1)不自动换行

        (2)能够识别宽高

        (3)默认排列方式为从左到右

3、<image>标签上title属性与alt属性的区别是什么？

title属性为设置该属性的元素提供建议性的信息，alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的

4、请写出至少5个html5新增的标签，并说明其语义和应用场景？

section：定义文档中的一个章节

nav：定义只包含导航链接的章节

header：定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。

footer：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。

aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。

5、html5有哪些新特性、移除了那些元素？ ***

a. HTML5 主要是关于图像，位置，存储，多任务等功能的增加。

b. 拖拽释放(Drag and drop) API

c. 语义化更好的内容标签（header,nav,footer,aside,article,section）

d. 音频、视频API(audio,video)

e. 画布(Canvas) API

f. 地理(Geolocation) API

g. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失

h. sessionStorage 的数据在页面会话结束时会被清除

i. 表单控件，calendar、date、time、email、url、search

移除的元素：

a. 纯表现的元素：basefont，big、u等；

b. 对可用性产生负面影响的元素：frame，frameset等

6. iframe的优缺点？ **

优点：

a. 解决加载缓慢的第三方内容如图标和广告等的加载问题

b. iframe无刷新文件上传

c. iframe跨域通信

缺点：

a. iframe会阻塞主页面的Onload事件

b. 无法被一些搜索引擎索引到

c. 页面会增加服务器的http请求

d. 会产生很多页面，不容易管理。

7、 (1)设置文字水平居中的属性是？(2)设置标签盒子水平居中的属性是？

（1）text-align:center;

（2）margin:0 auto;

二、CSS部分

1、谈谈你对CSS布局的理解？

常见的布局方式：固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding

2、请列举几种可以清除浮动的方法（至少两种）？

常用的4种方法

1. 额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .fahter{
        width: 400px;
        border: 1px solid deeppink;
    }
    .big{
        width: 200px;
        height: 200px;
        background: darkorange;
        float: left;
    }
    .small{
        width: 120px;
        height: 120px;
        background: darkmagenta;
        float: left;
    }
    .footer{
        width: 900px;
        height: 100px;
        background: darkslateblue;
    }
    .clear{
        clear:both;
    }
    </style>
</head>
<body>
    <div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
    </div>
    <div class="footer"></div>
</body>

如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。

优点：通俗易懂，方便

缺点：添加无意义标签，语义化差

不建议使用。

2. 父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

 .fahter{
     width: 400px;
     border: 1px solid deeppink;
     overflow: hidden;
  }

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

不推荐使用

3. 使用after伪元素清除浮动（推荐使用）

/*伪元素是行内元素 正常浏览器清除浮动方法*/
    .clearfix:after{
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
    /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
        *zoom: 1;
    }
 
<body>
    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>

优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

推荐使用

4.使用before和after双伪元素清除浮动

  .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;

    }

优点：代码更简洁

缺点：用zoom:1触发hasLayout.

推荐使用

3、请列举几种隐藏元素的方法？

a. visibility: hidden；这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在。

b. opacity: 0；一个CSS3属性，设置0可以使一个元素完全透明，制作出和visibility一样的效果。

d. display: none；元素会变得不可见，并且不会再占用文档的空间。

4、css什么属性可以继承？ *****

1、字体系列属性

font-family：字体系列

font-weight：字体的粗细

font-size：字体的大小

font-style：字体的风格

2、文本系列属性

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：单词之间的间距

letter-spacing：中文或者字母之间的间距

text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）

color：文本颜色

总结就是和字体以及文本相关的属性可以继承

5、请简述CSS的选择器？

元素选择器：* 、标签选择器、id选择器、类选择器

关系选择器：子集选择器和后代选择器

属性选择器：E[att]、E[att="val"]等等

伪类选择器：E:link、E:visited、E:hover、E:active E:first-child、E:last-child等

伪对象选择器：E:before和E:after等

6、css选择器的优先级是？

!important>id>类>标签选择器

7、请简述CSS的权重规则？

一个行内样式+1000，一个id+100，一个属性选择器/class类/伪类选择器+10，一个元素名/伪对象选择器+1。

8、CSS中 link 和@import 的区别是什么？ *****

两者都是外部引用 CSS 的方式，但是存在一定的区别：

（1）link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。

（2）link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。

（3）link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。

（4）link支持使用Javascript控制DOM改变样式；而@import不支持。

9、定位有几种？有什么区别？

相对定位：positive:relative;它是参照它在页面中原来的位置进行移动的。

绝对定位：position:absolute;它是相对于距离它最近的有定位的父元素进行移动的

固定定位：position:fixed;它是相对于页面的位置进行移动的

注意：只有添加了定位的元素才可以设置z-index属性，后面的值代表层级，没有px等单位。

10、如何让一个盒子水平垂直居中？ *****

1. //已知宽高用定位让盒子距离左上的高度为50%，然后在向左上偏移自身一半距离。

<div class="div1"></div>
<style>
    .div1{
        width:400px;
        height:400px;
        position:absolute;
        left:50%;
        top:50% 
        margin:-200px 0 0 -200px;
    }   
</style>

2.//未知宽高用定位让它距离上下左右都是0，然后设置margin: auto; 就行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .div1{
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            border: 1px solid #000;
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>
</html>

3.//未知宽高方法二：先用定位让盒子左上上距离50%，再用transform属性往回偏移自身的50%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .div1{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            border: 1px solid #000;
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>
</html>

4.用flex伸缩布局实现水平垂直居中

<style>
    .box1{
        border: 1px solid #000;
        width: 500px;
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box2{
        width:400px;
        height: 400px;
        border: 1px solid #000;
    }
</style>
<body>
    <div class="box1">
        <div class="box2"></div>
</div>
    
</body>

11.请描述一下cookies，sessionStorage和localStorage的区别？

SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。区别在于前两者属于WebStorage，创建它们的目的便于客户端存储数据。而Cookie早在网景公司的浏览器中就开始支持，最初目的是为了保持HTTP的状态。

Cookie（也叫Web cookie或者浏览器Cookie）是服务器发送到用户浏览器并保存在浏览器上的一块数据，它会在浏览器下一次发起请求时被携带并发送到服务器上。比较经典的，可以它用来确定两次请求是否来自于同一个浏览器，从而能够确认和保持用户的登录状态。Cookie的使用使得基于无状态的HTTP协议上记录稳定的状态信息成为了可能。

localStorage

localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持，更多用他来存储数据。

sessionStorage

sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空

区别：

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

12.一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化

方法一：

<style>
    .box1{
        width: 100px;
            height: 200px;
            background-color: #ccc;
            float: left;
    }
    .box2{
        background-color: #ff0;
            margin-left: 100px;
            height: 200px;
    }
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

方法二：伸缩布局实现

<style>
    .box1{
            display: flex;
            align-items: center;
    }
    .box2{
        flex-basis: 100px;
        background-color: #ccc;
        height: 300px;
    }
    .box3{
        background-color: #ff0;
        height: 300px;
        flex-grow: 1;
    }
</style>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

13、什么是跨域？如何解决跨域问题？

什么是跨域？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

所谓同源是指，域名，协议，端口均相同，只要有一个不同，就是跨域。不明白没关系，举个栗子：

http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）

http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）

http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）

http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）

http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

如何解决跨域问题？

JSONP、CORS、通过修改document.domain来跨子域、使用window.name来进行跨域、HTML5中新引进的window.postMessage方法、在服务器上设置代理页面

1、JSONP

原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求。

2、CORS

服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

3、通过修改document.domain来跨子域

将子域和主域的document.domain设为同一个主域.前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域

主域相同的使用document.domain

4、使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的

14、前端如何优化网站性能？

1、减少 HTTP 请求数量

在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。