当前位置：首页 > article >正文

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

article 2024/12/22 15:02:30

HTML

`doctype`标签

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

meta 标签可以做什么？

为浏览器提供 html 的元信息（信息的信息）
规定 html 字符编码

<meta charset="UTF-8">

设置移动端的视区窗口

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">

移动端点击300ms 延时，可以对放大禁用

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">

设置 http 头

<meta http-equiv="content-Type" content="text/html; charset=gb2312">

图片403

<meta name="referrer" content="no-referrer" />

dns 预解析

<meta  http-equiv="x-dns-prefetch-control" content="on">
<link  rel="dns-prefetch" href="//www.zhix.net">

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
- 不能设置宽高，多个元素共享一行，占满的时候会换行
- 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

HTML5新标签

header、nav、section、article、aside、main、footer、figure、figcaption、video、audio、canvas、datalist、prograss

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两个相关的单位。

rem和em的区别

em和em的区别主要体现在单位性质、使用便捷性、维护性和兼容性上。具体如下：

单位性质。rem是相对于根元素的字体大小，em是相对于父元素的字体大小。这意味着，使用rem单位时，元素的大小不会受到父元素字体大小的影响；使用em单位时，元素的大小会受到父元素字体大小的影响。
使用便捷性。使用rem单位可以简化样式表的编写，因为只需要设置根元素的字体大小，其他元素的大小就可以使用rem单位进行计算；使用em单位时，需要逐级设置每个父元素的字体大小。
维护性。由于rem单位的相对性质是固定的，所以在调整根元素的字体大小时，整个页面的布局和元素大小都会相应地调整，这使得页面的维护更加方便；使用em单位时，调整父元素的字体大小会影响到所有使用em单位的子元素，可能需要逐个调整。
兼容性。rem单位在一些旧版本的浏览器中不被支持，而em单位在所有浏览器中都被支持。在使用rem单位时需要考虑浏览器的兼容性。
总的来说，rem单位更适合用于整体布局和响应式设计，而em单位更适合用于局部样式的调整。

响应式布局的方法

百分比%布局。通过百分比单位来使元素的大小随屏幕或窗口的宽度或高度变化而变化。这种方法适用于宽度和高度属性，但不适用于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的依赖，提高动画效果的性能。
使用服务端渲染。将页面的渲染工作在服务端完成，减少客户端的渲染时间，提高页面性能。

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