今天小编跟大家讲解下有关如何用自己喜欢的 CSS 风格重置网站的样式 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关如何用自己喜欢的 CSS 风格重置网站的样式 的相关资料，希望小伙伴们看了有所帮助。
许多前端开发人员都在用 Normalize 为他们的网站设计样式。一些人喜欢在 Normalize.css 中添加一些自己偏好的样式，我也一样。
在本文中，我会与你分享我自己的 css reset 项目（除了 Normalize.css 之外我还使用它们）。
我将 reset 项分为8类：
盒子大小删除边距和填充列表表格和按钮图像和嵌入视频表格隐藏属性Noscript调整盒子大小box-sizing属性改变了 css 盒子模型的工作方式。它会改变计算width、height、padding、border和margin的方式。
box-sizing的默认设置是content-box。我更喜欢将其改为border-box，因为这样更容易设置padding和width.。
有关 Box Sizing 的更多信息，你可能对“了解Box大小”感兴趣。
html { box-sizing: border-box;}*,*::before,*::after { box-sizing: inherit;}删除边距和填充浏览器对不同元素margin和padding的设置各不相同。当我不了解这些时，默认设置会让我失望。但是我更喜欢通过自己编码设置所有边距和填充。
body,h1,h2,h3,h4,h5,h6,ul,ol,li,p,pre,blockquote,figure,hr { margin: 0; padding: 0;}列表我在很多情况下都使用无序列表，而且很多情况下都不需要disc样式。在这里我将list-style设置为none。当我需要disc样式时，会在特定的<ul>上手动设置它。
ul { list-style: none;}表单和按钮浏览器不会继承表单和按钮的排版。他们将font设置为400 11px system-ui。我认为这是令人难以置信和奇怪的。所以我总是要手动让它们从祖先元素继承样式。
input,textarea,select,button { color: inherit; font: inherit; letter-spacing: inherit; }不同的浏览器为表单元素和按钮设置了不同的边框样式。我很不喜欢这些默认样式，宁愿将它们设置为1px solid gray。
input,textarea,button { border: 1px solid gray; }我对按钮做了一些调整：
将按钮的padding设置为0.75em和1em，因为这看起来更符合我经验中的合理默认值。删除了应用于按钮的默认border-radius。强制背景颜色是透明的button { border-radius: 0; padding: 0.75em 1em; background-color: transparent;}最后，我将pointer-events: none设置为按钮内的元素。这主要用于 Javascript 交互。
（当用户点击按钮中的某些内容时，他们点击的内容是event.target，而不是按钮。如果按钮内有 html 元素，这种风格可以更轻松地处理click事件）。
button * { pointer-events: none;}媒体元素包括img、video、object、iframe和embed。我倾向于让这些元素符合其容器的宽度。
I also set these elements to display: block because inline-block creates unwanted whitespace at the bottom of the element.我还将这些元素设置为display: block，因为inline-block在元素的底部创建了不需要的空格。
embed,iframe,img,object,video { display: block; max-width: 100%;}表格我很少使用表格，但有时它们可能很有用。这是我的默认样式：
table { table-layout: fixed; width: 100%;}当元素具有hidden属性时，应该从视图中隐藏它们。 Normalize.css 已经为我们做了这件事。
[hidden] { display: none;}这种风格的问题是它的特异性低。
我经常将hidden添加到用类设置的其他元素中。类的特异性高于属性，并且display: none属性不起作用。
这就是为什么我选择用!important提高[hidden]的特异性。
[hidden] { display: none !important;}Noscript如果一个组件需要 Javascript 才能工作，我会添加一个<noscript>标签让用户知道（如果他们已经禁用了Javascript）。
这样为<noscript>标记创建默认样式：
noscript { display: block; margin-bottom: 1em; margin-top: 1em;}翻译：疯狂的技术宅原文：https://medium.freecodecamp
来源：爱蒂网
