CSS基础样式库

青旅半醒 2023-01-08 03:29 105阅读 0赞

### CSS基础样式库 ###

*  Reset
 *  Normalize
 *  Reset与Normalize效果对比
 *  Reset与Normalize使用哪一个？

HTML标签在各个浏览器中会有不同的默认属性， **Reset.css**和 **Normalize.css**是我使用最频繁的基础样式库，他们都是为了解决兼容性和统一视觉效果，但是其中的风格略有不同。

# Reset #

Reset从单词的意思就很好理解，重置、清零，它会把所有的标签的margin、padding、border等等属性重置掉。

# Normalize #

Normalize与Reset不同之处在于，它不会重置标签的默认属性，而是保证标签在各浏览器兼容性的情况下保留下来了默认属性。

# Reset与Normalize效果对比 #

同样一段html，来看看Reset与Normalize展示出来的效果：

**使用Reset的效果图：**  
![在这里插入图片描述][2021011821542114.png]  
**使用Normalize的效果图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzk3NDEw_size_16_color_FFFFFF_t_70]

# Reset与Normalize使用哪一个？ #

网上对比的文章很多，都列出了他们的优劣势，其实更应该从项目本身考虑，适合哪个就用哪个，有句话很对，存在即合理。

[2021011821542114.png]: /images/20221119/13b83df8e6c64202af8e1beb7723d630.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzk3NDEw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210118215855956.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzk3NDEw,size_16,color_FFFFFF,t_70