面试题 Html+Css 篇

面试题 Html+Css 篇

如何理解 HTML 语义化？

• 让人更容易读懂（增加代码可读性）。
• 让搜索引擎更容易读懂，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重（SEO）。
• 在没有 CSS 样式下，页面也能呈现出很好地内容结构、代码结构。

script 标签中 defer 和 async 的区别？

• script ：会阻碍 HTML 解析，只有下载好并执行完脚本才会继续解析 HTML。
• async script ：解析 HTML 过程中进行脚本的异步下载，下载成功立马执行，有可能会阻断 HTML 的解析。
• defer script：完全不会阻碍 HTML 的解析，解析完成之后再按照顺序执行脚本。

从浏览器地址栏输入 url 到请求返回发生了什么？

从 URL 输入到页面展现到底发生什么？
从输入 URL 开始建立前端知识体系
字节面试被虐后，是时候搞懂 DNS 了
前端浏览器缓存知识梳理
一文读懂前端缓存
前端缓存最佳实践
浅解强缓存和协商缓存

面试题 CSS 部分

CSS 盒模型

CSS3 中的盒模型有以下两种：标准盒模型、IE（替代）盒模型。

• 两种盒子模型都是由 content + padding + border + margin 构成
• 其大小都是由 content + padding + border 决定
• 但是盒子内容宽 / 高度（即 width/height）的计算范围根据盒模型的不同会有所不同：
  • 标准盒模型：只包含 content
  • IE（替代）盒模型：content + padding + border

可以通过 box-sizing 来改变元素的盒模型：

box-sizing: content-box ：标准盒模型（默认值）。
box-sizing: border-box ：IE（替代）盒模型。

css 选择器和优先级

深入理解 CSS 选择器优先级

!important > style > id > class

重排（reflow）和重绘（repaint）的理解

你真的了解回流和重绘吗

浏览器的渲染过程分为以下五步：

• 浏览器获取 HTML 文档并将其解析成 DOM 树。
• 处理 CSS 标记，构成样式表声明模型（CSS Object Model，简写为 CSSOM）
• 将 DOM 和 CSSOM 合并为渲染树（rendering tree）。
• 遍历渲染树，开始建立布局（layout），计算每个节点的位置和大小等信息。
• 将渲染树中的各个节点绘制（painting）到屏幕上。

因为浏览器渲染过程的机制，以下操作都会导致浏览器重新生成渲染树，即重排：

• 改变元素的大小或位置，添加或删除 DOM 元素。
• 改变浏览器的窗口尺寸。

重排：无论通过什么方式影响了元素的几何信息 (元素在视口内的位置和尺寸大小)，浏览器需要重新计算元素在视口内的几何属性，这个过程叫做重排。

在浏览器重新生成渲染树之后，渲染树的每个节点都要重新绘制，此过程称为重绘。

不是所有操作都会造成浏览器重排，例如：改变字体颜色、改变背景色等不会影响元素几何属性的操作只会导致重绘。

重绘：通过构造渲染树和重排（回流）阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息 (元素在视口内的位置和尺寸大小)，接下来就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘。

不管是重排还是重绘都是很 “昂贵” 的操作，本项目通过以下操作可以减少重排重绘：

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

实现两栏布局（左侧固定 + 右侧自适应布局）

实现圣杯布局和双飞翼布局（经典三分栏布局）

水平垂直居中多种实现方式

绝对定位 1

利用绝对定位，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 translate 来调整子元素的中心点到父元素的中心。该方法可以不定宽高。

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

绝对定位 2

利用绝对定位，子元素所有方向都为 0 ，将 margin  设置为 auto ，由于宽高固定，对应方向实现平分，该方法必须盒子有宽高。

.father {
  position: relative;
}
.son {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  height: 100px;
  width: 100px;
}

绝对定位 3

利用绝对定位，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 margin-left  和 margin-top  以子元素自己的一半宽高进行负值赋值。该方法必须定宽高。

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
}

flex

.father {
  display: flex;
  justify-content: center;
  align-items: center;
}

flex 布局

Flex 布局教程

flex: 1 ，它具体包含了以下的意思：

• flex-grow: 1 ：该属性默认为 0 ，如果存在剩余空间，元素也不放大。设置为 1  代表会放大。
• flex-shrink: 1 ：该属性默认为 1 ，如果空间不足，元素缩小。
• flex-basis: 0% ：该属性定义在分配多余空间之前，元素占据的主轴空间。浏览器就是根据这个属性来计算是否有多余空间的。默认值为 auto ，即项目本身大小。设置为 0%  之后，因为有 flex-grow  和 flex-shrink  的设置会自动放大或缩小。在做两栏布局时，如果右边的自适应元素 flex-basis  设为 auto  的话，其本身大小将会是 0 。​

line-height 如何继承？

• 父元素的 line-height 写了具体数值，比如 30px，则子元素 line-height 直接继承该值。
• 父元素的 line-height 写了比例，比如 1.5 或 2，则子元素 line-height 也是直接继承该比例。
• 父元素的 line-height 写了百分比，比如 200%，则子元素 line-height 继承的是父元素 font-size * 百分比 计算出来的值。

box-sizing 属性

box-sizing 属性主要用来控制元素的盒模型的解析模式。默认值是 content-box；

• content-box：让元素维持 W3C 的标准盒模型。设置 width/height 属性指的是 content 部分的宽 / 高；
• border-box：让元素维持 IE 传统盒模型（IE6 以下版本和 IE6~7 的怪异模式）。设置 width/height 属性指的是 border + padding + content。

标准浏览器下，按照 W3C 规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。