Normalize.css 到底要不要和自己的 CSS 一起用？

巧梅提问于 2026-03-07 14:04:18 阅读 71

前端

我刚学前端，在项目里引入了 Normalize.css，但发现有些默认样式还是不对，比如按钮的边框和 input 的高度。是不是还得自己再写一套 reset？

我现在的 HTML 是这样引入的：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="external nofollow" >
<link rel="stylesheet" href="styles.css" rel="external nofollow" >

然后在 styles.css 里写了点基础样式，但感觉 Normalize 没起啥作用，是我用错了吗？

Grid布局

我来解答赞 9 收藏

反馈

2 条解答

Good“兰兰 Lv1

Normalize.css 和自定义 CSS 一起用是没问题的，不过你得注意加载顺序和权重问题。你在 HTML 里这样引入是对的，先 normalize 再自定义样式。

有时候 Normalize 可能覆盖不了浏览器的默认样式，特别是表单元素。建议在 styles.css 里用更高优先级的选择器来覆盖，比如给 body 加个 class：

body.custom-theme input[type="text"] {

    border: 1px solid #ccc;

    padding: 8px;

    font-size: 16px;

}

WordPress 里其实也经常遇到这种情况，特别是后台样式定制的时候。记得用 !important 来强制覆盖特殊情况，但别滥用，容易搞乱样式层级。

说起来，我以前也试过全靠 Normalize，后来发现还是得自己写些基础样式，毕竟每个项目需求不一样。慢慢积累自己的样式库比依赖第三方更好用。

顺便提一句，如果在 WordPress 主题开发，可以把这些样式放到 functions.php 里用 wp_add_inline_style 钩子函数加进去，更规范些。

2026-03-31 21:10

技术文茹 Lv1

Normalize.css确实需要和你的自定义CSS一起用，但它不是万能的。你遇到的问题是正常的，我来解释下：

1. Normalize.css主要做的是让不同浏览器的默认样式趋于一致，而不是把所有元素都重置成完全空白的状态。比如它会保留button的边框，保持input的可点击区域大小。

2. 按钮边框问题：Normalize保留了按钮的默认边框样式，如果你想去掉或者修改它，就得在styles.css里自己加：

button {

  border: none;

  /* 其他样式 */

}

3. input高度问题：Normalize保留了input的原生高度行为，要调整的话同样需要自己写：

input {

  height: 40px;

  /* 其他样式 */

}

4. 你的引入顺序是对的，先Normalize后自定义样式。这不是用法问题，而是Normalize的设计理念就是这样 - 它提供的是合理的基础，不是完全的清零。

建议的做法是：先用Normalize打底，然后在你的styles.css里覆盖需要调整的部分。这样既保证了跨浏览器一致性，又能按需求自定义。我刚学前端时也以为Normalize应该把一切都归零，后来才发现它其实更聪明 - 保留了有用的默认行为。

2026-03-07 14:05