前端面试题汇总（一）

1.html语义化

HTML语义化是指在编写HTML代码时，尽可能使用具有明确含义的标签来描述页面内容的结构和意义，以便让浏览器、搜索引擎和开发者更好地理解和解释页面内容。通过使用语义化的HTML标签，可以提高页面的可访问性、可维护性和可读性，同时也有助于优化页面的SEO。
一些常见的语义化标签包括：<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>等。通过使用这些标签，可以清晰地划分页面的不同部分，使页面的结构更加清晰和易于理解。

2.盒模型

盒模型分为两种，一种为标准盒模型，另一种为怪异盒模型，默认为标准盒模型。盒的每个部分包含margin(外边距区域),border(边框区域),padding(内边距区域),content(内容区域)。标准盒模型设置宽高指的是内容区域，不包括内边距和边框，怪异盒设置宽高包含了内边距和边框。设置标准盒模型box-sizing: content-box设置怪异盒模型box-sizing: border-box

3.浮动

浮动（Float）是一种布局方式，可以让元素脱离正常文档流，沿着其容器的左侧或右侧浮动。通过浮动元素，可以实现文字环绕图片、多栏布局等效果。但是使用浮动容易造成父级盒子塌陷，影响其他兄弟元素的布局。清除浮动的方法有1.在浮动元素的父元素上添加一个clearfix类
.clearfix::after { content: ""; display: block;clear: both;}、2.在父元素中添加overflow:hidden超出部分隐藏，3.给父级添加高度，4.浮动元素后面添加一个空的div，并设置clear:both

4.样式优先级规则

1.!important声明的样式权重最高，为1000。
2.内联样式（Inline Styles）的权重为1000。
3.ID选择器（#id）的权重为100。
4.类选择器（.class）、属性选择器（[attribute]）和伪类选择器（:pseudo-class）的权重为10。
5.标签选择器（element）、伪元素选择器（::pseudo-element）和通配符选择器（*）的权重为1。
6.继承样式的权重为0。

5.css设置尺寸的单位

1.像素（Pixel，px）：像素是最常用的尺寸单位，表示屏幕上的一个像素点。
2.百分比（Percentage，%）：百分比单位是相对于父元素的尺寸来设置元素的尺寸。
3.em：em是相对长度单位，表示元素的字体大小。1em等于元素的字体大小，可以用于设置元素的宽度、高度等。
4.rem：rem是相对于根元素（html元素）的字体大小的单位。1rem等于根元素的字体大小，可以用于实现相对于整个页面的尺寸控制。
5.vh和vw：vh表示视口高度的百分比，vw表示视口宽度的百分比。可以根据视口的大小来设置元素的尺寸。

6.BFC

BFC（Block Formatting Context）是指块级格式化上下文，BFC是一个独立的渲染区域，其中的元素按照一定的规则进行布局，不会影响到外部的布局。
BFC的形成条件包括：
根元素或包含根元素的元素（例如）。
浮动元素（float不为none）。
绝对定位元素（position为absolute或fixed）。
行内块元素（display为inline-block）。
表格单元格（display为table-cell）。
overflow不为visible的块级元素。
用途：
清除内部浮动(overflow:hidden)，解决外边距合并问题，解决父元素高度塌陷问题

7.设置水平垂直居中

1.设置元素相对父级定位
position:absolute;left:50%;top:50%;transform: translate(-50%, -50%);
2.设置父级元素为弹性盒子
display: flex; justify-content: center; align-items: center;
3.设置元素的父级为网格元素
display: grid;justify-content: center;align-items: center;
4.设置元素父级为表格元素，子元素为行内块元素
display: table-cell;text-align: center; vertical-align: middle;
display: inline-block;

8.三栏布局

通常为圣杯布局和双飞翼布局， 圣杯布局的实现方案：三个元素放在同一个父级元素中，代表中间盒子的元素放在最前面，父级盒子设置左右padding，三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度，设置左边盒子左边距-100%同时相对自身定位，右边平移自身宽度，右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开 双飞翼布局的实现方案：三个盒子对应三个元素，其中中间盒子套了两层，中间盒子内部盒子设置margin,三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度,设置左边盒子左边距-100%,右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开

9.JS的数据类型

JS数据类型分为两类：一类是基本数据类型，也叫简单数据类型，包含7种类型，分别是Number 、String、Boolean、BigInt、Symbol、Null、Undefined。另一类是引用数据类型也叫复杂数据类型，通常用Object代表，普通对象，数组，正则，日期，Math数学函数都属于Object。
数据分成两大类的本质区别：基本数据类型和引用数据类型它们在内存中的存储方式不同。
基本数据类型是直接存储在栈中的简单数据段，占据空间小，属于被频繁使用的数据。
引用数据类型是存储在堆内存中，占据空间大。引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址，当解释器寻找引用值时，会检索其在栈中的地址，取得地址后从堆中获得实体。

10.null和undefined区别

undefind 是全局对象的一个属性，当一个变量定义后没有被赋值或者一个函数没有返回值或者某个对象不存在某个属性却去访问或者函数定义了形参但没有传递实参，这时候都是undefined。undefined通过typeof判断类型是’undefined’。 null代表对象的值未设置，相当于一个对象没有设置指针地址就是null。null通过typeof判断类型是’object’。null 其实属于自己的类型 Null，而不属于Object类型，typeof 之所以会判定为 Object 类型，是因为JavaScript 数据类型在底层都是以二进制的形式表示的，二进制的前三位为 0 会被 typeof 判断为对象类型，而 null 的二进制位恰好都是 0 ，因此，null 被误判断为 Object 类型。