前端工程必备CSS重置代码

访问量: 370

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