任务八深度思考：

1.如何实现轮播图？

三种方式实现轮播图功能：

1、position

使用position的绝对定位与相对定位实现轮播图，首先将图片全部拼接成为一行，使用overflow: hidden;将其他图片隐藏，

将这一行图片加入定时任务不断进行左移，从而只显示中间的图片，对于边缘特殊处理，将第一张轮播图追加到一行图片之后，

当切换到最后一张轮播图时，下一张即播放第一张图，当此图轮播完成后，将所有图片归位，提供两个DEMO，

第一个是单纯的轮播不存在任何控制按钮，第二个则比较完善。

2、opaacity

首先通过对图片绝对定位来使图片堆叠，通过使用opacity来控制图片的显示与隐藏，

即不使用Js控制轮播图的切换动画，而使用CSS动画来完成，由于是堆叠完成的，使用z-index也是可行的方案。

3、CSS

纯CSS实现轮播图，完全使用CSS3动画完成轮播，

主要使用animation属性与@keyframes规则，使用left控制距离，也可以使用opacity，为每个图片设置动画属性即可。

使用@keyframes规则，你可以创建动画。

创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中，您可以更改CSS样式的设定多次。

指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。

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

制作幻灯片用css3的Animation，

Animation：

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

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

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

 3、Animation字面的意思就是“动画”  属性：animation: name（绑定到选择器的 keyframe 名称）

    duration（延长的时间） timing-function（动画的速度曲线：linear（速度相同）

    ease（先低速后加速）  ease-in （低速开始） ease-out （低速结束） ease-in-out  （低速开始和结束）

    cubic-bezier(n,n,n,n)（从 0 到 1 的数值）） delay（动画开始前的延迟）  

     iteration-count （播放的次数（n（播放次数）|infinite（无限循环）））

    direction （是否循环播放（normal（正常播放）|alternate（轮流反向播放）））fill-mode play-state;

 keyframes（关键帧） 

书写格式为：@keyframes "动画名字"｛｝

*****内根据设置内容从“0%”到“100%”依次编写，注意“0%”一定不能把百分号省略！

可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束（from"就相当于"0%"而"to"相当于"100%",）

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

浏览器最重要或者说核心的部分是“Rendering Engine（渲染引擎）”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。

负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。

 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，

这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

1、什么是内核，及浏览器作用

浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示您选择的网络资源。这里所说的资源一般是指 HTML 文档，

也可以是 PDF、图片或其他的类型。资源的位置由用户使用 URI（统一资源标示符）指定。

浏览器解释并显示 HTML 文件的方式是在 HTML 和 CSS 规范中指的。这些规范由网络标准化组织 W3C（万维网联盟）进行维护。

多年以来，各浏览器都没有完全遵从这些规范，同时还在开发自己独有的扩展程序，这给网络开发人员带来了严重的兼容性问题。

如今，大多数的浏览器都是或多或少地遵从规范。

浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。

2、主流浏览器

主流浏览器是有一定市场份额且有自己独立研发内核的浏览器

份额排行：https://tongji.baidu.com

IE/Edge，Chrome，Safari，Opera，Firefox

3、.浏览器内核简介

*IE/Edge：微软的IE浏览器浏览器更新至IE10后，伴随着WIN10系统的上市，迁移到了全新的浏览器Edge。

除了JS引擎沿用之前IE9就开始使用的查克拉(Chakra)，渲染引擎使用了新的内核EdgeHTML

（本质上不是对Trident的完全推翻重建，而是在Trident基础上删除了过时的旧技术支持的代码，

扩展和优化了对新的技术的支持，所以被看做是全新的内核）

*Safari：Safari自2003年面世，就一直是苹果公司的产品自带的浏览器，它使用的是苹果研发和开源的Webkit引擎。

Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来。

Webkit2发布于2010年，它实现了元件的抽象画，提高了元件的重复利用效率，

提供了更加干净的网页渲染和更高效的渲染效率。另外，Webkit也是苹果Mac OS X系统引擎框架版本的名称，

主要用于Safari、Dashboard、Mail。

*Chrome：提到Chrome浏览器，一般人会认为使用的Webkit内核，这种说法不完全准确。

