【2023前端面经】HTML/CSS经典试题

一、页面渲染机制

1、HTML、XML和XHTML有什么区别

HTML: 超文本标记语言，用来描述和定义网页内容的标记语言。

XML：可拓展标记语言，给文档加上标签，说明每段文字是干什么的。

XHTML：可拓展的超文本标记语言，用XML语法写HTML，更加严格。

2、浏览器 (HTML页面) 的渲染过程 ⭐⭐⭐⭐

2.1 解析 HTML 文件并创建 DOM 树：

浏览器将 HTML 文件解析成 DOM 树，DOM 树是由节点和对象组成的树形结构，表示文档的结构和内容。浏览器会从上到下解析 HTML 文件，遇到标签就创建一个节点，遇到文本就创建一个对象，最终形成 DOM 树。

2.2 解析 CSS 文件并创建 CSSOM 树：

浏览器将 CSS 文件解析成 CSSOM 树，CSSOM 树是由样式规则和对象组成的树形结构，表示文档的样式信息。浏览器会从上到下解析 CSS 文件，遇到样式规则就创建一个对象，最终形成 CSSOM 树。

2.3 合并 DOM 树和 CSSOM 树，生成render树渲染树：

浏览器将 DOM 树和 CSSOM 树合并，生成渲染树，渲染树是由渲染对象和对象组成的树形结构，表示文档的可视化呈现。渲染树只包含需要显示的节点和对象，不包含隐藏的节点和对象。

2.4 布局和绘制渲染树：

浏览器对渲染树进行布局和绘制，

布局render树（Layout/reflow）,是计算每个节点的位置和大小

绘制render树（paint），是将节点绘制到屏幕上

2.5 浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上

浏览器采用一种流方法，布局一个节点只需通过一次，但是表格元素需要通过多次。最后，渲染树上的元素最终展示在浏览器里。

浅谈CSS重绘和回流（重排）—— 如何减少重绘和回流（重排）_css设置统一类名避免回流-CSDN博客

3、重绘和重排有什么区别？⭐⭐⭐⭐

3.1 浏览器的渲染机制：

对DOM的大小、位置进行修改后，浏览器需要重新计算元素的这些几何属性，就叫重排

对DOM的样式进行修改，比如颜色或背景颜色，浏览器不需要重新计算几何属性的时候，直接绘制元素的新样式，这里便触发了重绘

浏览器优化机制：

浏览器为60hz，即每过1/60s才会批量处理一次重绘和回流。

3.2 重绘

当页面元素样式改变不影响元素在文档流中的位置时（如background-color，border-color，visibility），浏览器只会将新样式赋予元素并进行重新绘制操作。

3.2 重排（回流）

当渲染树render tree中的一部分或全部因为元素的规模尺寸、布局、隐藏等改变时，浏览器重新渲染部分DOM或全部DOM的过程

回流一定会造成重绘，重绘不一定会造成回流。

3.3 什么时候会触发回流或重绘？

页面第一次加载时，回流和重绘都会触发一次。

触发重排：添加、删除DOM元素；修改DOM元素的位置、尺寸；内容发生改变、显示隐藏元素；浏览器的窗口尺寸变化；读取offset、cilent、scroll系列的尺寸，因为这些尺寸都是需要即使计算得到的，因此会进行回流....

触发重绘：所有触发回流的操作都会触发回流；颜色、背景颜色、阴影、文字方向等的修改

3.4 如何减少重绘和回流（重排）

（1）CSS中避免回流、重绘

避免设置多层内联样式

设置动画效果时，使用绝对定位或固定定位：将元素脱离文档流，减少回流。

避免使用table布局：表格布局会导致大量的回流，因为浏览器需要计算所有单元格的大小来确定表格的布局。

使用css3硬件加速，可以让transform、opacity、filters等动画效果不会引起回流重绘

尽可能在DOM树的最末端改变class

（2） JS操作避免回流、重绘

避免使用JS一个样式修改完接着改下一个样式，最好一次性更改CSS样式，或者将样式列表定义为class的名称

避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。

可以先为元素设置为不可见：display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘

避免循环读取offsetLeft等属性，在循环之前把它们存起来

4、简述输入网址到页面显示的过程⭐⭐⭐

解析 URL：

浏览器会解析输入的 URL，提取出其中的协议、主机名、端口号、路径、查询参数和哈希值等信息。

DNS 解析：

浏览器会向 DNS 服务器发送请求，获取主机名对应的 IP 地址。

建立 TCP 连接：

浏览器会向服务器发起 TCP 连接请求，与服务器建立连接。

发送 HTTP 请求：

浏览器会向服务器发送 HTTP 请求，请求中包含请求方法、请求头、请求体等信息。

接收 HTTP 响应：

服务器接收到请求后，会返回 HTTP 响应，响应中包含状态码、响应头、响应体等信息。

进行HTML页面渲染:略

5、DOM解析和渲染与CSS、JS之间的关系

规则：

css要放到head里面，js要放到body尾部前面

DOM解析：就是把你所写的各种html标签，生成一个DOM TREE，可以认为就是生成了一个最原始的页面，一点样式都没有，毫无CSS修饰的那种；

DOM渲染：浏览器会把本身默认的样式+用户自己写得样式整合到一起，形成一个CSS TREE，而DOM渲染就是指DOM TREE 和 CSS TREE 结合到一起，生成一个Render TREE，呈现出一个带有样式的页面。

线程：

浏览器会有不同的线程，它们不能同时执行

GUI 渲染线程（对应DOM渲染）

JS 线程

定时器触发线程 (setTimeout)

浏览器事件线程 (onclick)

http 异步线程

DOM与CSS

css的加载不会阻塞DOM的解析

css的加载会阻塞DOM的渲染

DOM与JS

JS的加载和执行会阻塞DOM的解析，因为JS可能对DOM进行操作，改变DOM的结构

JS的加载和执行会阻塞DOM的渲染

CSS与JS

CSS的加载会阻塞JS的执行，因为CSS的渲染GUI线程和JS运行线程互斥。但是CSS不会阻塞JS的加载

https://www.cnblogs.com/chris-oil/p/14231117.html

6、页面导入样式时，使用link和@import有什么区别？ ⭐⭐⭐

href : 指向网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系，用于超链接；
src : 指向外部资源的位置，在请求src资源时将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素,表示引用资源，表示替换当前元素

区别：当浏览器遇到href会并行下载资源并且不会停止对当前文档的处理。(建议使用 link 方式加载 CSS，而不是使用 @import 方式)；当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载或执行完毕。(这也是script标签为什么放在底部而不是头部的原因)

src和href的区别_幽夜忧伤来袭的博客-CSDN博客
从属关系：

link 是 HTML 标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等；而 @import 是 CSS 语法，只有导入样式表的作用。

加载顺序：

页面被加载时，link 会和 HTML 同时被加载，而 @import 引入的 CSS 将在页面加载完毕后被加载。

兼容性：

@import 是 CSS2.1 才有的语法，所以只能在 IE5 以上才能识别；而 link 是 HTML 标签，所以不存在兼容性问题。

DOM 控制：

JavaScript 只能控制 DOM 去改变 link 标签引入的样式，而 @import 的样式不是 DOM 可以控制的。

样式权重：

link 方式的样式权重高于 @import 的权重。

<link rel="stylesheet" type="text/css" href="style.css">


<style>
  @import url("style.css");
</style>

7、白屏时间长的原因有哪些，怎么进行优化？

7.1 原因主要有：

（1）资源文件过大：浏览器初始访问网站时，会先加载该项目的js和css文件，加载完成后才会进行页面渲染。如果网页中的 CSS、JavaScript 或图片文件过大，加载时间就会变长，出现视觉上的页面白屏
（2）网络延迟：如果用户的网络环境不佳，或者服务器响应时间过长，也会导致白屏时间长
（3）渲染阻塞：浏览器在解析 HTML 时，如果遇到 CSS 链接或者 JavaScript 文件，会造成阻塞渲染，等待 CSS 和 JavaScript 文件加载完毕并执行，这就会导致白屏时间增加。
（4）JavaScript异常：如果页面中的 JavaScript 代码执行时间过长，也会导致页面渲染被阻塞，从而增加白屏时间。

