什么是cssreset ?为什么要用到cssreset?

1,什么是cssreset ?

顾名思义,css reset,样式重置。即重新设置界面的样式。

CSS reset,又叫做 CSS 重写或者 CSS 重置,用于改写HTML标签的默认样式。 有些HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,li 标签有列表标识符号等。一开始,CSS的工作方式没有完全标准化。各个浏览器将自认为合适的"边框","填充","边距","字体","行高"等样式加载到一些基础元素(input,div,a,span)中,以赋予页面独特的感觉。这些默认样式在不同浏览器之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。这必然会带来浏览器兼容问题。 因此,很基础的html元素在IE,Chrome,Firefox,Opera中的显示不尽相同。为了避免页面在不同的浏览器上有不同的效果,我们通常需要显示地对html元素的css样式进行一些默认设置,来将"浏览器自带的设置"重置掉,这个就叫做CSS Reset

2,为什么要用到cssreset?

如果你不定义HTML元素的默认css样式,那么浏览器自己就会用它自己的默认样式;但由于不同浏览器的默认样式是不一样的,会导致你开发的页面在不同浏览器上会看上去不太一样。

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

3,如何使用css reset?

这个很简单,页面的头部引入css文件即可。

在头部直接添加style 标签。

复制代码
*{margin: 0;padding: 0;}

但是这种做法的缺点在于,使用*来匹配所有的元素,这样会降低效率,会影页面的渲染性能。其次,很多不必要reset的元素也一刀切式地reset了。最后就是这个做法太过于简单,无法实现精细化的reset。

后来,有人整了专门的css reset。

比如最常见的两种:reset.css和normalize.css。

后者被bootstrap所采用。normalize.css修复了不同浏览器常见的不一致,规范化常见的组件风格,保存有用的默认值。因此,选择用Normalize.css来取代其它的CSS Resets。

4,辩证的判断是否需要CSS Reset

CSS Reset的主要目标是确保浏览器之间的一致性,并撤消所有默认样式,创建一个空白板。

如今浏览器在布局或间距方面并没有太大的差异。总的来说,浏览器忠实地实现了CSS规范,所以不再那么需要了。

我们应该根据实际的需求辩证的判断是否需要CSS Reset,保持简洁,高效即可。

下面列出一个比较合适的CSS Reset模板,不会完全重置浏览器的默认样式而带来不便,同时能够避免一些常见的浏览器兼容性的问题。

5,使用CSS Reset的弊端

其实也有很多"不建议使用CSS Reset"的

所有的html元素都需要重新设置,会增加css文件的大小

如果重置掉一些基础属性,开发时会容易忘掉补充这些属性,反而引入显示混乱的问题

重置掉一些属性会影响用户通过键盘快捷键操作

相关推荐
aha-凯心31 分钟前
前端学习 vben 之 axios interceptors
前端·学习
熊出没1 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN1 小时前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
用户99045017780091 小时前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家1 小时前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞2 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆2 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记2 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆2 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636022 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端