翻译：疯狂科技之家原文：https://medium.freecodecamp.o...许多前端开发者都在使用Normalize来为他们的网站设计样式。有些人喜欢在Normalize.css中加入一些喜欢的样式，我也是这样。在本文中，我将与您分享我自己的CSS重置项目（除了Normalize.css之外，我还使用它们）。我将重置项目分为8个类别：box-sizing删除边距并填充列表表格和按钮图像并嵌入视频表格隐藏属性noscript调整框大小box-sizing属性更改CSS框模型的工作方式。它改变了宽度、高度、填充、边框和边距的计算方式。box-sizing的默认设置是content-box。我更喜欢将它更改为border-box，因为它更容易设置填充和宽度。有关BoxSizing的更多信息，您可能对“了解BoxSizing”感兴趣。html{box-sizing:border-box;}*,*::before,*::after{box-sizing:inherit;}移除边距和填充浏览器对不同元素的边距和填充有不同的设置。当我不理解这些时，默认设置会让我失望。但我更喜欢通过自己编码来设置所有边距和填充。/*重置大多数元素的边距和填充*/body,h1,h2,h3,h4,h5,h6,ul,ol,li,p,pre,blockquote,figure,hr{margin:0;padding:0;}Lists很多时候我用的是无序列表，也有很多情况不需要圆盘样式。这里我将list-style设置为none。当我需要光盘样式时，我手动将其设置在特定的
- 上。/*从ul中删除圆盘*/ul{list-style:none;}表单和按钮浏览器不继承表单和按钮排版。他们将字体设置为40011pxsystem-ui。我认为这是令人难以置信和奇怪的。所以我总是必须手动让它们从祖先元素继承样式。input,textarea,select,button{颜色：继承；字体：继承；字母间距：继承；}不同的浏览器为表单元素和按钮设置了不同的边框样式。我真的不喜欢这些默认样式，宁愿将它们设置为1px纯灰色。input,textarea,button{边框：1px纯灰色；我对按钮做了一些调整：我将按钮的内边距设置为0.75em和1em，因为根据我的经验，这似乎更符合合理的默认值。删除了应用于按钮的默认边框半径。强制背景色为透明button{border-radius:0;填充：0.75em1em；background-color:transparent;}最后，我将pointer-events:none设置为按钮内的元素。这主要用于JavaScript交互。（当用户点击按钮内的东西时，他们点击的是event.target，而不是按钮。如果按钮内有HTML元素，这种样式可以更容易地处理点击事件）。按钮*{指针事件：无；媒体元素包括img、video、object、iframe和embed。我倾向于使这些元素适合其容器的宽度。我还将这些元素设置为display:block，因为inline-block在元素底部创建了不需要的空白。嵌入、iframe、img、对象、视频{显示：块；max-width:100%;}表格我很少使用表格，但有时它们很有用。这是我的默认样式：table{table-layout:fixed;width:100%;}当元素具有hidden属性时，它们应该从视图中隐藏。Normalize.css已经为我们做了这个。[hidden]{display:none;}这种风格的问题在于它的特异性很低。我经常将隐藏添加到使用类设置的其他元素中。类比属性具有更高的特异性，display:none属性没有效果。这就是为什么我选择使用!important来增加[hidden]的特异性。[hidden]{display:none!important;}Noscript如果一个组件需要JavaScript才能工作，我会添加一个