前端面试题

  目录

1.css,html,h5新特性,css3

2.jq,es6,原型,闭包,this指向，正则，

3.vue/vue3

4.ts/js

5.小程序

6.uniapp

7.react

8.打包 ，git

1.css,html,h5新特性,css3

HTML、CSS、JavaScript简介和分工？

html 是超文本标记语言，是用来描述网页的一种语言。

css用于定义如何显示html。

javaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

对于一个网页来说html相当于网页的结构整体框架，css就是美化html，javaScript用来定义网页的行为。

• 什么是css盒模型？和怪异盒模型的区别

标准盒模型：从里往外包括content 内容 ，padding内边距，border边框，margin外边距（标准的盒模型宽度是由content+padding+border决定宽度的总和

怪异盒模型：的结构是和标准盒模型相同，但是width：就是content宽度，不会受padding和border的影响。

• css选择器有哪些？选择器的优先级

id选择器（#id)唯一

class选择器 class=box

h1,h3,div,p,标签选择器

h1+p,相邻选择器

h1>p子类选择器

h1 p后代选择器

* 选择器

a:hover ,li:nth-child伪类选择器

iimportant 权重最近

style内联样式

• 元素选择器：1，class选择器：10，id选择:100,内联样式：1000 ，!important
• css3新增伪类 

p:first-of-type选择下面的第一元素

p:last-of-type选择下面的最后一个元素

p:nth-child(n)选择下面的低n个元素

• 如何居中div?

• 1.水平居中直接设置css样式

margin: auto;

2.使用弹性盒子布局

dipaly:flex;
justify-content:center;
align-items:center;

3.使用绝对定位

        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;

4.根据calc和绝对定位减去自身宽高的一半

position: absolute;
top: calc(50% - x);
left: calc(50% - y);

• dispaly有哪些值？作用
• inilen(行)

用来设置显示短文本的页面区域划分（特点：允许一行多个元素,不可设置宽高，默认内容撑开，支持部分css样式）

<span></span>
<i></i>
<strong></strong>

• none(隐藏）
• block(块级)key

块级标签用于页面划分区域(特点：独占一行，可以设置宽高，默任有内容撑开)

<div></div>
<h1></h1>
<p></p>

• inline-block(行内块)

可以通过给元素设置行内块（改变行标签不可以设置宽高,支持部分css样式,解决块级标签独占一行等问题）

dipaly:inline-block

• HTML5&CSS3新特性

• 新增语义化标签可以直接从标签看出所写内容是哪个模块

header、nav、aside、article、section、main、figure、footer

• mark 对文本进行标记
• input新特性（color email 等）

Web 存储

localStorage,SessionStorage

• localStorage为永久存储

存储大小为5MB,

• SessionStorage为会话存储