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

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

前端

我刚学前端，在项目里引入了 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布局

我来解答赞 1 收藏

反馈

1 条解答

技术文茹 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