2023前端面试题——HTML5 CSS 面试题

本文介绍: CSS3属性中关于制作动画的三个属性：Tr ans form,Tr ans i t ion,An i mat ion。1、transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进⾏旋转 rotate、扭曲 sk e w、缩放 scale和移动 translate以及矩阵变形 matrix。div {} transition和animation两者都能实现动画效果transform常常配合transition和animation使⽤2、transition样式过渡，从⼀种效果逐渐改变为另⼀种效果。

HTML5 CSS 面试题

一. HTML5面试题

1. 如何 理解HTML5结构 语义化？

简单来说，我们可以理解为：用正确的标签做正确的事情。

段落用 p 标签，标题用 h 系列标签，边栏用 aside 标签，主要内容用 main 标签。

对开发者：

便于团队的开发和维护。
在没有加载 CSS 的情况下也能呈现较好的内容结构与代码结构，易于阅读。

对浏览器：

有利于 SEO ，搜索引擎的爬⾍依赖于标签来确定上下⽂和各个关键字的权重。
方便其他设备的解析（如屏幕阅读器、盲人阅读器等），利于无障碍阅读，提⾼可访问性。

2. html5的新特性？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加
- 用于媒介回放的 video 和 audio 元素
- 本地离线存储 localSt o rag e 长期存储数据，浏览器关闭后数据不丢失
- sessionSt ora g e 的数据在浏览器关闭后自动删除
- 语意化更好的内容元素，比如 ar t icle、footer、header、nav、section
- 表单控件，calendar、date、time、ema il、url、search
- 新的技术 web worker, websocket, Ge o location
移除的元素：
- 纯表现的元素：base font，bi g，center，font, s，str ik e，t t，u
- 对可用性产生负面影响的元素：frame，f ram e set，no f r a mes
支持HTML5新标签：
- IE8/IE7/IE6支持通过 document.createElemen t 方法产生的标签
- 可以利用这一特性让这些浏览器支持HTML5新标签
- 浏览器支持新标签后，还需要添加标签默认的样式
当然也可以直接使用成熟的框架、比如 html5s hi m

<!--[if lt IE 9]&gt;
<script&gt; src="http://html5shim.googlecode.com
/svn/trunk/html5.js"</script&gt;<![endif]--&gt;

如何区分HTML5： DOCTYPE声明新增的结构元素功能元素

3. 请描述一下 cookies，sessionStora ge 和 localStora ge 的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Clie nt Side）上的数据（通常经过加密）
cookie数据始终在同源的http 请求中携带（即使不需要），记会在浏览器和服务器间来回传递
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
存储大小：
- cookie数据大小不能超过4k
- sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
有期时间：
- localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
- sessionStorage 数据在当前浏览器窗口关闭后自动删除
- cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

4. 浏览器的渲染 机制一般分为几个步骤?

处理 HTML 并构建 DOM 树。
处理 CSS 构建 CSSOM 树。
将 DOM 与 CSSOM 合并成一个渲染树。
根据渲染树来布局，计算每个节点的位置。
调用 GPU 绘制，合成图层，显示在屏幕上。

注意：
在构建 CSSOM 树时，会阻塞渲染，直至 CSSOM 树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的 CSS 选择器，执行速度越慢
当 HTML 解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件。

5. 重绘（Rep a int）和回流（Reflow）

重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘
回流是布局或者几何属性需要改变就称为回流（需要计算它们在设备视口(viewport)内的确切位置和大小）

回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流

所以以下几个动作可能会导致性能问题：

添加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
定位或者浮动
浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

减少重绘和回流

批量修改DOM
对于复杂动画效果,使用绝对定位让其脱离文档流
css3硬件加速（GPU加速）transform、opacity、filters这些动画不会引起回流重绘

6. 简述data:属性的用法（如何 设置，如何 获取），有何优势？

data-* 的值的获取和设置，2种方法：

1）传统方法 getAttr i bute() 获取 data–属性值； setAttr i bute() 设置 data–属性值

getAttr i bute() 获取 data–属性值；

setAttribute() 设置 data–属性值

2)HTML5新⽅法

例如 data–ker win

dataset.kerwin 获取 data-kerwin属性值

dataset.kerw in = “赵钱孙李” 设置data-kerw in属性值

注意：

传统⽅法⽆兼容性问题，但是不够优雅、⽅便
HTML5新⽅法很优雅、⽅便，但是有兼容性问题。

优势：⾃定义的数据可以让⻚⾯拥有更好的交互体验（不需要使⽤ Aja x 或去服务端查询数据）

二. CSS面试题

1. display: none; 与 visibility: hidden; 的区别

联系：它们都能让元素不可见
区别：
- display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
- 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘

2. 外边距折叠(collap sing margins)

