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

HTML

DOCTYPE标签

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

meta 标签可以做什么？

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

常用的 meta 标签：

1. 设置字符集（charset）：

meta charset="UTF-8">

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

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

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

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

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

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

5. 作者和版权信息：

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

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

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

7. 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
• 非替换元素

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
• vh
• rpx

常见的 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 ~
中等屏幕	桌面	>=992px ~
大屏幕	桌面	>=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;     
    margin-left: -50px;    
}

• 使用 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">bigdiv>
      div class="small">smalldiv>
      div class="clear">额外标签法div>
  div>
  

• 利用 BFC

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

• 使用 after(推荐)

  .clearfix:after{
  	content: "";
  	display: block;
  	height: 0;
  	clear:both;
  	visibility: hidden;
   }
   .clearfix{
       *zoom: 1;
   }
  

什么是 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 绘制三角形

.x {
     width: 0;
     height: 0; 
     
     border-top: 100px solid transparent;
     border-left: 100px solid transparent;
     border-right: 100px solid transparent;
     border-bottom: 100px solid #ff0000;
     
     
     
     
  }

如何实现 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">W3Schoola>br />
a href="http://www.google.com/" tabindex="1">Googlea>br />
a href="http://www.microsoft.com/" tabindex="3">Microsofta>
div style="width:50px; height:50px; background: red; margin:20px" tabindex="4">123123div>

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 怎么解决浏览器兼容问题

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