vue或者react的css样式初始(css样式重置)—

前言

为什么要样式重置即 css reset ？
原因：不同的浏览器在实现w3c标准过程中，对各个元素的实现是不一致的。这就导致了同一个页面在不同的浏览器中比如ie和chrome中，表现有差异。为了解决这个问题，即不同浏览器中表现的一致性，需要使用css reset。

实现

初学
```
* {margin: 0;padding: 0;border:0;
}
```
优缺点：简单粗暴，迅速实现，但是* 通配符需要将所有标签遍历，但标签数量和种类较多的时候，会增加客户端的负担，影响网页性能。

常用
全局引入自定义经典的 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;
}

最优（个人认为）
新的CSS工具——normalize.css
其最大的好处就是Normalize.css的作用是保留有用的浏览器默认样式，而不是从每个元素中删除所有默认样式。
1. 安装
```
npm install --save normalize.css
```
1. 引入
```
import 'normalize.css/normalize.css'
```

vue或者react的css样式初始(css样式重置)——reset.css与normalize.css相关推荐

css 重置样式表（Normalize.css）
目录一.为什么要重置CSS? 二.如何重置CSS 三.重置方案 1.自定义重置(博主推荐) 2.官方推荐重置(Normalize.css) 2.1.normalize.css并不是简单的重置了所有的 ...
normalize.css
normalize.css收藏目前GitHub上比较火的一个样式重置的css 项目地址[:https://github.com/necolas/normalize.css/blob/master/n ...
Normalize.css和Reset CSS有什么区别？
我知道CSS重置是什么,但是最近我听说了这个叫做Normalize.css的新东西. Normalize.css和Reset CSS有什么区别? 标准化CSS和重置CSS有什么区别? CSS重置只是一 ...
php normalize,normalize.css的使用
Normalize.css的使用及下载 Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normaliz ...
常见的前端考试面试题目【vue，react，css，six】
常见的vue,javascript,css前端面试题 1.Vue2和Vue3的区别至少说5点 2.Vue3中组件通信的流程[父传子,子传父] 3.Apply/call/bind的原理是什么? 4.说说 ...
web前端知识点总结html，css，js，vue，react/面试题会经常问到
一阶段 1.网络中使用最多的图片格式有哪些 gif 支持动画,只有全透明和不透明两种模式,只有256种颜色 jpg 采用有损压缩算法,体积较小,不支持透明,不支持动画 png 采用有损压缩算法,体积也 ...
05 react img css修改svg图片样式
react img css修改svg图片样式 svg图片的相关理论定义优点前端引入svg图片的方式方式一:<svg>标签引入,内嵌到 HTML 中方式二,修改svg的颜色方式三 ...
前端面试题全面整理-带解析涵盖CSS、JS、浏览器、Vue、React、移动web、前端性能、算法、Node...
来源 | https://www.html.cn/interview/13950.html 本篇文章整理总结了一些前端面试题,涵盖面很广,并且面的都是知名大厂,所以这些题还是很有代表性的,都掌握以后一 ...
css、js、浏览器、vue、react、移动web、前端性能、算法、node前端面试题
前端面试题全面整理-带解析涵盖(css.js.浏览器.vue.react.移动web.前端性能.算法.node) 前言上期整理了一些vue面试题,本期整理总结这些前端面试题,涵盖面很广,并且面的都 ...

vue或者react的css样式初始(css样式重置)——reset.css与normalize.css

前言

实现

vue或者react的css样式初始(css样式重置)——reset.css与normalize.css相关推荐

最新文章

热门文章