7.1 针对以上问题，我们可以采取以下策略进行优化：

优化资源文件：压缩和合并 CSS 和 JavaScript 文件，减小文件大小，减少 HTTP 请求次数。对于图片，可以采用适当的压缩算法，或者使用更高效的图片格式，如 WebP。

使用 CDN：通过使用内容分发网络（CDN），可以将资源文件分发到离用户更近的服务器，从而减少网络延迟。

优化渲染：将 CSS 放在 head 中，JavaScript 放在 body 底部，以防止渲染阻塞。对于 JavaScript，还可以添加 defer 或 async 属性，使其异步加载。

优化 JavaScript 执行：优化 JavaScript 代码，减少执行时间。对于一些复杂的计算，可以考虑使用 Web Worker 在后台线程中执行。

二、HTML 篇

1. 简述一下你对 HTML 语义化的理解？

语义化的好处：

(1) 代码可读高，即使在没有样式 CSS 情况下也以一种文档格式显示，便于阅读理解维护。(2) 页面内容结构化，便于浏览器、搜索引擎解析；

(3) 爬虫依赖于 HTML 标记来确定上下文和各个关键字的权重，有利于 SEO;

常见的语义化标签：header、footer、aside、main、h1-h6、input、textarea、video、aduio

2. 标签上 title 与 alt 属性的区别是什么？

title是鼠标放在文字或图片上的注释信息文字,给用户解读;

alt是图片无法显示的替代文字，在seo的层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词；

3. title与h1的区别、b与strong的区别、i与em的区别？

(1) title与h1的区别

title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么

h1：文章主题内容，告诉蜘蛛我们的网站内容最主要是什么

区别：

title他是显示在网页标题上、h1是显示在网页内容上

title比h1添加的重要 (title > h1 ) ==》对于seo的了解

场景：

网站的logo都是用h1标签包裹的

(2) b与strong的区别

定义：

b：实体标签，用来给文字加粗的。

strong：逻辑标签，用来加强字符语气的。

区别：

b标签只有加粗的样式，没有实际含义。

strong表示标签内字符比较重要，用以强调的。

题外话：为了符合css3的规范，b尽量少用该用strong就行了。

(3) i与em的区别

i:实体标签，用来做文字倾斜的

em：是逻辑标签，用来强调文字内容的

区别：

i只是一个倾斜标签，没有实际含义

em表示标签内字符重要，用以强调的

场景：

i更多的用在字体图标，em术语上（医药，生物）。

4.行内元素、‘块元素、空(void)元素有哪些？如何转换？

(1)常见块、行内、行内块元素

块级元素：div、p、h1~h6、语义化标签（footer、header、section）

行内元素：a、span、strong、b、em、label

行内块，可替换元素：<img>、<input>、<textarea>、<select>、<object>

空元素：br、hr...

块元素、行内元素、行内块元素区别及其作用_块元素和行内元素、行内块元素的区别_吾不图的博客-CSDN博客

原文链接：https://blog.csdn.net/tufei_zhang/article/details/110230292

img标签到底是行内元素还是块级元素_块级元素 img_全栈道路的博客-CSDN博客

（2）元素之间的转换问题

display: block; 转换成块元素 ===>独占一行，可设置宽高, 可实现盒子水平居中

display: inline; 转换成行内元素 ===>不会换行，宽，高设置无效；只能设置左右边距

display: inline-block; 转换成行内块元素 ===>不独占一行的，其他特性和块元素完全一样

（3）float

行内元素脱离文档流后，会变成块元素

a{
width: 100px; /*宽度有效*/
float: left;
}

5、面试题：png、jpg、gif 图片格式解释，分别什么时候用？

png:无损压缩，尺寸体积要比jpg/jpeg的大，适合做小图标。

jpg:采用压缩算法，有一点失真，比png体积要小，适合做中大图片。

gif:一般是做动图的。

webp：同时支持有损或者无损压缩，相同质量的图片，webp具有更小的体积。兼容性不是特别好。