毗邻的两个或多个 margin 会合并成一个margin，叫做外边距折叠。规则如下：
- 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
- 浮动元素或inline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin 折叠
- 创建了块级格式化上下文（BFC）的元素，不会和它的子元素发生margin 折叠

3. z-index是什么？在position的值什么 时候可以触发?

z-index 属性设置元素的堆叠顺序。拥有更⾼堆叠顺序的元素总是会处于堆叠顺序较低的元素的前⾯，当脱离⽂档流内容较多，并且相互重叠的时候，就有可能发⽣本想完全显示的内容被其他内容遮挡的结果，这时我们就需要⼈为指定哪个层在上⾯，哪个在下⾯，z-index属性就是⼲这个⽤的。

注意：Z-in de x 仅能在定位元素上奏效.

在position的值是relative、a bs olute、fixed、sticky 时候可以触发

4. 简述box–sizing的有效值以及所对应的盒模型 规则

box–sizing 属性允许您以特定的⽅式定义匹配某个区域的特定元素。

语法：box–sizing: content–box|border–box|in herit;

1）box-sizing:content–box；这是由 CSS2.1 规定的宽度⾼度⾏为。宽度和⾼度分别应⽤到元素的内容框。在宽度和⾼度之外绘制元素的内边距和边框。是默认值。如果你设置⼀个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中

2）box-sizing:border–box；为元素指定的任何内边距和边框都将在已设定的宽度和⾼度内进⾏绘制。告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将⼀个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding 的计算值。⼤多数情况下这使得我们更容易的去设定⼀个元素的宽⾼

3）box-sizing:in herit;；规定应从⽗元素继承 box-sizing 属性的值

5. 移动端适配怎么做？

1） meta viewport（视⼝）

移动端初始视⼝的⼤⼩为什么默认是980px？

因为世界上绝⼤多数PC⽹⻚的版⼼宽度为 980px ，如果⽹⻚没有专⻔做移动端适配，此时⽤⼿机访问⽹⻚旁边刚好没有留⽩，不过⻚⾯缩放后⽂字会变得⾮常⼩。

为了解决⻚⾯缩放的体验问题，在⽹⻚代码的头部，加⼊⼀⾏viewport元标签。

这⾥的device–width告诉浏览器，将视⼝的宽度设置为设备宽度（这个宽度是⼈为预设的，不设的话就是 980px）。属性含义

initial-scale：第⼀次进⼊⻚⾯的初始⽐例
 minimum-scale：允许缩⼩最⼩⽐例
 maximum-scale：允许放⼤最⼤⽐例
 user-scalable：允许使⽤者缩放，1 or 0 (yes or no)

2）图⽚适配

img { max–width: 100%; } 此时图⽚会⾃动缩放，同时图⽚最⼤显示为其⾃身的100%（即最⼤只可以显示为⾃身那么⼤）为什么不⽤ img { width: 100%; } ？当容器⼤于图⽚宽度时，图⽚会⽆情的拉伸变形

3）媒体查询

为什么要媒体查询？

针对不⽤的设备提前为⽹⻚设定各种 CSS 样式CSS3中的Medi a Que ry 模块，⾃动检测屏幕宽度，然后加载相应的CSS⽂件

语法举例

