CSS 控制Html页面高度导致抖动问题的原因

CSS 控制 HTML 页面高度导致抖动问题，主要是由于浏览器的渲染机制和 CSS 盒模型导致的。下面是详细的攻略：

原因分析

CSS 盒模型

在 CSS 盒模型中，一个元素的高度由 content、padding、border 和 margin 决定。当我们通过 CSS 控制元素的高度时，实际上是控制了该元素的 content 高度。

浏览器渲染机制

在浏览器的渲染过程中，浏览器会按照 HTML 文档的结构逐个解析并渲染成 DOM 树。同时浏览器也会解析 CSS 样式表，并计算出每个元素的最终样式。

然后，浏览器会根据 DOM 树和样式计算出每个元素的位置和大小，将它们绘制出来。浏览器渲染页面是一个逐帧渲染的过程，每个帧都有一个时间限制。当某个元素的大小改变时，浏览器就需要重新计算该元素及其子元素的位置和大小，这个过程会导致页面重新绘制，从而引发抖动问题。

解决方案

方案一：使用 box-sizing

我们可以通过设置 box-sizing 属性来调整元素的盒模型，这样就可以让 CSS 控制的高度也包括 padding 和 border 的高度。

* {
  box-sizing: border-box;
}

方案二：使用固定的高度

另一种解决方案是使用固定的高度，这样就不会在响应式布局时导致抖动问题。但是这种方案相对不够灵活，需要根据具体情况选择是否使用。

.header {
  height: 80px;
}

示例说明

示例一：padding 和 border 导致抖动

<div class="box">
  <p>这是一个段落</p>
</div>

.box {
  padding: 10px;
  border: 1px solid #000;
  height: 100px;
}

上述代码中，我们设置了一个高度为 100px 的盒子，并添加了 padding 和 border。当 padding 和 border 导致盒子高度超过 100px 时，页面会发生抖动现象。此时我们可以使用方案一，通过设置 box-sizing: border-box; 来解决。

示例二：文本内容改变导致抖动

<div class="header">
  <h1>这是一个标题</h1>
</div>

.header {
  height: auto;
}

上述代码中，我们设置了一个高度为自适应的头部元素，并在其中添加了一个标题。当文本内容改变时，头部元素的高度也会发生改变，从而导致页面抖动。此时我们可以使用方案二，通过设置固定的高度来解决。例如，将 .header 的高度设置为 height: 80px;，这样在文本内容改变时，头部元素的高度不会发生改变。