7. line-height和heigh区别

line-height是每一行文字的高，如果文字换行则整个盒子高度会增大（行数*行高）。

height是一个死值，就是这个盒子的高度。

8. 对BFC规范(块级格式化上下文：block formatting context)理解？

BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

1. 了解BFC ：块级格式化上下文。

2. BFC的原则：一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素。

3.解决问题

        ·解决外边距的塌陷问题(垂直方向合并塌陷)

        ·利用BFC解决包含塌陷

        ·清除浮动

        ·BFC可以阻止标准流元素被浮动元素覆盖

4.如何触发BFC：

        ·设置浮动， float的值非none
        ·设置定位， position的值为absoulte或者fixed
        ·设置overflow，即hidden，auto，scroll

·设置display值：弹性布局flex；表格单元格table-cell；行内块显示模式inline-block

什么是BFC，他有什么用？_King十三的博客-CSDN博客

9、HTML5、CSS3 里面都新增了那些新特性？

(1)HTML5 新的语义标签
        article 独立的内容。
        aside 侧边栏。
        header 头部。
        nav 导航。
        section 文档中的节。
        footer 页脚。

(2)API
        画布(Canvas) API
        地理(Geolocation) API

(3)存储
        本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
        sessionStorage 的数据在浏览器关闭后自动删除
        新的技术webworker, websocket, Geolocation
        拖拽释放(Drag and drop) API
        音频、视频API(audio,video)
        表单控件，calendar、date、time、email、url、searc

CSS3

2d，3d变换
Transition, animation
媒体查询
新的单位（rem, vw，vh 等）
圆角（border-radius），阴影（box-shadow），对文字加特效（text-shadow），线性渐变（gradient），旋转（transform）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
rgba

三、CSS 篇

1. 介绍一下 CSS 的盒子模型？

（1）在HTML页面中所有的元素都能看做一个盒子；

（2）盒模型组成内容(content)、内边距(padding)、边框(border)、外边距(margin)

（3）盒子的两种类型：

         W3C盒模型: margin+padding+border+content（设置的宽高会被内边距和边框撑大）

        IE盒子模型: margin+content(content包括 border 和 padding )

（4）类型转换

        {border-sizing:border-box }

2. css 选择器优先级？

（1）作用范围越窄，优先级越高：

！important > 行内style样式（比重1000） > id选择器（比重100）> class类/伪类选择器/属性（比重10）>标签（比重1） >*通配符 > 继承 > 浏览器默认样式

（2）伪类扩展

W3C 制定的一套选择器的特殊状态，通过伪类您可以设置元素的动态状态，例如悬停（hover）、点击（active）以及文档中不能通过其它选择器选择的元素（这些元素没有 ID 或 class 属性），例如第一个子元素（first-child）或者最后一个子元素（last-child）

3. css 哪些属性可以继承？

子元素可以继承父元素的一些属性

（1）文字的一些属性：font

（2）文本的一些属性：line-height

(3)元素的可见性：visibility:hidden

(4)列表的属性：list-style

(5)表格布局的属性：border-spacing

4. 伪类和伪元素的区别

伪类：伪类是选择器的一种，操作对象是文档树中已有的元素，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候
    <style> 
        /* 使用伪类 */
        div p:first-child{
            color: red;
        }
        /* 不使用伪类,需增加一个类 */
        .second-child{
            color: aqua;
        }
    </style>
    <div>
        <p>这是p标签1</p>
        <p class="second-child">这是p标签2</p>
        <p>这是p标签3</p>
    </div>
运行结果

伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
    <style>
        /* 使用伪元素 */
        div::first-line{
            color: red;
        }
        /*不使用伪元素*/
        p span{
            color: blue;
        }
    </style>
       <div>
        <p>这是p标签4</p>
        <p><span>这是p标签5</span></p>
        <p>这是p标签6</p>
    </div>    
二者结合
    <style>
        /* 使用伪元素 */
        div::first-line{
            color: red;
        }
        /*不使用伪元素*/
        p span{
            color: blue;
        }
        span:hover::after{
            content: "----鼠标悬停伪元素";
            color: green;
        }
    </style>
     <div>
        <p>这是p标签4</p>
        <p><span>这是p标签5</span></p>
        <p>这是p标签6</p>
    </div>   
