前端面试题总结（HTML篇和CSS篇）

HTML

`DOCTYPE`标签

DOCTYPE
- 告诉浏览器以什么样的文档规范解析文档
- 标准模式和兼容模式
  - 标准模式 -> 正常，排版和js运作模式都是以最高标准运行
  - 兼容模式 -> 非正常

meta 标签可以做什么？

用于提供关于HTML文档的元信息。

常用的meta标签：

设置字符集（charset）：

<meta charset="UTF-8">

指定视口（viewport）：在移动设备上，控制页面在不同设备上的显示比例和缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0">

描述网页内容（description）：有助于搜索引擎显示相关内容。

<meta name="description" content="网页描述">

关键词（keywords）：有助于搜索引擎优化（SEO）。

<meta name="keywords" content="关键词1,关键词2,...">

作者和版权信息：

<meta name="author" content="作者名">
<meta name="copyright" content="版权信息">

刷新和重定向：实现页面自动刷新和重定向。

<meta http-equiv="refresh" content="5;url=http://example.com">

X-UA-Compatible：指定IE浏览器的兼容模式。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

script标签中defer和async都表示了什么

众所周知script会阻塞页面的加载，如果我们要是引用外部js，假如这个外部js请求很久的话就难免出现空白页问题，好在官方为我们提供了defer和async
defer
```
<script src="d.js" defer></script>
<script src="e.js" defer></script>
```
- 不会阻止页面解析，并行下载对应的js文件
- 下载完之后不会执行
- 等所有其他脚本加载完之后，在DOMContentLoaded事件之前执行对应d.js、e.js
async
```
<script src="b.js" async></script>
<script src="c.js" async></script>
```
- 不会阻止DOM解析，并行下载对应的js文件
- 下载完之后立即执行
补充，DOMContentLoaded事件
- 是等HTML文档完全加载完和解析完之后运行的事件
- 在load事件之前。
- 不用等样式表、图像等完成加载

常见的行内元素和块级元素都有哪些？

行内元素 inline
- 不能设置宽高，多个元素共享一行，占满的时候会换行
- a、span、input、img、textarea、label、select
块级元素block
- 可以设置宽高，一个元素占满一整行
- p、h1-h6、div、ul、li、table
inline-block
- 可以设置宽高，多个元素共享一行，占满的时候会换行

常见的替换元素和非替换元素？

替换元素
- 指若标签的属性可以改变标签的显示方式就是替换元素，比如input的type属性不同会有不同的展现，img的src等
- img、input、iframe
非替换元素
- div、span、p

HTML5相比于之前的有什么优化？

HTML5新增：
（1）新增语义化标签：nav、header、footer、aside、section、article
（2）音频、视频标签：audio、video
（3）数据存储：localStorage、sessionStorage
（4）canvas（画布）、Geolocation（地理定位）、websocket（通信协议）
（5）input标签新增属性：placeholder、autocomplete、autofocus、required
（6）history API：go、forward、back、pushstate

HTML5移除的元素有：

纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes

CSS

css选择器优先级

!important 无条件优先
内联样式1000
id选择器 100
类选择器、伪类选择器、属性选择器（如.class、li:last-child、[attr=value]） 10
标签选择器、伪元素选择器（如div、::after） 1
通配符选择器（*）、后代选择器（li a）、子选择器（ul li）和相邻兄弟选择器（h1+p） 0

注意事项：

!important声明的样式的优先级最高；
如果优先级相同，则最后出现的样式生效；
继承得到的样式的优先级最低；
通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；
样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

display的属性值及其作用

none：元素不会显示，并且会脱离文档流。
block：元素显示为块级元素，占据一整行。
inline：元素显示为行内元素。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block：元素显示为行内块级元素。不会换行，但可设置宽高。
list-item：像块类型元素一样显示，并添加样式列表标记。
table：元素会作为块级表格来显示。
inherit：继承父元素 display 属性。
flex：元素显示为弹性容器，子元素使用弹性布局。

link标签和import标签的区别

link属于html；而@import属于css
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link是html标签，无兼容问题；而@import只有IE5以上才能识别。
link方式样式的权重高于@import的。
link支持使用Javascript控制DOM去改变样式；而@import不支持。

伪元素和伪类的区别和作用？

伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：

p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}

伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：

