发表于: 2019-03-04 19:39:09

1 783


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin) 

什么是CSS Reset?

在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,

strong标签有字体加粗样式,em标签有字体倾斜样式。不同浏览器的默认样式之

间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,

而Firefox下,它的缩进是由padding实现的。在切换页面的时候,浏览器的默认样式

往往会给我们带来麻烦,影响开发效率。所以解决的方法就是一开始就将浏览器的默

认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。

最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset。

最简单的css reset

 

* {

padding: 0;

margin: 0;

}

“ * ”代表所有的标签或元素,就叫做通配符选择器。这代表这段代码会匹配所有的元素,为所有元素添加样式,所以当浏览器解析到 * 时,会将页面内的所有标签都进行如上的样式重置,就是让他们的padding margin都为0,这就相当于完全清除了浏览器的padding margin默认样式。但是,有很多的元素我们可能在页面中用不到,或者我们可以用他的默认样式,全部重置一遍的话会白白增加网页渲染的时间,减慢网页加载速度,所以使用 * 时一定要慎重,尽量不要在样式重置时应用 * 。


   我们写css reset的时候,主要是要根据我们对网页的需求而来的,我们需要用到哪些标签,

当我们所用到的那些标签的默认样式也我们期望的不符的时候,有或者是在不同浏览器下元素的默认样式不同

而让我们的页面在不同的浏览器下显示不同的布局而不符合我们的预期,我们就在css reset为这些元素重置它

的样式来达到我们的要求。


什么是Normalize?

Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上

提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css

是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被

用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks

以及许许多多其他框架、工具和网站上。


reset和normalize的区别

1. Normalize.css 保护了有价值的默认值

Reset通过为几乎所有的元素施加默认样式,强行使得元素有相同的视觉效果。

相比之下,Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再

为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时,

Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。

2. Normalize.css 修复了浏览器的bug

它修复了常见的桌面端和移动端浏览器的bug。

这往往超出了Reset所能做到的范畴。关于这一点,

Normalize.css修复的问题包含了HTML5元素的显示设置、

预格式化文字的font-size问题、在IE9中SVG的溢出、许多

出现在各浏览器和操作系统中的与表单相关的bug。

3. Normalize.css 不会让你的调试工具变的杂乱

使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链,

如下图所示。在Normalize.css中就不会有这样的问题,因为在我们的准则中

对多选择器的使用时非常谨慎的,我们仅会有目的地对目标元素设置样式。

4. Normalize.css 是模块化的

这个项目已经被拆分为多个相关却又独立的部分,

这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。

因此这能让你自己选择性地移除掉某些永远不会用到部分(比如表单的一般化)。

5. Normalize.css 拥有详细的文档

Normalize.css的代码基于详细而全面的跨浏览器研究与测试。

这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。

这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、

浏览器之间的差异,并且你可以更容易地进行自己的测试。

明天计划的事情:(一定要写非常细致的内容) 

继续完成任务
遇到的问题:(遇到什么困难,怎么解决的) 

暂无
收获:(通过今天的学习,学到了什么知识)

同今天完成的事情


返回列表 返回列表
评论

    分享到