盒模型 取消

### 取消默认盒模型并设置为 `border-box` 在 CSS 中，默认的盒模型是 `content-box`，这意味着元素的宽度和高度仅包括内容区域，而不包括 `padding` 和 `border`。为了取消默认的盒模型行为，并将所有元素的盒模型设置为 `border-box`（即宽高包括 `content`、`padding` 和 `border`），可以通过以下方式实现： #### 全局设置 `box-sizing: border-box;` 可以通过全局选择器将所有元素的盒模型设置为 `border-box`，以确保宽高计算方式统一： ```css *, *::before, *::after { box-sizing: border-box; } ``` 这种方式能够简化布局计算，避免因为 `padding` 或 `border` 导致元素实际尺寸超出预期的问题[^1]。 #### 结合样式重置优化一致性 为了进一步消除浏览器之间的默认样式差异，可以使用 Normalize.css 来统一基础样式。Normalize.css 不会完全清除默认样式，而是保留有用的默认值，并对常见 HTML 元素进行标准化处理，使其在不同浏览器中表现一致。引入 Normalize.css 后再设置 `box-sizing` 能够提供更稳定的样式基础： ```html <!-- 引入 Normalize.css --> <link rel="stylesheet" href="normalize.css"> ``` 然后在自定义 CSS 文件中添加： ```css html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } ``` 这样不仅统一了盒模型，还提升了跨浏览器的一致性，同时保留了 Normalize.css 提供的其他样式优化[^2]。 #### 局部调整盒模型 如果希望某些特定元素使用 `content-box` 模型，可以在这些元素上单独设置： ```css .content-box { box-sizing: content-box; } ``` 例如，一个具有 `padding` 和 `border` 的 `.box` 元素可以通过切换类名来控制其盒模型行为： ```html <div class="box">border-box</div> <div class="box content-box">content-box</div> ``` 对应的 CSS 定义如下： ```css .box { display: inline-block; width: 150px; height: 150px; padding: 10px; background: tomato; color: white; border: 10px solid red; } ``` 第一个 `.box` 使用的是 `border-box`，因此它的总宽高仍然是 `150px`；而第二个 `.content-box` 则会因为 `content-box` 的特性，其总宽高为 `150px + 20px(padding) + 20px(border)`，即 `190px`[^1]。 #### 移动端额外优化 在移动端开发中，除了设置盒模型外，还可以通过一些额外的样式优化交互体验。例如，移除默认背景色、禁用点击高亮效果以及去除输入框的轮廓线等： ```css a, button, input, textarea, select { background: none; -webkit-tap-highlight-color: rgba(255, 0, 0, 0); outline: none; -webkit-appearance: none; } ``` 这些样式有助于提升移动设备上的视觉一致性和用户体验[^4]。