CSS 样式重置文件

发布于 2021-11-28 20:07:50 字数 4447 浏览 1031 评论 0

html { 
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  height: 100%; 
} 
body { 
  margin: 0;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;
  height: 100%;
} 
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section,summary { 
  display: block; 
} 
audio, canvas, progress, video { 
  display: inline-block; 
} 
audio:not([controls]) { 
  display: none;
  height: 0; 
} 
progress { 
  vertical-align: baseline; 
}
a {
  background: transparent;
  text-decoration: none;
  color: #08c;
} 
a:active { 
  outline: 0; 
} 
abbr[title] { 
  border-bottom: 1px dotted; 
} 
b, strong { 
  font-weight: bold; 
} 
dfn { 
  font-style: italic; 
} 
mark { 
  background: #ff0; color: #000; 
} 
small { 
  font-size: 80%; 
} 
sub, sup { 
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
} 
sup { 
  top: -0.5em; 
} 
sub { 
  bottom: -0.25em; 
} 
img { 
  max-width: 100%;
  border: 0;
  vertical-align: middle;
} 
svg:not(:root) { 
  overflow: hidden; 
} 
pre { 
  overflow: auto;
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
} 
code, kbd, pre, samp { 
  font-family: monospace, monospace;
  font-size: 1em; 
} 
button, input, optgroup, select, textarea { 
  color: inherit;
  font: inherit;
  margin: 0;
  vertical-align: middle; 
} 
button, input, select { 
  overflow: visible; 
} 
button, select { 
  text-transform: none; 
} 
button, html input[type="button"], input[type="reset"], input[type="submit"] { 
  -webkit-appearance: button;
  cursor: pointer; 
} 
[disabled] { 
  cursor: default; 
} 
button::-moz-focus-inner, input::-moz-focus-inner { 
  border: 0;
  padding: 0; 
} 
input { 
  line-height: normal; 
} 
input[type="checkbox"], input[type="radio"] { 
  box-sizing: border-box;
  padding: 0;
} 
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { 
  height: auto; 
}
input[type="search"] { 
  -webkit-appearance: textfield;
  box-sizing: border-box; 
}
 input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { 
  -webkit-appearance: none; 
}
fieldset { 
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; 
} 
legend { 
  border: 0;
  padding: 0; 
} 
textarea { 
  overflow: auto;
  resize: vertical;
  vertical-align: top; 
} 
optgroup { 
  font-weight: bold; 
} 
input, select, textarea { 
  outline: 0; 
} 
textarea, input { 
  -webkit-user-modify: read-write-plaintext-only; 
} 
input::-ms-clear, input::-ms-reveal { 
  display: none; 
} 
input::-moz-placeholder, textarea::-moz-placeholder { 
  color: #999; 
} 
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
  color: #999; 
} 
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #999; 
} 
.placeholder { 
  color: #999; 
} 
table { 
  border-collapse: collapse;
  border-spacing: 0; 
} 
td, th { 
  padding: 0; 
} 
h1, h2, h3, h4, h5, h6, p, figure, form, blockquote { 
  margin: 0; 
} 
ul, ol, li, dl, dd { 
  margin: 0; padding: 0; 
} 
ul, ol {
  list-style: none outside none; 
} 
h1, h2, h3 { 
  line-height: 2;
  font-weight: normal; 
} 
h1 { 
  font-size: 18px; 
} 
h2 { 
  font-size: 16px; 
} 
h3 { 
  font-size: 14px; 
} 
i { 
  font-style: normal; 
} 
* { 
  box-sizing: border-box; 
  padding: 0;
  margin: 0;
} 
.clearfix::before, .clearfix::after { 
  content: "";
  display: table; 
} 
.clearfix::after { 
  clear: both; 
}
/*滚动条样式*/
*::-webkit-scrollbar {
  width: 4px;  
  height: 4px;
}
*::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.8);
  background: rgba(255,255,255,1);
}
*::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.8);
  border-radius: 0;
  background: rgba(255,255,255,0.5);
}
/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84961 人气
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文