![cover](https://img-blog.csdnimg.cn/img_convert/a7b426f027554ddcbce196b962043da2.png)
vue或者react的css样式初始(css样式重置)——reset.css与normalize.css
前言为什么要样式重置即 css reset ?原因:不同的浏览器在实现w3c标准过程中,对各个元素的实现是不一致的。这就导致了同一个页面在不同的浏览器中比如ie和chrome中,表现有差异。为了解决这个问题,即不同浏览器中表现的一致性,需要使用css reset。实现初学* {margin: 0;padding: 0;border:0;}优缺点:简单粗暴,迅速实现,但是* 通配符需要将所有标签遍历
·
前言:为什么要样式重置即 css reset ?
原因:不同的浏览器在实现w3c标准过程中,对各个元素的实现是不一致的。这就导致了同一个页面在不同的浏览器中比如ie和chrome中,表现有差异。为了解决这个问题,即不同浏览器中表现的一致性,需要使用css reset。
实现
1. 初学
* {
margin: 0;
padding: 0;
border: 0;
}
优缺点:简单粗暴,迅速实现,但是* 通配符需要将所有标签遍历,但标签数量和种类较多的时候,会增加客户端的负担,影响网页性能。
2. 常用
全局引入自定义经典的 reset.css 文件,网上有许多优秀的 reset.css 提供参考
html,
body,
div,
span,
applet,
object,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
font-weight: normal;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
ol,
ul,
li {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
th,
td {
vertical-align: middle;
}
/* custom */
a {
outline: none;
color: #16418a;
text-decoration: none;
-webkit-backface-visibility: hidden;
}
a:focus {
outline: none;
}
input:focus,
select:focus,
textarea:focus {
outline: -webkit-focus-ring-color auto 0;
}
3. 最优: normalize.css + reset.css
normalize.css 库
其最大的好处就是normalize.css的作用是保留有用的浏览器默认样式,而不是从每个元素中删除所有默认样式。
如果不够,结合 reset.css 一起使用
安装
npm install normalize.css
yarn add normalize.css
引入
import 'normalize.css/normalize.css'
使用 normalize.css 的主要好处包括:
- 一致的跨浏览器样式:normalize.css 通过标准化浏览器的默认样式,确保在不同浏览器中呈现一致的外观和感觉。
- 保留有用的默认样式:与 reset.css 不同,normalize.css 不会完全移除所有默认样式,而是保留了有用的默认样式(如表单元素的样式)。
- 修复浏览器特定的错误:normalize.css 包含了一些针对特定浏览器的修复,解决了不同浏览器之间的兼容性问题。
- 提高可读性和可维护性:normalize.css 的代码经过精心编写和注释,易于阅读和理解,便于维护和扩展。
- 更好的可访问性:normalize.css 考虑了可访问性问题,确保在不同设备和屏幕阅读器上有良好的表现。
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)