个人主页:学习前端的小z
个人专栏:HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论!
文章目录
- ✍HTML、CSS常用的vscode插件
- 🍎1 HTML 标签同步重命名 – Auto Rename Tag
- 🍎2 图片导入预览 – Image preview
- 🍎3 好看的文件图标 – vscode-icons
- ✍Css reset 和Normalize.css
- 🍎1 Css reset
- 🍎2 Normalize.css
- 🍎3 区别
- 🍎4 个人结论
✍HTML、CSS常用的vscode插件
完成前端基础学习,就可以开启代码补全提示。
下面来分享一些在实际工作可以增加效率的插件。
🍎1 HTML 标签同步重命名 – Auto Rename Tag
假如打标签的时候打错标签了,这时还需要修改开始标签和结束标签,通常 HTML 代码是非常多的,非常的不银杏,虽然有 Ctrl + D 快捷键。但是经常删除和自己同名的子级标签。
装了这个插件之后,会为当前匹配的标签产生一个黄色的下划线。当修改开始、结束标签时,另一侧的标签会自动重命名。
🍎2 图片导入预览 – Image preview
可以像 idea 一样导入图片之后可以在左侧进行图片的预览。看图:
🍎3 好看的文件图标 – vscode-icons
vscode-icons中有各式各样的文件图标可供选择,uu们可以根据自己的喜欢进行搭配,增添学习过程中的趣味性。
个人主页:学习前端的小z
个人专栏:HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论!
文章目录
- ✍HTML、CSS常用的vscode插件
- 🍎1 HTML 标签同步重命名 – Auto Rename Tag
- 🍎2 图片导入预览 – Image preview
- 🍎3 好看的文件图标 – vscode-icons
- ✍Css reset 和Normalize.css
- 🍎1 Css reset
- 🍎2 Normalize.css
- 🍎3 区别
- 🍎4 个人结论
✍Css reset 和Normalize.css
🍎1 Css reset
又叫做 CSS 重写或者 CSS 重置,用于改写HTML标签的默认样式。
有些HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,li 标签有列表标识符号等。这些默认样式在不同浏览器之间也会有差别,例如ul默认带有缩进的样式,在正下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。这必然会带来浏览器兼容问题。
因此,
在 CSS 代码中,可以使用 CSS 代码去掉这些默认样式,即重新定义标签样式,从而覆盖浏览器的CSS默认属性,即 CSS reset。
需要注意的是,在进行样式重写时,不建议使用 *
选择器进行重写,这样会降低效率,影响性能。
官网:https://meyerweb.com/eric/tools/css/reset/
🍎2 Normalize.css
只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性,相比于传统的css reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。
Css reset 是暴力的,Normalize.css是温和的
官网:http://necolas.github.io/normalize.css/
🍎3 区别
1:Normalize.css保护了有价值的默认值(更符合现代标准)
2:Normalize.css修复了浏览器的bug
3:Normalize.css不会放调试工具变得杂乱
4:Normalize.css是模块化的
5:Normalize.css有详细的文档
区别:https://jerryzou.com/posts/aboutNormalizeCss/
🍎4 个人结论
如果你开发网站是定制性比较强、页面效果复杂的情况下使用 reset.css,比如电商、后台管理等等
那么,如果你开发网站是文本内容(新闻、博客等等)为主,定制性不强,页面也不复杂则使用 Normalize.css
国内目前还是更多是采用定制性强的网站,所以个人认为在国内 reset.css 这种“暴力”思想用得更多一些的
说白了:
- reset.css 的思想适合开发企业项目或者个人项目
- Normalize.css 的思想适合创建 css 框架,比如bootstrp框架都是以它作为基底