本质区别

伪类的效果可以通过添加实际的类来实现
伪元素的效果可以通过添加实际的元素来实现
所以它们的本质区别就是是否抽象创造了新元素

【精选】伪元素和伪类的区别总结-CSDN博客

6. 隐藏元素的方法有哪些？

(1)空间占位

display:none ：元素在页面消失，不占据空间。就当从来不存在，会导致页面的重绘和重排，同时触发不了点击事件。

visibility: hidden ：隐藏对应的元素，不可见状态，占据空间位置。只会导致页面的重绘，但不可以触发点击事件。

opacity:0：不可见状态，占据空间位置，是可以触发点击事件的。

position:absolute： 踢出去

(2) 重绘和回流的问题

visibility、opacity ：只产生重绘

display、position产生回流

7. rgba和opacity的透明效果有什么不同？

共同性：实现透明效果

(1) opacity 取值范围0到1之间，0表示完全透明，1表示不透明

(2) rgba R表示红色，G表示绿色，B表示蓝色，取值可以在正整数或者百分数。A表示透明度取值0到1之间

区别：继承的区别

opacity会继承父元素的opacity属性，而RGBA设置的元素的后代元素不会继承不透明属性。

（3）详细说明

rgba 是一种颜色模式，代表红色（r）、绿色（g）、蓝色（b）和 alpha 透明度（a）。当你设置元素的颜色（例如背景颜色或文本颜色）时，可以使用 rgba 来指定颜色和透明度。例如，rgba(255, 0, 0, 0.5) 会创建半透明的红色。值得注意的是，rgba 只影响使用它的特定颜色。

opacity 是一个单独的属性，它影响元素及其所有内容（包括文本和子元素）的透明度。例如，如果你将元素的 opacity 设置为 0.5，那么元素的所有内容都将变为半透明，包括任何文本和子元素。

因此，rgba 和 opacity 的主要区别在于，rgba 只影响特定的颜色，而 opacity 则影响元素及其所有内容的透明度。在选择使用哪种方法时，需要根据你想要达到的效果来决定。如果你只想让某个颜色半透明，那么 rgba 可能是最好的选择。如果你想让整个元素（包括其内容）半透明，那么 opacity 可能更合适。

8. 让一个元素水平垂直居中有哪些方式?

（1）父元素flex布局+子元素margin自适应

（2）父元素flex布局：主轴和侧轴居中

（3）position ：父相子绝 + 子元素（左上偏移50% + tansform偏移）

(4)position定位：父相子绝+子元素（四个方向偏移0，margin自适应）

对其方式扩展：
        文本垂直居中: line-height = height
        文本水平对齐方式：text-align：center

        图文居中: vertical-align: middle;

9. 用CSS画一个三角形（用 border边框画）

思路：

（1）利用了高宽为零的容器及透明的 border 实现。

（2）给对应方向的边框重新添加颜色

    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            display: flex;
        }
        div {
            width: 0px;
            height: 0px;
            margin: auto;
        }
        .normal {
            border-top: 50px solid yellowgreen;
            border-bottom: 50px solid deeppink;
            border-left: 50px solid bisque;
            border-right: 50px solid chocolate;
        }

        .top {
            border: 50px solid transparent;
            border-bottom: 50px solid deeppink;
        }
        .bottom {
            border: 50px solid transparent;
            border-top: 50px solid deeppink;
        }
        .left {
            border: 50px solid transparent;
            border-right: 50px solid deeppink;
        }
        .right {
            border: 50px solid transparent;
            border-bottom: 50px solid deeppink;
        }
    </style>
<body>
    <div class='normal'></div>
    <div class='top'></div>
    <div class='bottom'></div>
    <div class='left'></div>
    <div class='right'></div>
</body>

运行结果

【精选】CSS：N种使用CSS 绘制三角形的方法_三角形css_打瞌睡的兔兔小姐的博客-CSDN博客

10.用CSS画一条0.5px的直线

问题

