如何取消HTML默认标签样式？CSS重置技巧详解

来源：Python编程网作者：IT柏拉图头衔：草根站长

导读：本期聚焦于小伙伴创作的《如何取消HTML默认标签样式？CSS重置技巧详解》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《如何取消HTML默认标签样式？CSS重置技巧详解》有用，将其分享出去将是对创作者最好的鼓励。

在浏览器中，像<body>、<h1>到<h6>、<p>、<ul>这样的HTML标签都带有默认的margin、padding以及字体设定。如果不处理，写好的页面在Chrome、Firefox或Edge里看起来会有明显偏差。要取消这些默认样式，最常用的是CSS重置技巧。

为什么需要取消默认样式

不同浏览器内核给标签设置的默认值并不统一。比如<ul>在Chrome里默认有左内边距，而某些旧版本浏览器用外边距。这种差异会让 Flex 或 Grid 布局计算出错，也会让设计稿还原度下降。取消默认样式就是为了拿到一个干净的画布。

最粗暴也最直接的写法是用通配符选中所有元素，把边框、间距清零：

/* 通配符重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

这种方式好处是省事，缺点是会覆盖掉一些你本想保留的默认表现，比如表单控件的原生外观。

如果不希望全部清零，可以只重置常用容器与标题：

/* 针对性重置常用标签 */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li {
  margin: 0;
  padding: 0;
}
ul, ol {
  list-style: none;
}

相比全部清零，Normalize.css保留有用的默认样式，只修浏览器差异。你可以引入它，也可以抽取其中几段。例如统一<button>的字体：

/* 让button继承父级字体 */
button {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

取消HTML默认标签样式不是必须把所有东西都干掉，而是让样式掌握在开发者手里。新手可以先从针对性重置开始，等项目变复杂再考虑引入Normalize.css。理解这些CSS重置技巧，能让你少踩很多布局的坑。

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。