Chrome发布于2008年，使用的渲染内核是Chromium，它是fork自Webkit，但把Webkit梳理得更有条理可读性更高，

效率提升明显。2013年，由于Webkit2和Chromium在沙箱设计上的冲突，谷歌联手Opera自研和发布了Blink引擎，

逐步脱离了Webkit的影响。所以，可以这么认为：Chromium扩展自Webkit止于Webkit2，其后Chrome切换到了Blink引擎。

另外，Chrome的JS引擎使用的V8引擎，应该算是最著名和优秀的开源JS引擎，大名鼎鼎的Node.js就是选用V8作为底层架构。

*Firefox：火狐的内核Gecko也是开源引擎，任何程序员都能为其提供扩展和建议。

火狐的JS引擎历经SpiderMonkey、TraceMonkey到现在的JaegerMonkey。

其中JaegerMonkey部分技术借鉴了V8、JSCore和Webkit，算是集思广益。

*Opera：Opera在2013年V12.16之前使用的是Opera Software公司开发的Presto引擎，之后连同谷歌研发和选择Blink作为Opera浏览器的排版内核。

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

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。

（当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。）

例子：

定义了两个div盒子分别给上下两个div设置了margin-bottom:100px，margin-top:100px，

但是两个div盒子之间的距离只有100px而不是我们所想要的200px，

此时两个div盒子的外边距发生了重叠，而此场景便称为外边距塌陷问题，也称为外边距重叠。

防止外边距重叠的方法。

元素绝对定位postion:absolute;一般用在内层元素

内层元素 加float:left;或display:inline-block;

外层元素用padding增加边距

外层元素设置overflow:hidden;

内层元素透明边框border:1px solid transparent;

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

table布局是网页早期布局实现的主要手段，当时的网页构成，相对也比较简单，多是以文本以及静态图片等组成的，

类似于报纸的形式，分区分块显示，table标签的结构表现恰好可以满足这样的要求。但是随着网页要求的提高和技术的不断探索更迭，

尤其是W3C（万维网联盟）及其他标准组织制定的标准出台后，明确了table标签不是布局工具，

使table标签重新回到其原有的作用上（即仅作为呈现表格化数据的作用），而提倡使用div+css的布局组合。

2.1使用table布局的特点

优点: 

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

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

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

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

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

缺点:

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

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

2.2使用div+css布局的特点

优点

1、符合W3C标准的，W3C标准提出网页由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。

结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。

2、布局更加灵活多样，能够通过样式选择来实现界面设计方面的更多要求。

3、布局改版方便，不需要过多地变动页面内容，通常只要更换相应的css样式就可以将网页变成另外一种风格展现出来。

4、布局可以让一些重要的链接和文字信息等优先让搜索引擎抓取，内容更便于搜索。

5、增加网页打开速度，增强用户体验。

缺点

1、开发技术高，要考虑兼容版本浏览器。目前来看，DIV+CSS还没有实现所有浏览器的统一兼容。

2、CSS网站制作的设计元素通常放在1个外部文件中，或几个文件，

有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。

2.3 div+css的布局较table布局的明显优势

1，其实也是div+css布局的第一个特点，table标签被严格地定义为存放数据的一个区域，

而不是布局工具，它的布局形式不符合W3C标准，没有实现结构和表现的分离，它既有css的表现功能，也有html的结构功能。

2，table布局加载网页时，必须整体加载完，降低了网页的呈现速度，而div+css布局是边加载边显示的。

3，table布局在网页代码编写时，有时需要嵌套多重表格才能实现，但使用div+css布局，相对而言会减少许多嵌套时的代码，更容易检查和维护。

4，table布局不方便表现的更换，使用div+css布局，大多只要更改css样式表就能变化表现形式。

5、易于维护和改版。

6.bootstrap有哪些常用组件？  

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

它是2011 年八月由 Twitter 的 Mark Otto 和 Jacob Thornton 在 GitHub 上发布的开源产品

什么是组件

组件:一般是指软件系统的一部分，承担了特定的职责，可以独立于整个系统进行开发和测试，

 一个良好设计的组件应该可以在不同的软件系统中被使用(可复用)。