a:hover {color: #FF00FF}
p:first-child {color: red}

总结：伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变。

对盒模型的理解：标准盒模型、IE盒模型（怪异盒模型）

盒模型都是由四个部分组成的，分别是margin、border、padding和content。
标准盒模型和IE盒模型的区别在于设置width时，所对应的范围不同：

标准盒模型的width属性的范围只包含了content，
IE盒模型的width属性的范围包含了border、padding和content。

可以通过修改元素的box-sizing属性来改变元素的盒模型：

box-sizing: content-box表示标准盒模型（默认值）
box-sizing: border-box表示IE盒模型（怪异盒模型）

CSS3有哪些新特性

盒子模型：box-sizing
背景与边框：多重背景图片 background-image、background-size、边框 border-image、border-radius
字体与文本效果：@font-face、文本阴影 text-shadow 和换行 word-wrap
变形transform和过渡transtion：transform属性可以对元素进行平移translate、旋转rotate、缩放scale等变形操作
动画animation：@keyframes
多列布局：column-count、column-gap
flex布局和Grid布局
媒体查询：@media
CSS变量：定义--borderColor、使用var(--borderColor)
伪类和伪元素：:nth-child()、::before
线性渐变 gradient

css 变量

使用--开头定义变量，用var()去使用

css优化和提高性能的方法有哪些？

合并和最小化css文件：减少文件大小和请求数
使用css预处理器：sass、less
减少使用高级选择器：优先使用类选择器
避免冗余样式：删除未使用的css规则
合理使用css sprite：减少http请求
使用css动画的调优：避免复杂的动画，尽量使用transform和opacity，它们对性能影响较小
css放置位置：css文件应放在head标签内
使用内联样式进行关键渲染路径优化：对于首屏重要的样式，可以使用内联css，减少首次渲染时间

flex布局

看看阮一峰老师的文章叭！Flex 布局教程

grid布局

同样是阮一峰老师的，CSS Grid 网格布局教程

请说明px,em,rem,vw,vh,rpx等单位的特性

px
- 像素
em
- 当前元素的字体大小
rem
- 根元素字体大小
vw
- 100vw是总宽度
vh
- 100vh是总高度
rpx
- 750rpx是总宽度

常见的CSS布局单位

常用的布局单位包括像素（px），百分比（%），em，rem，vw/vh。
（1）像素（px）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素：

CSS像素：为web开发者提供，在CSS中使用的一个抽象单位；
物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。

（2）百分比（%），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。
（3）em和rem相对于px更具灵活性，它们都是相对长度单位，它们之间的区别：em相对于父元素字体大小，rem相对于根元素字体大小。
（4）vw/vh是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。

响应式布局的方法

百分比%布局。通过百分比单位来使元素的大小随屏幕或窗口的宽度或高度变化而变化。这种方法适用于宽度和高度属性，但不适用于padding、border和margin属性。百分比布局的缺点是计算较为复杂，尤其是在需要定义元素宽度和高度时。
媒体查询（CSS3 @media 查询）。通过编写CSS样式来根据屏幕或设备的特定属性（如宽度、高度、方向等）应用不同的样式。这种方法允许开发者对布局进行细致的调整，但需要在每个不同的分辨率下编写一套CSS样式。需要注意的是，某些浏览器（如IE6、7、8）可能不支持媒体查询。
rem响应式布局。在HTML元素的font-size上使用rem单位，使得元素的大小相对于HTML根元素的font-size进行缩放。这种方法适用于不同的屏幕尺寸，可以通过媒体查询动态设置HTML元素的font-size值，或者使用JavaScript动态计算。
vw/vh响应式布局。根据PSD文件中的宽度或高度作为标准，将元素的尺寸单位从px转换为vw或vh（1vw等于视口宽度的1/100）。这种方法适用于保持不同屏幕下元素显示效果的一致性，通常用于图片信息的展示。
Flex弹性盒子布局。使用Flex布局模型来创建灵活的响应式布局，适用于需要多列布局或响应式布局的场景。
此外，还有其他一些布局方法，如固定布局、流式布局、弹性布局等，这些方法各有优缺点，适用于不同的设计和开发需求。

媒体查询常用的宽度

屏幕	设备	断点
超小屏幕	手机	<768px
小屏幕	平板	>=768px ~ <992px
中等屏幕	桌面	>=992px ~ <1200px
大屏幕	桌面	>=1200px

常用媒体查询尺寸：
1200px
1100px 1000px 1024px
980px
768px 720px
640px
480px
375px
320px
280px

三栏布局

三栏布局一般多指左右两栏宽度固定，中间栏宽度自适应的布局。在能实现效果的情况下，尽可能的中间栏内容优先渲染。面试的时候经常被问到，总结了一下，有7种方法。
实现三栏布局的7种方法

如何实现水平垂直居中

利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。

.parent {   
    position: relative;
} 
.child {    
    position: absolute;    
    left: 50%;    
    top: 50%;    
    transform: translate(-50%,-50%);
}

利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况：

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;     /* 自身 height 的一半 */
    margin-left: -50px;    /* 自身 width 的一半 */
}

使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多：

.parent {
    display: flex;
    justify-content:center;
    align-items:center;
}

如何清除浮动

额外标签clear:both

<style>
 .clear{
     clear:both;
 }
</style>
<div class="fahter">
    <div class="big">big</div>
    <div class="small">small</div>
    <div class="clear">额外标签法</div>
</div>

利用BFC

overflow:hidden

.fahter{
    width: 400px;
    overflow: hidden;
}

使用after(推荐)

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
	content: "";
	display: block;
	height: 0;
	clear:both;
	visibility: hidden;
 }
 .clearfix{
     *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
 }

什么是BFC？

