今天完成的事情：修改部分任务八九的bug，进行了任务十的头部
明天计划的事情：任务十
遇到的问题：暂无
收获：任务八九是又bootstrap的3.3.7做的，所以任务十位为了多熟悉boothstrap的应用，所以任务十采用4.1.7的版本。

任务八九总结

通过任务八九，学习了bootstrap了。刚开始无从下手，因为只看却不动手写代码，导致浪费了时间，之后在写代码时去理解。主要学习了有bootstrap的为了使布局一致，采用continue。之后还学习了响应式导航栏，轮播图，对box-shadow有了进一步认识，学会怎么处理阴影被掩盖问题。还了解网格系统、CSS Grid 是创建网格布局最强大和最简单的工具。，动画事件的书写。跟加熟练的运用媒体查询使其自自适应，主重要的是要注意权重问题！！！总得来说，只是简单运用这些框架还很简单，但是对于各个标签的原理，还不是很理解，再任务十里在好好运用，思考一下。

耗时7天

脑图：

                                                                             深度思考

任务八:                                                                                              

如何实现轮播图？

一共有四种方式来实现：

swiper插件实现轮播图,JS实现轮播图、jQuery实现轮播图、css3实现轮播图。

如何用css写一个简单的幻灯片效果页面？

CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。

       transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

       transition是令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果。

       Animation字面上的意思，就是“动画”的意思，

我们使用CSS3的Animation制作动画，实现简单的幻灯片效果，可以省去复杂的js,jquery代码。Animation有一点不足之处，

我们运用Animation能创建自己想要的一些动画效果，但是有点粗糙，如果想要制作比较好的动画，大家还是使用flash或js等。

-webkit-animation是一个复合属性，

webkit-animation: name duration timing-function delay iteration_count direction;

                              命名   持续时间  时间曲线             延时      重复几次            方向

主流浏览器内核有哪几种？

1.Trident/IE内核：该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到IE11，也被普遍称作”IE内核”。

2.Gecko/Firefox内核：Netscape6开始采用的内核，后来的Mozilla FireFox(火狐浏览器) 也采用了该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。

3.WebKit内核：Webkit(Safari内核,Chrome内核原型,开源):它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。

4.Presto内核：Presto是一个由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。该款引擎的特点就是渲染速度的优化达到了极致，也是目前公认网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。

什么是外边距重叠？重叠的结果是什么？

外边距重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界重合在一起而形成一个单一边界,外边距的重叠只产生在普通流的垂直相邻边界间。如果都是正边界，边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加。外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。

div+css的布局较table布局有什么优点？

优点: 

 1、对于新手而言，容易上手，尤其对于一些布局中规中矩的网页，更让人首先想到excel，进而通过使用table去实现它。

2、表现上更加“严谨”，在不同浏览器中都能得到很好的兼容

3、通过复杂的表格套表格的形式，也可以实现比较复杂的布局需求。布置好表格，然后将内容放进去就可以了。

4、它可以不用顾及垂直居中的问题。

5、数据化的存放更合理。

缺点:

1、标签结构多，复杂，在表格布局中，主要是用到表格的相互嵌套使用，这样就会造成代码的复杂度更高！

2、表格布局，不利于搜索引擎抓取信息，直接影响到网站的排名

bootstrap有哪些常用组件？

1.轮播图

2.下拉菜单

3.响应式导航栏

css有哪些方式可以实现垂直居中？

父元素设置为表格的单元格元素，而在表格单元格中的元素设置vertical-align: middle;会使其以中间对齐的方式显示；

父元素设置伪元素，然后让其内的伪元素高为父元素的100%高度，再用vertical-align: middle;和display: inline-block;使子元素与伪元素并排，并且以中间对其的方式进行对其；设置上下相同的padding（如果子元素是block或inline-block元素，还可对子元素设置上下margin相同来达成同样效果）；利用给父元素设置相对定位，子元素设置绝对定位、margin: auto 0;和top: 0; bottom: 0;实现垂直居中；利用绝度定位和负margin实现子元素垂直居中；利用行高line-height和父元素高一致来实现文本在父元素中垂直居中；

margin负值在页面布局中有哪些应用？

1、对于自身的影响

当static(非浮动、非定位）元素的margin-top/margin-left被赋予负值时，元素将被拉进指定的方向。

但如果你设置margin-bottom/right为负数，元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。

如果没有设定width属性，设定负margin-left/right会将元素拖向对应的方向，并增加宽度，此时的margin的作用就像padding一样。

2、对文档流的影响

元素如果用了margin-left/margin-top时，元素自身会被拉向左/向上进行偏移，效果类似与position：relative。与之不同的是，在其后面的元素会补位，也就是后面的行内元素会紧贴在此元素的之后。

元素如果用了margin-right/margin-bottom时，元素视觉位置不变，但其后（下面/右边）的元素会被拉向此元素，相对此元素进行偏移并覆盖此元素。

3、对浮动元素的影响

负margin会改变浮动元素的显示位置，即使元素写在DOM的后面，也能让它显示在最前面。圣杯布局、双飞翼布局啊什么的，都是利用这个原理实现的。

4、对绝对定位的影响

对于绝对定位元素，负margin会基于其绝对定位坐标再偏移

  任务九深度思考                                                                                     

如何使用bootstrap栅格系统？

在Bootstrap中使用栅格系统非常简单方便，只需要在你的div中引入它们已经定义好的类即可。

我们先看看Bootstrap有几种栅格类可以使用：

1. .col-xs-* 这是超小屏幕类（<768px），类似手机等设备。

2. .col-sm-* 这是小屏幕设备类（≥768px且<992px），类似平板设备。

3. .col-md-* 这是中型设备类（≥992px且<1200px）。

4. .col-lg-* 这是大型设备类（≥1200px）。

媒体查询如何使用？

设置meta标签<、    meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

width = device-width：宽度等于当前设备的宽度

initial-scale:初始的缩放比例(默认设置为1.0)

minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)

maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)

user-scalable:用户是否可以手动缩放(默认设置为no，因为我们不希望用户放大缩小页面)

1.“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：

@media (max-width:480px){}

2.最小宽度min-width

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效

媒体属性

width:浏览器可视宽度

height:浏览器可视高度

device-width:设备屏幕的宽度

device-height:设备屏幕的高度

orientation:检测设备目前处于横向还是纵向状态

aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)

device-aspect-ratio:检测设备的宽度和高度的比例

color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）

color-index:检查设备颜色索引表中的颜色，他的值不能是负数

monochrome:检测单色楨缓冲区域中的每个像素的位数。

resolution:检测屏幕或打印机的分辨率

grid：检测输出的设备是网格的还是位图设备。

响应式的优点与缺点？

用的同样的布局，却可以在不同的设备上有不同排版，这就是响应式最大的优点，在分辨率不同，设备环境进行一些不同的设计，所有开发维护和运营上，相对多个版本成本会降低很多。兼容性好，跨平台，移动设备尺寸参差不齐，版本定制通常只适用于固定规格的设备，但不适用分辨率变化较大的设备。方便改动，响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。在我看来，虽然响应式优点颇多，但也不是没有缺点，简单列举以下几点：

1.页面加载的代码多了，导致文件增大，影响加载速度；

2.在响应式设计中，图片、视频等资源一般是统一加载的，这就导致在低分辨率的机子上，实际加载了大于它的显示要求的图片或视频，导致不必要的流量浪费，影响加载速度；

3.局限性，对于响应式，局限性较大，不适合一些大型的门户网或者电商网站，一般门户网或电商网站一个界面内容较多，而响应式最忌讳较多内容，代码过多会影响运行速度。