直接设置0.5px，在不同的浏览器会有不同的表现

解决思路

（1）设置宽100%高1px的盒子模型；

（2）然后用transform对盒子Y方向进行0.5倍的缩放

（3）指定变换的原点： transform-origin: 50% 100%;
    <style>
        .half-scle {
            height: 1px;
            background-color:steelblue;
            /* 垂直方向缩小一半 */
            transform: scaleY(0.5);
            /* 是为了指定变换的原点 */
            transform-origin: 50% 100%;
        }
    </style>
<body>
    <p>画一条0.5px的线</p>
    <div class="half-scle">    </div>
</body>

11. 单行、多行文本溢出显示省略号

11.1 单行文本溢出

//超出一行省略号
white-space: nowrap; //禁止换行
overflow: hidden;//文字溢出隐藏
text-overflow: ellipsis; //.../* 显示省略号 */

11.2 多行文本溢出

//超出两行省略号
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;/* 设置为垂直方向 */
line-clamp: 2;
-webkit-line-clamp: 2; //显示几行

12. 平面转换transform

（1）作用

改变盒子在平面内的形态（位移，旋转，缩放）

（2）平移 transform:translate(水平移动距离，垂直移动距离)

还在原来的文档流，平移后的位置也可以重叠。

transform: translate(100px,50px)

取值: (正负都可以)

        像素单位数值

        百分比(参照物盒子自身的尺寸)

        x轴正向为右,y轴正向为下

（3）旋转 transform:rotate(角度)

角度单位是deg ：取值为正,顺时针旋转；取值为负,逆时针旋转

transform: rotate(360deg);

（4）缩放 transform: scale(x轴缩放倍数,y轴缩放倍数);

transform: scale(0.5,0.5);

（5）渐变背景

使用animation添加动画效果

详细讲解transform，一看就懂了！(赞）_chelen_jak的博客-CSDN博客

transform（平移、旋转、缩放、3d转换）、渐变、动画笔记_transform平移_Youser511的博客-CSDN博客

13. position的值有哪些？ relative和absolute相对于谁进行定位的？

（1）position属性值

relative 相对于自身定位，不脱离文档流。
absolute: 脱离文档流，生成绝对定位，相对于最近一级定位不为static的父元素进行定位。
fixed 固定定位，相对于浏览器窗口进行定位。
static: 默认值，没有定位，元素出现在正常的文档流中。
sticky: 生成粘性定位的元素，容器的位置根据正常文档流计算得出。

（2）定位属性

        left等定位属性，要使用时，它必需是已定位的元素。（absolute，relative，fixed）

        元素水平居中：设置 top:0;bottom:0; margin:auto；

        元素垂直居中：设置 left:0;right：0; margin:auto ；

        元素水平/垂直居中：设置四个值都是0，margin:auto ；
position方向定位链接：https://blog.csdn.net/m0_37158404/article/details/85338843

14. BFC规范(块级格式化上下文：block formatting context)理解？

BFC就是页面一个独立的渲染区域，容器内的子元素不会影响到外面的元素。

（1） BFC定义：块级格式化上下文。

（2） BFC原则：一个元素具有BFC，那内部元素再怎么弄，都不会影响到外面的元素。

（3）特性

        BFC是一个块级元素，块级元素在垂直方向上依次排列。

        BFC是一个独立的容器，内部元素不会影响容器外部的元素。

        属于同一个BFC的两个盒子，外边距margin会发生重叠，并且取最大外边距。

（4）解决问题

        ·解决外边距的塌陷问题(垂直方向合并塌陷)

        ·利用BFC解决包含塌陷

        ·清除浮动

        ·BFC可以阻止标准流元素被浮动元素覆盖

解决当父级元素没有高度时，子级元素浮动会使父级元素高度塌陷的问题

解决子级元素外边距会使父级元素塌陷的问题

（5）如何触发BFC：

        ·设置浮动， float的值非none
        ·设置定位， position的值为absoulte或者fixed
        ·设置overflow，即hidden，auto，scroll

·设置display值：弹性布局flex；表格单元格table-cell；行内块显示模式inline-block

面试题：清除浮动有哪些方式？

        触发BFC

         多创建一个盒子，添加样式：clear: both;

        after方式

什么是BFC，他有什么用？_King十三的博客-CSDN博客

一些扩展

IFC：内联格式上下文。IFC的高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)，IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。