BFC是一个独立渲染区域，它丝毫不会影响到外部元素
BFC特性
- BFC内部元素是垂直排列的
- 同一个BFC下margin会重叠
- 计算BFC高度时会算上浮动元素
- BFC不会影响到外部元素
- BFC区域不会与float元素重叠
如何创建BFC
- position设为absolute或fixed
- float不为none
- overflow设置为hidden、auto
- display设置为inline-block或者inline-table或flex
BFC的作用：
- 解决margin的重叠问题
- 清除浮动：给父元素设置overflow:hidden
- 创建自适应两栏布局

问：IFC

块级元素里面仅包含内联元素

position 的值有哪些，分别有哪些作用？

relative：相对定位(相对于原来位置定位，不脱离文档流)
absolute ：绝对定位(相对于他最近的父元素定位，脱离文档流)
fixed：窗口定位(相对于浏览器窗口进行定位，脱离文档流)
static ：默认值，不定位
inherit：继承父元素的 position 属性
sticky：元素在跨越特定阈值之前表现为relative，之后表现为fixed。即元素会根据用户滚动行为在relative和fixed间切换。

absolute与fixed的不同点

absolute与fixed的根元素不同，absolute的根元素可以设置，fixed根元素是浏览器。
在有滚动条的页面中，absolute会跟着父元素进行移动，fixed固定在页面的具体位置。

css 绘制三角形

/* 给width 和 height 设为0，其他边框设为 transparent 透明*/
.x {
     width: 0;
     height: 0; 
     /*第1种*/
     border-top: 100px solid transparent;
     border-left: 100px solid transparent;
     border-right: 100px solid transparent;
     border-bottom: 100px solid #ff0000;
     /* border-radius: 100px; 加上这句变成扇形 */
     
     /*第2种*/
     /* border: 100px solid transparent;
     border-bottom-color: red; */
  }

如何实现CSS 动画

CSS3动画可以不用鼠标触发,自动,反复的执行某些动画.
需要先定义动画然后再调用它。
定义动画的语法是: @keyframes 动画名称{from{}to{}}
调用动画的语法是: 动画名称 duration(动画时长) timing-function(速度曲线) delay(延迟时间) iteration-count(重复次数) direction(动画方向) fill-mode(执行完毕时状态)
其中，动画名称和动画时长必须赋值

less和sass里的深度选择器是什么，怎么用？

在项目开发时，对于使用的一些组件库，例如element-ui，在有些时候会不符合ui的设计图，这时候我们就要修改一下组件的样式。
当

less: /deep/ 新版本语法：:deep(类名)
sass：::deep
scss：::v-deep （这个写法更保险）

first-of-type和first-child有什么区别

first-of-type
- 匹配的是从第一个子元素开始数，匹配到的那个的第一个元素
first-child
- 必须是第一个子元素

如何使div可聚焦

为元素加上tabIndex属性，按键盘上的tab键时在他们之间切换

<a href="http://www.w3school.com.cn/" tabindex="2">W3School</a><br />
<a href="http://www.google.com/" tabindex="1">Google</a><br />
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>
<div style="width:50px; height:50px; background: red; margin:20px" tabindex="4">123123</div>

canvas svg 2D 3D

前端性能优化

前端性能优化方法主要包括以下几个方面：

减少HTTP请求次数。可以通过合并JS、CSS文件，使用CSS Sprites技术合并图片，压缩图片大小，避免使用多个域名等方式来实现。
使用浏览器缓存。可以通过设置合适的HTTP响应头，如Expires头信息、Cache-Control头信息、ETag头信息等，来实现强缓存或协商缓存，从而减少HTTP请求次数。
使用CDN加速。利用CDN将资源分发到离用户更近的服务器上，可以提高资源加载速度。
异步加载资源。例如，使用async、defer等方式异步加载JS文件，避免阻塞页面渲染。
延迟加载图片。避免在页面加载时一次性请求大量图片，降低网络带宽消耗。
使用Web Workers。对于一些计算密集型任务，可以使用Web Workers将任务分发到多个线程中，提高运算效率。
优化JavaScript代码。避免使用全局变量，减少DOM操作，避免不必要的循环等。
使用响应式布局。使页面适应不同大小的设备屏幕，提高用户体验。
使用CSS3动画。减少对JavaScript的依赖，提高动画效果的性能。
使用服务端渲染。将页面的渲染工作在服务端完成，减少客户端的渲染时间，提高页面性能。

这些方法需要在实际项目中进行综合考虑和实践，以达到最佳的效果。

CSS怎么解决浏览器兼容问题

使用css reset或normalize：
浏览器前缀：针对不同浏览器的私有属性前缀（如-webkit-（Chrome、Safari等）、-moz-（Firefox）、-ms-（IE）和 -o-（Opera，但已停用）来实现兼容性，确保样式在各种浏览器中正确显示。
自动化插件和工具：如Autoprefixer
使用条件注释和CSS Hack：
媒体查询：使用媒体查询可以根据设备的特性（如屏幕宽度、分辨率等）来应用不同的样式，实现响应式设计。
Flexbox和Grid布局：使用Flexbox和Grid布局来替代传统的布局方式（如浮动和表格布局），这些新的布局方式更容易实现响应式设计，并且在现代浏览器中有更好的兼容性。
测试和调试：在不同浏览器和设备上进行测试，使用开发者工具进行调试，确保页面在各种情况下都能正确显示和工作。