目前常用的bootstrap组件：

1.轮播图

2.下拉菜单

3.响应式导航栏

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

1、设定行高（line-height）

设定行高是垂直居中最简单的方式，适用于“单行”的“行内元素”（inline、inline-block），

例如单行的标题，或是已经设为inline-block属性的div，若将line-height设成和高度一样的数值，

则内容的行内元素就会被垂直居中，因为是行高，所以会在行内元素的上下都加上行高的1/2，

所以就垂直居中了！不过由此就可以看出，为什么必须要单行的行内元素，因为如果多行，第二行与第一行的间距会变超大，就不是我们所期望的效果了

2、添加伪元素（::before、::after）

刚刚第一种方法，虽然是最简单的方法（适用于单行标题），不过就是只能单行，

所以我们如果要让多行的元素也可以垂直居中，就必须要使用伪元素的方式。在此之前，先解释一下CSS里头vertical-align这个属性，

这个属性虽然是垂直居中，不过却是指在元素内的所有元素垂直位置互相居中，并不是相对于外框的高度垂直居中。

3、calc动态计算

看到这边或许会有疑问，如果今天我的div必须要是block，我该怎么让它垂直居中呢？

这时候就必须用到CSS特有的calc动态计算的能力，我们只要让要居中的div的top属性，与上方的距离是“50%的外框高度+ 50%的div高度”，

就可以做到垂直居中，至于为什么不用margin-top，因为margin相对的是水平宽度，必须要用top才会正确。

4、使用表格或假装表格

或许有些人会发现，在表格这个HTML里面常用的DOM里头，要实现垂直居中是相当容易的，只需要下一行vertical-align:middle就可以，

为什么呢？最主要的原因就在于table的display是table，而td的display是table-cell，所以我们除了直接使用表格之外，

也可以将要垂直居中元素的父元素的display改为table-cell，

就可以轻松达成，不过修改display有时候也会造成其他样式属性的连动影响，需要比较小心使用。

5、transform

transform是CSS3的新属性，主要掌管元素的变形、旋转和位移，利用transform里头的translateY（改变垂直的位移，如果使用百分比为单位，

则是以元素本身的长宽为基准），搭配元素本身的top属性，就可以做出垂直居中的效果，

比较需要注意的地方是，子元素必须要加上position:relative，不然就会没有效果喔。

6、绝对定位

绝对定位就是CSS里头的position:absolute，利用绝对位置来指定，但垂直居中的做法又和我们正统的绝对位置不太相同，

是要将上下左右的数值都设为0，再搭配一个margin:auto，就可以办到垂直居中，不过要特别注意的是，设定绝对定位的子元素，

其父元素的position必须要指定为relative喔！而且绝对定位的元素是会互相覆盖的，所以如果内容元素较多，可能就会有些问题。

7、使用Flexbox

使用align-items或align-content的属性，轻轻松松就可以做到垂直居中的效果。

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

1、左右列固定，中间列自适应布局

此例适用于左右栏宽度固定，中间栏宽度自适应的布局。由于网页的主体部分一般在中间，很多网页都需要中间列优先加载，而这种布局刚好满足此需求。

2、去除列表右边框

项目中经常会使用浮动列表展示信息，为了美观通常为每个列表之间设置一定的间距（margin-right）,当父元素的宽度固定式，

每一行的最右端的li元素的右边距就多余了，去除的方法通常是为最右端的li添加class，

设置margin-right:0; 这种方法需要动态判断为哪些li元素添加class，麻烦！！！利用负margin就可以实现下面这种效果：

3、负边距+定位：水平垂直居中

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

4、去除列表最后一个li元素的border-bottom

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

5、多列等高

此例关键是给每个框设置大的底部内边距，然后用数值相似的负外边距消除这个高度。

这会导致每一列溢出容器元素，如果把外包容器的overflow属性设为hidden，列就在最高点被裁切。

遇到我问题：使用hover选择器时候，内容没被完全隐藏，会显示字体吗，这里显示了本应该鼠标移至才能显示的字体

明天计划：完成接下来的任务。