/* CSS Reset */ * { margin: 0; padding: 0; box-sizing: border-box; font-size: 100%; font-family: inherit; } html { font-size: 16px; } body { font-family: Arial, sans-serif; font-size: 1rem; line-height: 1.5; } a { text-decoration: none; color: inherit; } input, button { font-family: inherit; } img { max-width: 100%; height: auto; }
上述代码是一个常用的CSS重置样式,主要包括以下内容:
1. 全局样式重置:大家使用通配符”*”来匹配网页中所有元素,将外边距(margin)、内边距(padding)以及盒子大小(box-sizing)都设定为0,并把字体大小设为100% 以保证不受浏览器默认字体大小影响而不同,同时也继承了字体规则样式。
2. 字体样式重置:由于不同浏览器可能会有不同的默认字体,因此大家需要为网页设定一个基础字体大小(16px),并给body设置一个字体族(Arial, sans-serif)和一个基础字体大小(1rem),以便在不同设备上,网页中的文字具有一致的大小和基本样式。大家还设置了文字的行高为1.5,以增强可读性。
3. 链接样式重置:大家将a标签的下划线去掉,并继承了颜色,以保证链接文字在网页中有一致的表现。
4. 输入框、按钮样式重置:大家将输入框、按钮的字体设为继承字体,以兼容不同系统的输入框和按钮。
5. 图片样式重置:大家将所有图片的最大宽度设为100%,以保证不被撑破,同时自动适应高度。这一操作在针对手机端开发中是比较必要的操作。
以上是一个简单的CSS重置样式,可以让大家免去一些样式的兼容性问题,提高开发效率。