task6任务总结：

成果链接：https://ruanshaofan.github.io/Test01/html/html6.html

官方脑图：

个人脑图：

任务总结：

1.在此任务中学习了bootstrap中如何创建下拉菜单。

2.处理更复杂的移动端页面，页面超出是设置滚动条。

3.创建自己的精灵图（雪碧图）。

今天完成的事：

一.今天完成了css任务13（创建自己的通用css样式表，重做任务7）

二.学了深度思考：

1.如何做默认样式重置？resetting 和 normalizing  之间有什么区别？

 css reset

目前在网络上，已经有很多关于cssreset的框架，例如雅虎的 YUI 等，我们可以下载下来看看他们是怎么写的，是怎么处理的。同时也可以直接在网页中引用。但是对于小的页面，并不推荐这种做法，那些大的框架，适合大型网站使用，里面几乎对所有的html标签进行了css reset，而我们制作的小页面，并不需要太多的标签，如果使用那么多无用的css reset代码，会导致页面体积变大。推荐的做法是，根据自己页面用到的标签，去寻找相应的css reset代码。

Normalize.css

Normalize.css支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。

特点：1.保护有用的浏览器默认样式而不是完全去掉它们2.一般化的样式：为大部分HTML元素提供3.修复浏览器自身的bug并保证各浏览器的一致性

         4.优化CSS可用性：用一些小技巧5.解释代码：用注释和详细的文档来

2.Normalize.css和传统Css Reset的区别

Normalize.css和传统Css Reset的区别：

eset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。

         Normalize.css 修复了浏览器的bug

它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。关于这一点，Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。

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

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

在Normalize.css中就不会有这样的问题，因为在Normalize.css中对多选择器的使用时非常谨慎的，仅会有目的地对目标元素设置样式。

          Normalize.css 是模块化的：

这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）

        Normalize.css 拥有详细的文档：

Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在GithubWiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。

3.移动端有哪些常见布局方式？

 1>.固定布局

 固定布局是第一次做移动端时最好的选择方式,思路沿用PC端,上手比较快。在标签里把 viewport 加好,然后设想整个网页的宽度为 320px 即可。 其他地方根据 PC 端来布局。 缺点:大屏手机显示网页比较宽,固定布局宽度参照永远是 320px,导致左右两 边会有空白。 

 2>.流动布局 

流动布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同，流动布局就是使用百分比来代替px作为单位。 优点是流动布局可以很好解决自适应需求。缺点是不够灵活，添加元素时，需要更改其他元素的值。 

3>.bootstrap布局 

bootstrap是一个比较流行的响应式前端框架，利用bootstrap的栅格系统可以实现响应式的移动端布局。栅格系统：Bootstrap中定义了一套响应式的网格系统，其使用方式就是将一个容器划分成12列，然后通过col-xx-xx的类名控制每一列的占比， 在使用的时候，我们给相应的div设置col-lg-2 col-md-3 col-sm-4 col-xs-6，以此完成布局。

4>.媒体查询+REM布局

 使用媒体查询可以根据不同的设备宽度加载不同的css样式。rem是一个相对单位，会根据根节点的字体大小来计算的，使用媒体查询和rem可以实现移动端的响应式。

 5>.flex布局 Flexbox是CSS3引入的新的布局模式，也称为弹性布局，他会根据页面的剩余宽度自动分配空间。 它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它能够扩展和收缩 flex 容器内的元素， 以最大限度地填充可用空间。Flexbox布局最适合应用程序的组件和小规模的布局，而网格布局更适合那些更大规模的布局

明天计划的事：尝试任务14 ，拆出自己的组件库。

遇到的问题：将我自己的通用样式表和网上的一些样式表进行了一下对比 ，发现差异挺大的  不知道我自己常见的样式表对不对，做任务的时候很没底气

收获：完成任务13.