许多前端开发人员都在用 Normalize 为他们的网站设计样式。一些人喜欢在 Normalize.css 中添加一些自己偏好的样式,我也一样。
在本文中,我会与你分享我自己的 CSS reset 项目(除了 Normalize.css 之外我还使用它们)。
我将 reset 项分为8类:
1.盒子大小
2.删除边距和填充
3.列表
4.表格和按钮
5.图像和嵌入视频
6.表格
7.隐藏属性
8…Noscript
调整盒子大小
box-sizing 属性改变了 CSS 盒子模型的工作方式。它会改变计算 width、 height、 padding、 border 和 margin 的方式。
box-sizing 的默认设置是 content-box。我更喜欢将其改为 border-box,因为这样更容易设置 padding 和 width.。
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
web前端开发学习Q-q-u-n: 767273102 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯路
删除边距和填充
浏览器对不同元素 margin 和 padding 的设置各不相同。当我不了解这些时,默认设置会让我失望。但是我更喜欢通过自己编码设置所有边距和填充。
/* Reset margins and paddings on most elements */
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
ma