前端面试问题总结（1）

目录

前端面试问题总结（1）

---

1.css盒子模型

外边距：margin(透明）

边框：border(有宽度的）

内边距：padding

文字/图像：文本

当指定一个css元素的宽度和高度属性时：你只是设置了内容分区域的宽度和高度。

div { width：300px; border:25px solid green; padding:25px; margin:25px; }

1.css 2D转换

2D转换就是对元素进行移动，缩放，转动，拉长，拉伸。

1.1 translate（）

translate（移动X轴距离，移动Y轴距离） translate（50px，30px）

1.2 rotate（转动的度数）

-webkit-transform:rotate(30deg) rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

1.3 scale()

改元素增加或者减少的大小。 transform：scale(2,3) //转变为宽度为原来的大小的2倍，高为原始高度的3倍

1.4skew()倾斜

transform:skew(30deg,40deg) 水平倾斜，垂直倾斜

2.css 3D转换

允许您使用 3D 转换来对元素进行格式化。围绕XY轴转动。

2.1 rotateX（）

transform：rotateX（20deg） //围绕X轴转20度

2.2 rotateY（）

transform：rotateY（30deg） //围绕Y轴

3.css过度transition

transition：width 2S； //指定添加效果的属性，效果持续的时间

4.css动画

@keyframes创建动画，需要绑定一个选择器

规定动画名称

规定动画时长

div{ 
animation：myfirst 5s; 
}
 @keyframe myfirst {
 frome{baackground:red;}
 to{backgroud:yellow;} 
} 
//请用百分比来规定变化发生的时间，
 
//或用关键词 "from" 和 "to"，等同于 0% 和 100%。
 //0% 是动画的开始，100% 是动画的完成。

5.css框大小

width属性不包含padding和margin。width只是元素的宽度。

width(宽) + padding(内边距) + border(边框) = 元素实际宽度

border框出来的大小，margin是透明的。

设置了padding盒子会变大。

box-sizing:包含了内边距和边框的大小。

设置了padding大小只是在width中分配出大小。盒子不会变大

.div1 {

width: 300px;

height: 100px;

border: 1px solid blue;

box-sizing: border-box;

}
//两个盒子的大小相同

.div2 {

width: 300px;

height: 100px;

padding: 50px;

border: 1px solid red;

box-sizing: border-box;

}

6.DOCtype 的作用？严格模式与复杂模式如何区分？有何意义

Doctype声明位于文档中的最前面，处于标签之前。目的是告知浏览器的解析器，用什么文档类型规范来解析这个文档。

标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作.

7，行内元素有哪些？块元素？空元素？

首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

（1）行内元素有：a b em strong span input img select（强调的语气）
（2）块级元素有：h1~h6（标题元素） div（盒子） p ol ul li（列表元素） dl dt dd(表格元素)

（3）常见的空元素：
    <br> <hr> <img> <input> <link> <meta>
    鲜为人知的是：
    <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

8.页面导入样式时，使用link 和@import 的区别？

提供者不一样：link 是XHTML提供的，除了提供css的加载，还可以定义RSS、Rel连接属性；

                          import是css提供，仅仅是加载css。

加载方式不同：页面加载时，link同时被加载；而import引用的css会等页面加载完之后再加载， 

 兼容性：link 属于HTML标签无兼容性问题；import有，只有IE5以上才能被识别。

9.对浏览器内核的了解？

包括：渲染引擎和js引擎

渲染引擎：主要就是负责网页的内容，网页结构HTML等和css，以及计算显示方式在显示器上。不同的浏览器对网页语法理解不同，渲染的效果也不同。

js引擎：解析和执行js来是实现网页的动态效果。

10，HTML5有哪些新特性？移除了哪些元素？

html5新特性：

  1） 增加了用于画图的canvas。

  2）用于媒介回放的video和audio

  3）对本地离线储存有了更好的支持，loadStorage长期本地储存数据，浏览器关闭数据不丢失。

sessionStorage浏览器关闭数据自动删除。

   4）新增内容的控件：article、headle、footer、nav、section

   5）新增表单控件：calender、time、date、search、URL、email 

移除的元素有：

纯表现的元素：basefont 、big、center、 fonts、s 、strike、tt、u

框架元素：frame、frameset、noframes.

• 结构性元素 --> 负责上下文结构的定义

section：用于区域的章节描述
header：页面主体上的头部
footer：页面的底部（页脚），通常会标出网站的相关信息
nav：专门用于菜单导航、链接导航的元素，是 navigator 的缩写
article：用于表现一篇文章的主体内容，一般为文字集中显示的区域

级块性元素 --> 主要完成 web 页面区域的划分
aside：用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容
figure：是对多个元素进行组合并展示的元素，通常与 ficaption 联合使用
code：表示一段代码块
dialog：用于表达人与人之间的对话，该元素包含 dt 和 dd 这两个组合元素， dt 用于表示说话者，而 dd 用来表示说话内容

行内语义性元素 --> 主要完成 web 页面具体内容的引用和描述，是丰富内容展示的基础
meter：表示特定范围内的数值，可用于工资、数量、百分比等
time：表示时间值
progress：用来表示进度条，可通过对其 max 、 min 、 step 等属性进行控制，完成对进度的表示和监视
video：视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式
audio：音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种\音频媒体格式

交互性元素 --> 主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础
details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与 legend 交互才会显示出来
datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新
menu：主要用于交互菜单（曾被废弃又被重新启用的元素）
command：用来处理命令按钮
https://blog.csdn.net/qq_41666142/article/details/116242968

11.简述vue的响应式原理。

1）当一个Vue实例创建时，vue会遍历data选项的属性（property），用Object.defineProperty将这些属性转为getter/setter，并记录在相关依赖中。getter和setter让vue能够追踪这些依赖。在属性被访问和修改时通知相应的依赖进行变更。

2）所有的组件实例都会有对应的watcher实例，而watcher实例会依赖相应的setter。

 3）当数据变化时，setter会被调用，setter会通知相应的watcher ,watcher会更新相应的视图。

 vue是无法检测对象的属性的添加和移除，所以在进行对象初始化的时候，会用object.defineproperty将这些属性转化为gettter和setter，使其成为响应式。

12.简述一下你对HTML语义化的理解

HTML语义化就是页面内容结构化，结构更清晰，便于浏览器引擎进行解析；即使没有css样式买也可以以一种页面的形式显示，便于阅读，是阅读源码的读者更容易将页面进行分块，便于阅读和维护。

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

cookies是网站为了标识用户的身份而储存在本地终端上的数据。cookies始终在同源的http请求中携带，会在浏览器和服务器之间来回传递。

sessionStorage和localStorage不会自动的把数据传送给服务器，仅仅是储存在本地。

储存大小不同：cookies数据大小不能超过4KB。sessionStorage和localStorage可以达到5M。

有期时间不同：

localStorage储存持久数据，浏览器关闭数据不会删除。除非主动删除

sessionStorage数据在当前浏览器窗口关闭数据自动删除。

cookies设置的cookies过期时间之前一直有效。

14.说一下浏览器从发起请求到呈现页面的整个过程？

> DNS解析ip地址 
> TCP三次握手连接 
> 发送HTTP请求 
> 服务器处理，返回HTTP响应
> 浏览器解析响应 
> 构建DOM树、CSSrule树，合并生成render树，计算布局并绘制