今天完成的事情：

1.提交了任务八；

2.看了任务八下面的热门问题；

3.思考了部分任务八的深度思考；
明天计划的事情：

1、继续思考任务八的深度思考；

2、查看任务九的学习资料。

遇到的问题：

1.做了页面三的动画效果，但是他一直翻转，不知道如何让他停下来，如下图：

最后通过咨询师兄：去掉下图红圈圈住的，因为他的意思是无限的：

收获：

一、如何使用html+css实现轮播图

（1）背景介绍：

        无论是web端还是移动端，通过轮播图进行宣传的方式都成为大多数人的选择，因为轮播图可以利用有限的版块，将最新、最有价值的消息以最 快速度推送给用户，所以搞清楚轮播图的各种表现形式和切换方式，对我们设计产品来说是十分重要的。

（2）知识剖析

1、轮播图实现原理（ps：图片无法上传）

2、关键参数：animation（ps：图片无法上传）

3、关键参数：@keyframes规则（ps：图片无法上传）

（3）常见问题：

（ps：图片无法上传）

轮播图直接切换不停留的问题

（4）解决方案：

（ps：图片无法上传）

切换过程中预留一定百分比用来做时间停留

（5）更多讨论：

问题： css样式中选择器前面的“#”有什么用？

答案： 那是id选择器的使用样式，class选择器就是前面加“.”

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

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

一、背景介绍

CSS盒模型中，margin是我们非常熟悉的一个属性，大多数情况下，我们采用的都是正数的 margin 值，可能有时候会用到负的 margin 值。在我们的印象中，负的 margin 值就类似于浏览器的 hack 一样，不被人接受。但是，本文要说明的就是，负的 margin 值并不是 hack，这是正常范围内的写法。

根据 W3C，margin 是能够接受负值的，只是在具体实现上有一些区别。那么，设置margin为负值究竟会是什么样的效果呢？

二、知识剖析

MARGIN为负值时产生的影响

1、对文档流的影响

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

但这种偏移不同于相对定位，通过相对定位偏移后，其仍然会坚守着它原来占据的空间，不会让文档流的其它元素乘虚而入。而通过负边距进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其它元素就会“流”过来填充这部分空间。

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

文档流只能是后面的流向前面的，即文档流只能向左或向上流动，不能向下或向右移动。

所以，一切只要是由文档流决定的东西，负边距就能起作用了。

2.左和右的负边距对元素宽度的影响

负边距不仅能影响元素在文档流中的位置，还能增加元素的宽度！

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

总结，在文档流中，元素的最终边界是由margin决定的，margin为负的时候就相当于元素的边界向里收，文档流认的只是这个边界，不会管你实际的尺寸是多少。

3、对浮动元素的影响

负边距对浮动元素的影响与负边距对文档流中元素的影响其实是差不多的。文档流中元素的位置由文档流的走向决定，浮动的元素也可以看成有一个“浮动流”存在，不过浮动流既可以向左，也可以向右。

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

就是某个元素虽然是写在了后面，但可以通过负边距让它在浏览器显示的时候是在前面的

4、对绝对定位的影响

绝对定位的元素定义的top、right、bottom、left等值是元素自身的边界到最近的已定位的祖先元素的距离，这个元素自身的边界指的就是margin定义的边界，所以，如果margin为正的时候，那它的边界是向外扩的，如果margin为负的时候，则它的边界是向里收的。

可以通过这个特性来利用绝对定位居中，但该方法的缺点是必须要知道要居中元素的高度和宽度。

三、常见问题

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

四、解决方案

1.负边距+定位：水平垂直居中

使用绝对定位将content的定点定位到body的中心，然后使用负margin（content宽高的一半），将content的中心拉回到body的中心，已到达水平垂直居中的效果。

2.去除列表右边距

我们使用浮动列表展示信息的时候，为了美观通常为每个列表之间设置一定的间距（margin-right）,当父元素的宽度固定时，每一行的最右端的li元素的右边距就多余了，去除的方法通常是为最右端的li添加class，设置margin-right:0; 这种方法需要动态判断为哪些li元素添加class，比较麻烦。

3.去除列表最后一个li元素的border-bottom

列表中我们经常会添加border-bottom值，最后一个li的border-bottom往往会与外边框重合，视觉上不雅观，往往要移除。

我们可以为li元素设置margin-bottom:-1px;来实现，不过不要为ul/ol设置高度，需要高度请在外层嵌套一个div设置高度。

4.负边距自适应布局

此例适用于一栏宽度固定一栏宽度自适应的布局，就像QQmail一样，导航栏宽度固定，内容区域随着浏览器的大小而自动缩放。

大家自然想到使用百分比来定元素的宽度，可是浏览器无法理解100%-200px这样的表达式。这里我们就需要元素嵌套和负边距的思想。

5.google reader自适应渐变圆角按钮

现在大家都比较追求纯，前端人士追求的是纯css，无图片，自适应。google reader 的按钮就具备了以上特点，而且还有渐变的效果，其内层div的左右border就使用了负边距以达到模拟1像素圆角的效果，

6.三栏等高

