分类
公众号「0加1」

前端工程必备CSS重置代码


title: 前端工程必备CSS重置代码

/*
  1. 明确Box模型,使用W3C标准盒模型
*/
*, *::before, *::after {
  box-sizing: border-box;
}
/*
  2. margin边距归零
*/
* {
  margin: 0;
}
/*
  3. 使用基于百分比的高度计算方式
*/
html, body {
  height: 100%;
}
/*
  Typographic tweaks!
  4. 行高明确设置为1.5;(这个没有标准,也可以设置为2)
  5. 启用平滑字体(仅在macOS生效)
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  6. 为常见媒体类型设置块模型,为了避免图片等媒体类型溢出容器,设置高度为100%
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/*
  7. 移除默认的字体排版样式,继承父级字体样式
*/
input, button, textarea, select {
  font: inherit;
}
/*
  8. 避免文本溢出容器
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/*
  9. 隔离混合模式
*/
#root, #__next {
  isolation: isolate;
}

原文引用: https://www.joshwcomeau.com/css/custom-css-reset/

本文永久更新地址(欢迎来读留言,写评论):

https://www.v2fy.com/p/2022-01-15-css-1642225628000

发表评论

电子邮件地址不会被公开。


The maximum upload file size: 2 MB.
You can upload: image, audio, video, document, spreadsheet, interactive, text, archive, code, other.
Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded.