浏览器默认样式重置以及normalize.css的使用

最新推荐文章于 2025-04-15 18:31:39 发布

生活、追梦者

最新推荐文章于 2025-04-15 18:31:39 发布

阅读量2.1k

点赞数 10

分类专栏： css vue3全家桶文章标签： css 前端 vue.js

本文链接：https://blog.csdn.net/weixin_45046532/article/details/137466100

版权

本文探讨了在Web开发中重置CSS的重要性，包括去除浏览器默认样式、提高开发效率和网站性能。介绍了自定义重置CSS的方法以及使用normalize.css脚手架的步骤，以确保跨浏览器的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、为什么要重置 CSS？

在 Web 开发中，不同的浏览器对 CSS 的默认样式有所差异，这可能导致不同浏览器显示同一网页时布局不同、字体大小不同等问题。为了解决这些问题，可以对 CSS 进行初始化，即设置所有元素的默认样式，使得在不同浏览器中呈现的效果尽量一致。

具体来说，初始化 CSS 的目的有以下几点：

去除浏览器默认样式：不同的浏览器对元素的默认样式有所不同，去除这些样式可以使得不同浏览器呈现的效果尽量一致。
避免重置样式带来的问题：重置样式是一种常见的初始化 CSS 的方法，但是它可能会带来一些问题，例如会导致元素的尺寸、边距等属性失效，需要重新设置。
提高开发效率：通过初始化 CSS，可以使得所有元素的默认样式都被设置为开发者所期望的值，这样在开发过程中可以更加高效地编写 CSS，避免重复设置样式。
提高网站性能：通过初始化 CSS，可以减少浏览器对 CSS 文件的解析和渲染时间，提高网站的加载速度和性能。

因此，初始化 CSS 是一种优化 Web 开发的常见方法，可以使得网页在不同浏览器中呈现更加一致的效果，提高开发效率和网站性能。常见的初始化 CSS 的方法包括使用 reset.css、normalize.css 等预定义的样式库，或者手动编写样式进行初始化。

二、自定义重置（博主推荐）

html,
body {
   
  height: 100%;
  /* 文字风格 Sans-serif 各笔画粗细相同，Serif 笔画粗细不同，monospace 等宽体，cursive草书，fantasy梦幻 */
  font-family: 'Microsoft YaHei', sans-serif, 'Helvetica Neue', Helvetica,
    Arial, '黑体', '宋体', Arial;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
   
  font-size: 14px;
  color: #333

最低0.47元/天解锁文章