CSS Reset Modern CSS Reset
目录
什么是CSS Reset？
CSS Reset为什么存在？
CSS Reset该怎么写？
CSSReset示例
1.淘宝（CSS Reset）：
2.百度（CSS Reset）：
Modern CSS Reset
核心观点
整个 Reset 的源码比较简单：
其中一些比较有意思的点，单看盒子模型：
再看看在用户体验及可访问性方面的一些做法：
结合实际环境
小结
什么是CSS Reset？
CSS Reset，又叫做 CSS 重写或者 CSS 重置，意为重置默认样式。HTML中绝大部分标签元素在网页显示中都有一个默认属性值，通常为了避免重复定义元素样式，需要进行重置默认样式—— CSS Reset
CSS Reset为什么存在？
不同核心的浏览器对CSS的解析效果呈现各异，导致所期望的效果跟浏览器的“理解”效果有偏差，而 CSS Reset 就是用来重置（复位）元素在不同核心浏览器下的默认值以尽量保证元素在不同浏览器下的同一“起跑线”的样式方法
CSS Reset该怎么写？
对于不同的项目的 CSS Reset 也会有变化。CSS Reset 应当是个人积累的经验的总结，重置一些经常使用的，在不断学习中修改。
那作为初学者该如何写呢？首先可以参考一些网站的 CSS Reset ，切不可复制过来直接用。应当像砌墙一样，一块砖一块砖的积累。当你觉得你每次都要写这个重置样式，那就加进你的 CSS Reset表吧。
CSSReset示例
1.淘宝（CSS Reset）：
html {
overflow-x:auto;
overflow-y:scroll;
}
body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {
font-weight:400;
margin:0;
padding:0;
}
h1, h2, h3, h4, h4, h5 {
margin:0;
padding:0;
}
body {
background-color:#FFFFFF;
color:#666666;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
padding:0 10px;
text-align:left;
}
select {
font-size:12px;
}
table {
border-collapse:collapse;
}
fieldset, img {
border:0 none;
}
fieldset {
margin:0;
padding:0;
}
fieldset p {
margin:0;
padding:0 0 0 8px;
}
legend {
display:none;
}
address, caption, em, strong, th, i {
font-style:normal;
font-weight:400;
}
table caption {
margin-left:-1px;
}
hr {
border-bottom:1px solid #FFFFFF;
border-top:1px solid #E4E4E4;
border-width:1px 0;
clear:both;
height:2px;
margin:5px 0;
overflow:hidden;
}
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
caption, th {
text-align:left;
}
q:before, q:after, blockquote:before, blockquote:after {
content:””;
}2.百度（CSS Reset）：
body {
font-family:arial,helvetica,sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.4;
text-align:center;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
table {
font-size:inherit;
}
input, select {
font-family:arial,helvetica,clean,sans-serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
button {
overflow:visible;
}
th, em, strong, b, address, cite {
font-style:normal;
font-weight:normal;
}
li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
img, fieldset {
border:0 none;
}
ins {
text-decoration:none;
}而我最近比较喜欢的一个 CSS Reset 方案，源自于—— Modern-CSS-Reset 。
Modern CSS Reset
核心观点
重置合理的默认值
关注用户体验
关注可访问性
整个 Reset 的源码比较简单：
/* Box sizing rules */
*,
*::before,
*::after {box-sizing: border-box;
}/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {margin: 0;
}/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {list-style: none;
}/* Set core root defaults */
html:focus-within {scroll-behavior: smooth;
}/* Set core body defaults */
body {min-height: 100vh;text-rendering: optimizeSpeed;line-height: 1.5;
}/* A elements that don't have a class get default styles */
a:not([class]) {text-decoration-skip-ink: auto;
}/* Make images easier to work with */
img,
picture {max-width: 100%;display: block;
}/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {font: inherit;
}/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {html:focus-within {scroll-behavior: auto;}*,*::before,*::after {animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;}
}其中一些比较有意思的点，单看盒子模型：
*,
*::before,
*::after {box-sizing: border-box;
}Normalize.css 是不推荐这么做的，大部分元素的 box-sizing 其实都是 content-box，但是，对于实际开发，全部元素都设置为 border-box 其实是更便于操作的一种方式。
再看看在用户体验及可访问性方面的一些做法：
html:focus-within {scroll-behavior: smooth;
}scroll-behavior: smooth 意为平滑滚动，当然这里是设置给了 html:focus-within 伪类，而不是直接给 html 赋予平滑滚动，这样做的目的是只对使用键盘 tab 键切换焦点页面时，让页面进行平滑滚动切换，带来更好的使用体验。
如果我们设置了如下 CSS：
`html {
scroll-behavior: smooth;
}`可能会起到一起副作用，譬如，当我们在页面查找元素时候（使用 Ctrl + F、或者 Mac 的 Commond + F），这段 CSS 代码可能会严重延缓我们的查找速度：
再看看这段代码：
@media (prefers-reduced-motion: reduce) {html:focus-within {scroll-behavior: auto;}*,*::before,*::after {animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;}
}prefers-reduced-motion 规则查询用于减弱动画效果，除了默认规则，只有一种语法取值 prefers-reduced-motion: reduce，开启了该规则后，相当于告诉用户代理，希望他看到的页面，可以删除或替换掉一些会让部分视觉运动障碍者不适的动画类型。
vestibular motion disorders 是一种视觉运动障碍患者，翻译出来是前庭运动障碍，是一种会导致眩晕的一类病症，譬如一个动画一秒闪烁多次，就会导致患者的不适。
使用方法，还是上面那段代码：
.ele {animation: aniName 5s infinite linear;
}@media (prefers-reduced-motion: reduce) {.ele {animation: none;}
}结合实际环境
当然，结合实际环境，目前国内整体不太注重可访问性相关的内容。
而且，许多业务根本无法抛弃一些老旧浏览器，仍然需要兼容 IE 系列。
因此，对于现阶段的 Reset 方案，可以灵活搭配：
- 如果你的业务场景仍然需要考虑一些老旧浏览器，依旧需要兼容 IE 系列，Normalize.css 的大部分功能都还是非常好的选择
- 如果你的业务场景只专注于 Chrome 或者是 Chromium 内核，Normalize.css 内的许多内容其实可能是一些实际中根本不会遇到或者用上的兼容适配，可以进行必要的精简
- 如果你的业务是全球化，面向的用户不仅仅在国内，你应该开始考虑更多可访问性相关的内容，上述的 Modern CSS Reset 可以借鉴一下
因此，更应该的情况是，根据实际的业务需要，吸收多个业界比较常见 / 知名的 Reset 方案形成自己业务适用的。
小结
前端早期，各浏览器对 CSS 的规范支持和理解是不同的，为了解决网站风格的统一，出现了 CSS Reset 。
早期的 CSS Reset 无脑兼容各浏览器被称为硬重置，因为硬重置会导致许多不必要的覆盖和放弃了浏览器原生支持的特性，就被弃用了。
这时候出现了软重置，它只简单的规范了各种元素的样式和纠正一些错误，做到对元素最小的侵入，而软重置中的翘楚就是 Normalize.css。
最后的集大成者是个性化重置，就是我们平时用到第三方 UI 框架。
最后说一句，CSS Reset 是完全需要的，不然会导致网址布局的混乱，但同时记住不要使用硬重置做过多的事情，来保护 CSS 的原生特性。
CSS Reset Modern CSS Reset相关推荐
- [css] Reset CSS和Normalize CSS的区别是什么？
[css] Reset CSS和Normalize CSS的区别是什么? Reset:将所有浏览器的默认样式都统一化,注重的是跨浏览器统一样式,用户还要自行添加一些默认样式. Normalize:会根 ...
- HTML中设置鼠标悬停状态伪类,四大伪类,css鼠标样式设置,reset操作,静止对文本操作...
本文将要为您介绍的是四大伪类,css鼠标样式设置,reset操作,静止对文本操作,教程操作方法:07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) ...
- vue或者react的css样式初始(css样式重置)——reset.css与normalize.css
前言 为什么要样式重置即 css reset ? 原因:不同的浏览器在实现w3c标准过程中,对各个元素的实现是不一致的.这就导致了同一个页面在不同的浏览器中比如ie和chrome中,表现有差异.为了解 ...
- 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- html大作业网页代码 ——2019凡客服装店铺商城(1页) HTML+CSS+JavaScript HTML+CSS大作业_ 服装店铺网页制作作业_购物网页设计...
HTML5期末大作业:服装店铺商城网站设计--2019凡客服装店铺商城(1页) HTML+CSS+JavaScript 文章目录 HTML5期末大作业:服装店铺商城网站设计--2019凡客服装店铺商城 ...
- HTML+CSS静态页面网页设计作业——2019凡客服装店铺商城(1页) HTML+CSS+JavaScript HTML+CSS大作业_ 服装店铺网页制作作业_购物网页设计...
HTML5期末大作业:服装店铺商城网站设计--2019凡客服装店铺商城(1页) HTML+CSS+JavaScript HTML+CSS大作业: 服装店铺网页制作作业_购物网页设计- 文章目录 HTM ...
- dede css文件,dede css教程
dede css教程 [2021-02-12 18:25:39] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace("/(\s ...
- CSS起名表 (css ID CLASS名称参考)
CSS起名表 元素:element 页头:header 登录条:loginbar 标志:logo 侧栏:sidebar 广告:banner 导航:nav 子导航:subnav 菜单:menu 子菜单: ...
- HTML期末大作业——医药用品购物商城首页(1页) HTML+CSS+JavaScript HTML+CSS大作业_ 医药用品购物网页制作作业_医药用品购物页设计...
HTML5期末大作业:医药用品购物网站设计--医药用品购物商城首页(1页) HTML+CSS+JavaScript 文章目录 HTML5期末大作业:医药用品购物网站设计--医药用品购物商城首页(1页) ...
- 【web前端】CSS高级技巧（精灵图，字体图标，CSS三角，CSS用户界面样式，文字与图片垂直对齐，溢出的文字省略号显示，常见布局技巧，CSS初始化）
使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录 一.精灵图 1.为什么需要精灵图 2.精灵图( sprit ...
最新文章
- 和12岁小同志搞创客开发：如何驱动LED点阵模块？
- centos7 firewalld日常使用
- 【C++】Visual Studio教程(二) - 代码编辑器
- SAP云平台CloudFoundry上部署应用的log分析
- NetBeans 6.5 正式发布
- yaf php源码,PHP-Yaf执行流程-源码分析
- 《OpenGL编程指南》一第3章 OpenGL绘制方式
- matlab2c使用c++实现matlab函数系列教程-disp函数
- 简单理解下内存的几大区域
- SpringAOP中的JointPoint和ProceedingJoinPoint使用详解（附带详细示例）
- Kafka从上手到实践 - 庖丁解牛：Consumer | 凌云时刻
- 怎样给计算机做屏幕保护,如何制作电脑屏保？XP系统中怎么制作动态屏幕保护？...
- empty是什么意思 php,empty是什么意思中文翻译
- iOS从零开始与Swift：简而言之的Swift
- CSLA公链以“硬实力”成业界翘楚—csla超级公链是真的吗
- Leetcode刷题记录 735. 行星碰撞
- GO+MySQL，如虎添翼！
- Linux基础Day02
- 一体化步进伺服电机在平板打印机上应用
- 浅析BMS上电源芯片SBC应用