@media screen and (min-width:1200px){
 body{
	 background-color: red;
 }

当屏幕宽度⼤于1200px时，背景⾊变为红⾊

4）动态 rem ⽅案

为什么要⽤rem？

和媒体查询配合，实现响应式布局

px、em、rem 有什么不同？

px是pixel（像素），是屏幕上显示数据的最基本的点，在HTML中，默认的单位就是px；em 是⼀个相对⼤⼩，相对于⽗元素font–size的百分⽐⼤⼩rem 是相对于根元素的font–size

⽤法示例


<!--
 * @作者: kerwin
 * @公众号: 大前端私房菜
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        html{
            font-size: 100px;
        }
        body{
            font-size: 16px;
        }

        .box{
            width: 7.5rem;
            height: 100px;
            background:yellow;
            /* font-size: 16px; */
        }
    </style>

    <script>
        //fontsize 计算   
        document.documentElement.style.fontSize=document.documentElement.clientWidth/750 * 100 +'px'


        // fontsize = 当前设备的css布局宽度/物理分辨率(设计稿的宽度)* 基准font-size
    </script>
</head>
<body>
    <div class="box">
        赵钱孙李
    </div>
</body>
</html>

6. 什么是CSS3 tr ans form? transition? animation? 区别是什么？

CSS3属性中关于制作动画的三个属性：Transform,Transition,Animation。
1、transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进⾏ 旋转rotate、扭曲skew、缩放
scale和移动translate以及矩阵变形matrix。
div{
　　transform:scale(2);
}

transition和animation两者都能实现动画效果
transform常常配合transition和animation使⽤


2、transition样式过渡，从⼀种效果逐渐改变为另⼀种效果
transition是⼀个合写属性
transition:transition-property transition-duration transition-timing-function
transition-delay
从左到右分别是：css属性、过渡效果花费时间、速度曲线、过渡开始的延迟时间
div{
 width：100px;
 height:100px;
 transition:transform 2s;
}
div：hover{
 transform:rotate(180deg);
}
transition通常和hover等事件配合使⽤，需要由事件来触发过渡
我们知道 transition 虽然简单好⽤，但是我们会发现它受到各种限制。
(1)transition需要⼀个事件来触发，⽐如hover，所以没法在⽹⻚加载时⾃动发⽣
(2) transition是⼀次性的，不能重复发⽣，除⾮⼀再触发。
(3) transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
(4)⼀条transition规则，只能定义⼀个属性的变化，不能涉及多个属性。


3、animation动画 由@keyframes来描述每⼀帧的样式
div{
　　animation:myAnimation 5s infinite
}
@keyframes myAnimation {
　　0%{left:0;transform:rotate(0);}
　　100%{left:200px;transform:rotate(180deg);}
}


区别：
（1）transform仅描述元素的静态样式，常常配合transition和animation使⽤
（2）transition通常和hover等事件配合使⽤，animation是⾃发的，⽴即播放
（3）animation可设置循环次数
（4）animation可设置每⼀帧的样式和时间，transition只能设置头尾
（5）transition可与js配合使⽤，js设定要变化的样式，transition负责动画效果，如：

animation属性类似于transition，他们都是随着时间改变元素的属性值，
其主要区别在于：transition需要触发⼀个事件才会随着时间改变其CSS属性；
animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到⼀种动画的效果
1）动画不需要事件触发，过渡需要。
2）过渡只有⼀组（两个：开始-结束） 关键帧，动画可以设置多个。

7. ⽗元素和⼦元素宽⾼不固定，如何 实现⽔平垂直 居中

<!--
 * @作者: kerwin
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        body {
            background-color: azure;
        }

        .parent {
            width: 500px;
            height: 500px;
            background-color: yellowgreen;
            position: relative;
        }

        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* 使⽤css3的transform来实现 */
        }

        .child p {
            width: 300px;
            height: 300px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child">
            <p></p>
        </div>
    </div>
</body>

</html>

<!--
 * @作者: kerwin
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body,
        html {
            width: 100%;
            height: 100%;
        }

        .parent {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 600px;
            height: 600px;
            background: yellow;
        }

        .parent .child {
            color: #fff;
            width: 300px;
            height: 300px;
            text-align: center;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child">hello world</div>
    </div>
</body>

</html>

8. 假设高度默认`100px` ，请写出 三栏布局，其中左栏、右栏各为`300px`，中间自适应。

方法1：浮动
方法2：绝对定位
方法3：flexbox。移动开发里经常用到。

方法1、浮动：

左侧设置左浮动，右侧设置右浮动即可，中间会自动地自适应。

<!--
 * @作者: kerwin
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        *{
            margin:0;
            padding:0;
        }

        .box div{
            height: 100px;
        }

        .left{
            width: 300px;
            float:left;
            background:gray;
        }
        .right{
            width: 300px;
            float: right;;
            background:gray;
        }
        .center{
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">center</div>
    </div>
</body>
</html>

方法2、绝对定位：

左侧设置为绝对定位， left：0px。右侧设置为绝对定位， right：0px。中间设置为绝对定位，left 和right 都为300px，即可。中间的宽度会自适应。

<!--
 * @作者: kerwin
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        *{
            margin:0;
            padding:0;
        }

        .box div{
            height: 100px;
        }

        .left{
            width: 300px;
            position: absolute;
            left:0;
            background:gray;
        }
        .right{
            width: 300px;
            position: absolute;
            right:0;
            background:gray;
        }
        .center{
            position: absolute;
            left:300px;
            right:300px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">left</div>
        <div class="center">center</div>

        <div class="right">right</div>
    </div>
</body>
</html>

方法3、flexbox布局

将左中右所在的容器设置为display: flex，设置两侧的宽度后，然后让中间的flex = 1，即可。

<!--
 * @作者: kerwin
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        *{
            margin:0;
            padding:0;
        }

        .box div{
            height: 100px;
        }
        .box{
            display: flex;
        }

        .left{
            width: 300px;
            background:gray;
        }
        .right{
            width: 300px;
            background:gray;
        }
        .center{
            flex:1;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">left</div>
        <div class="center">center</div>

        <div class="right">right</div>
    </div>
</body>
</html>