关键是给每个框设置大的底部内边距，然后用数值相似的负外边距消除这个高度。这会导致每一列溢出容器元素，如果把外包容器的overflow属性设为hidden，列就在最高点被裁切

五、拓展思考

MARGIN负值是否会改变元素的宽度？

这取决于是否给了元素宽度,如果已经给了元素宽度,那么margin负值不会影响元素的宽度,如果没有给元素宽度,那么margin会影响元素的宽度.

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

1、什么是浏览器的内核？

浏览器最重要或者说最核心的部分叫做“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释并渲染网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

2.它在浏览器中的作用是什么？

浏览器内核对于浏览器而言，是基础，是依托。如果没有了浏览器内核，那么浏览器是无法独立存在且产生作用的。它的存在，决定了网页的呈现的内容、格式以及效果。所以说，一个好的浏览器，一定是基于有一个稳定、高端、作用明显的浏览器内核的。

2.知识剖析

1.四大浏览器内核介绍

(1)Trident内核

(2)Gecko内核

(3)WebKit内核

(4)Blink内核

(1)TRIDENT内核

该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到IE11，也被普遍称作”IE内核”。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器(壳浏览器)涌现。由于IE本身的“垄断性”（虽然名义上IE并非垄断，但实际上，特别是从Windows 95年代一直到XP初期，就市场占有率来说IE的确借助Windows的东风处于“垄断”的地位）而使得Trident内核的长期一家独大。

微软很长时间都并没有更新Trident内核，这也导致了后面的两个后果： 一是Trident内核曾经几乎与W3C标准脱节（2005年） 二是Trident内核的大量 Bug等安全性问题没有得到及时解决，然后加上一些致力于开源的开发者和一些学者们公开自己认为IE浏览器不安全的观点，也有很多用户转向了其他浏览 器，Firefox和Opera就是这个时候兴起的。Trident内核的常见浏览器有：IIE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；以及国产浏览器中的兼容模式。

(2)GECKO内核

Netscape6开始采用的内核，后来的Mozilla FireFox(火狐浏览器) 也采用了该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，Gecko 内核的浏览器仍然还是Firefox (火狐) 用户最多，所以有时也会被称为Firefox内核。Gecko核心设计的相对成熟，在无法获取源码的情况下，开放程度仅次于IE。

(3)WEBKIT内核

Webkit:是苹果公司自主研发的内核，也是Safari浏览器使用的内核。 Webkit引擎包含渲染引擎WebCore和javascript引擎JSCore，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开放源代码。Google Chrome、Opera及各种国产浏览器高速模式也使用Webkit作为内核。

(4)BLINK内核

Blink是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分，并且在2013年4月的时候公布了这一消息。这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）中使用。

3.扩展思考

在我们的日常开发过程中，是否还需要向下兼容其它浏览器，例如：ie8 ?

看业务需求，如果产品或者老板让代码向下兼容，就得写兼容代码

四、大白话讲解什么是BFC？

什么是BFC？

BFC 全称为 块格式化上下文 (Block Formatting Context) 。

从这个概念里你能看出来什么吗？

这个名字给我们的信息只有 “块” “格式化” “上下文” 。我们大概可以了解到这个东西是对上下文起作用的。

那里的上下文？？HTML文档！
它大概的作用，貌似是格式化上下文？？可能不是我们通常意义中的格式化。

我们没有从这个名字中得到太多有用的信息，仅仅知道它是一种功能，针对于 HTML文档 起作用。

那我们去看看官方是怎么解释的。

MDN：

一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
一个块格式化上下文由以下之一创建：

• 根元素或其它包含它的元素
• 浮动元素 (元素的 float 不是 none)
• 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
• 内联块 (元素具有 display: inline-block)
• 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
• 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
• 具有overflow 且值不是 visible 的块元素，
• display: flow-root
• column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
• 一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。

块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

我们发现一个什么问题！貌似看不懂哎！！

为什么会产生这样的原因？？

你能解释一下什么是桌子吗？？

仔细想想，发现好像并不能合理的解释它。

BFC 也是如此，只有特性(功能)，没有定义。

I know it when i see it.

BFC 特性(功能)

1. 1、使 BFC 内部浮动元素不会到处乱跑；
2. 2、和浮动元素产生边界。
3. 
   
4. 使 BFC 内部的浮动元素不会到处乱跑

HTML

没有产生 BFC

CSS

在正常的文档流中，块级元素是按照从上自下，内联元素从左到右的顺序排列的。

如果我给里面的元素一个 float 或者绝对定位，它就会脱离普通文档流中。

没有产生 BFC

此时如果我们还想让外层元素包裹住内层元素该如果去做？？

让外层元素产生一个 BFC 。(产生 BFC 的方法 MDN 文档里有写)

产生 BFC

这就是 BFC 的第一个作用：使 BFC 内部的浮动元素不会到处乱跑。

和浮动元素产生边界

HTML

CSS

没有产生 BFC

一般情况下如果没有 BFC的话，我们想要让普通元素与浮动元素产生左右边距，需要将 maring 设置为浮动元素的宽度加上你想要产生边距的宽度。

这里的浮动元素的宽度为 200px ，如果想和它产生 20px 的右边距，需要将非浮动元素的 margin-left 设置为 200px+20px 。