GFC（GrideLayout formatting contexts）：网格布局格式化上下文。当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域。

FFC（Flex formatting contexts）：自适应格式上下文。display值为flex或者inline-flex的元素将会生成自适应容器。

15、Flex弹性布局(重点)

彻底理解CSS Flexbox布局，看这一篇就够了！ - 掘金

CSS中的 “flex:1;” 是什么意思？

16. 1rem、1em、1vh、1px、1rpx各自代表的含义及区别？

(1)px像素

绝对长度单位，是相对于显示器屏幕分辨率而言的，一般电脑的分辨率为{1920，1024}

(2)rem

相对单位，相对html根节点的font-size的值，若直接给html设置font-size：62.5%，因为16px*62.5%, 那1rem=10px

(3) em

是相对于父元素字体font-size的值, 子元素的{font-size:1em} = 父元素字体大小

(4) vw/vh

全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于屏幕宽度和高度的 1%，处理宽度时%单位更合适，处理高度 vh 单位更好。

17. css sprite是什么,有什么优缺点

把多个小图标合并成一张大图片

优点：减少了http请求的次数，提升了性能。

缺点：维护比较差（例如图片位置进行修改或者内容宽高修改）

四、布局

【2023前端面经】HTML/CSS经典试题

一、页面渲染机制

1、HTML、XML和XHTML有什么区别

2、浏览器 (HTML页面) 的渲染过程 ⭐⭐⭐⭐

3、 重绘和重排有什么区别？⭐⭐⭐⭐

3.1 浏览器的渲染机制：

3.2 重绘

3.2 重排（回流）

3.3 什么时候会触发回流或重绘？

3.4 如何减少重绘和回流（重排）

（1）CSS中避免回流、重绘

（2） JS操作避免回流、重绘

4、简述输入网址到页面显示的过程⭐⭐⭐

5、DOM解析和渲染与CSS、JS之间的关系

6、页面导入样式时，使用link和@import有什么区别？ ⭐⭐⭐

7、白屏时间长的原因有哪些，怎么进行优化？

7.1 原因主要有：

7.1 针对以上问题，我们可以采取以下策略进行优化：

二、HTML 篇

1. 简述一下你对 HTML 语义化的理解？

2. 标签上 title 与 alt 属性的区别是什么？

3. title与h1的区别、b与strong的区别、i与em的区别？

(1) title与h1的区别

(2) b与strong的区别

(3) i与em的区别

4.行内元素、‘块元素、空(void)元素有哪些？如何转换？

(1)常见块、行内、行内块元素

（2）元素之间的转换问题

（3）float

5、 面试题：png、jpg、gif 图片格式解释，分别什么时候用？

​7. line-height和heigh区别

8. 对BFC规范(块级格式化上下文：block formatting context)理解？

9、HTML5、CSS3 里面都新增了那些新特性？

三、CSS 篇

1. 介绍一下 CSS 的盒子模型？

2. css 选择器优先级？

3. css 哪些属性可以继承？

4. 伪类和伪元素的区别

6. 隐藏元素的方法有哪些？

7. rgba和opacity的透明效果有什么不同？

8. 让一个元素水平垂直居中有哪些方式?

9. 用CSS画一个三角形（用 border边框画）

10.用CSS画一条0.5px的直线

11. 单行、多行文本溢出显示省略号

12. 平面转换transform

13. position的值有哪些？ relative和absolute相对于谁进行定位的？

14. BFC规范(块级格式化上下文：block formatting context)理解？

15、Flex弹性布局(重点)

16. 1rem、1em、1vh、1px、1rpx各自代表的含义及区别？

17. css sprite是什么,有什么优缺点

猜你喜欢

3、重绘和重排有什么区别？⭐⭐⭐⭐

5、面试题：png、jpg、gif 图片格式解释，分别什么时候用？

7. line-height和heigh区别