HTML + CSS 面试题

HTML

如何理解HTML语义化？

HTML语义化就是让HTML元素有自己的含义，作用：

1. 增加代码可读性，让人更容易读懂。
2. 有利于SEO，提高权重。
3. 在没有CSS样式时，页面能呈现出更好地内容结构。

script 标签 defer 和 async 的区别

script：会阻碍HTML解析，只有发送请求获取JS代码并执行完脚本才会解析HTML。
script async：解析 HTML 过程中进行JS代码脚本的异步获取，完成之后立马执行，有可能会阻断 HTML 的解析。
script defer：完全不会阻碍 HTML 的解析，异步获取JS代码脚本后，HTML解析完成之后再按照顺序执行脚本。

内容来源：图解 script 标签中的 async 和 defer 属性

浏览器从输入URL到页面展现发生了什么？

1. DNS 域名解析
2. 请求连接：TCP 三次握手
3. 发送 HTTP 请求
4. 服务器处理请求并返回 HTTP 报文
5. 浏览器解析渲染页面
6. 断开连接：TCP 四次挥手

推荐：从URL输入到页面展现到底发生什么？

CSS

CSS选择器和优先级

CSS选择器可以参考这个：CSS选择器
一般选择器的优先级为：!important > style > id > class ，但多类选择器同时作用于同一元素时，该如何判断优先级呢？
推荐：深入理解CSS选择器优先级

上述文章中核心内容：
优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

如果存在内联样式，那么 A = 1，否则 A = 0 ；
B 的值等于 ID选择器（#id） 出现的次数；
C 的值等于 类选择器（.class） 和 属性选择器（a[href="https://example.org"]） 和 伪类（:first-child） 出现的总次数；
D 的值等于 标签选择器（h1,a,div） 和 伪元素（::before,::after） 出现的总次数。



从左至右比较，如果是样式优先级相等，取后面出现的样式。

回流（重排）和重绘的理解

文章推荐：你真的了解回流和重绘吗

• 回流（reflow,也叫重排）：无论通过什么方式影响了元素的**几何信息**(元素在视口内的位置和尺寸大小)，浏览器需要重新计算元素在视口内的几何属性，这个过程叫做重排。
• 重绘（repaint）：通过构造渲染树和重排（回流）阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(元素在视口内的位置和尺寸大小)，接下来就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘。

重排发生的情况：

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

注意：回流一定会发生重绘，重绘不一定会发生回流

如何减少回流和重绘？

• 最小化重绘和重排，比如样式集中改变，使用添加新样式类名 .class 或 cssText 。
• 批量操作 DOM，比如读取某元素 offsetWidth 属性存到一个临时变量，再去使用，而不是频繁使用这个计算属性；又比如利用document.createDocumentFragment() 来添加要被添加的节点，处理完之后再插入到实际 DOM 中。
• 使用 absolute或 fixed使元素脱离文档流，这在制作复杂的动画时对性能的影响比较明显。
• 开启 GPU 加速(即css3硬件加速)，利用 css 属性 transform、will-change 等，比如改变元素位置，我们使用 translate 会比使用绝对定位改变其 left 、top 等来的高效，因为它不会触发重排或重绘，transform 使浏览器为元素创建⼀个 GPU 图层，这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。

BFC / IFC

• BFC（Block formatting contexts），块级格式化上下文。我的理解是BFC是规定了内部块级元素摆放规则的独立环境。BFC包含的三个要素：
  • 规则约束的对象是块级元素。
  • 规则：一个块级元素单独占据一行空间，逐个往下排列。相邻块级元素的边缘会重叠。BFC里的盒子左侧边缘不会超出BFC，除非这个盒子也变成一个的BFC。
  • 上下文一般理解为一个由容器和子元素参与的、遵循一定规则的、独立的环境；同一上下文中的子元素关系平等，能互相影响，即使是子元素嵌套子元素；子元素可能创建新的上下文，对其内部子元素生效，与外层上下文规则相同，并且新上下文中的子元素与外层上下文的子元素完全隔离。

html根节点默认会创建一个BFC，在这个环境内的块级元素会遵循这个规则摆放。

** 给元素添加绝对定位、浮动、display: inline-block、overflow不为visible、display: flow-root 时会让元素创建新的BFC。

BFC内的块级元素遵守统一的规则，无法超出自身所属的BFC容器。这个创建了BFC的元素包括其内部所有子元素会被当成一个独立的个体存在。

BFC一般用于实现清除浮动。比如元素内有浮动元素导致高度塌陷，给这个元素添加overflow:hidden可以实现包裹浮动子元素；阻止父子元素外边距折叠。
BFC 具有一些特性：

1.块级元素会在垂直方向一个接一个的排列，和文档流的排列方式一致。

2.在 BFC 中上下相邻的两个容器的 margin  会重叠，创建新的 BFC 可以避免外边距重叠。

3.计算 BFC 的高度时，需要计算浮动元素的高度。

4.BFC 区域不会与浮动的容器发生重叠。

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

6.每个元素的左 margin  值和容器的左 border  相接触。

• IFC（Inline formatting contexts），内联格式化上下文。

推荐文章：可能是最好的BFC解析了…

两栏布局的实现（一侧自适应，一侧固定）

flex布局：主流形式，父容器设置 display:flex;，固定子元素设置 flex-basic 或设置宽高，自适应子元素设置 flex:1; 或flex-grow:1;

<div class="container">
  <div class="left"></div>
  <div class