自己用的一套reset css

最新推荐文章于 2025-08-01 10:15:50 发布

叫我海王大人

最新推荐文章于 2025-08-01 10:15:50 发布

阅读量184

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 css 文章标签： css reset css

本文链接：https://blog.youkuaiyun.com/leoyajun/article/details/102498434

css 同时被 2 个专栏收录

3 篇文章

订阅专栏

前端

2 篇文章

订阅专栏

本文详细介绍了CSS Reset样式及其应用，通过清除浏览器默认样式，确保网页在不同浏览器中具有一致的表现。同时，提供了常用的Class样式，帮助开发者快速构建网页布局。

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

整理出来的一套reset.css

// reset css + 常用 class
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, header, hgroup, nav, section, article, aside, footer, figure, figcaption, menu, button {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: normal;
}
body {
  font-size: 12px;
  font-family: "SimSun", "宋体", "Arial Narrow";
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(255,255,255,0);
}
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: normal;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style-type: none;
}
li {
  list-style: none;
}
select, input, img, select {
  vertical-align: middle;
}
a {
  outline: 0;
  color: inherit;
  font-size: inherit;
  text-decoration: none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:link {
  color: inherit;
}
a:visited {
  color: inherit;
}
a:hover, a:active, a:focus {
  color: inherit;
  text-decoration: none;
}
a,button,input,select,textarea,a:focus,button:focus,input:focus,select:focus,textarea:focus,[onclick]{
  outline: 0;
  -webkit-tap-highlight-color:rgba(255,255,255,0);
}
input, button, textarea, select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  border: 0;
  background: none;
  -webkit-appearance: none;
  outline: 0;
}
em,i {
  font-style: normal;
}
em{
  color: #f28c48;
}
::-webkit-input-placeholder {
  color:#999;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"]{
  -moz-appearance: textfield;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}