今日完成的事

      完成任务十的首页面

明日完成的事

     完成任务十的响应式页面。

收获

    看了下任务八的深度学习，总结一下。

纯css实现轮播图

概念图，input图标使用type设置相同name属性的方向进行关联，label可单项绑定input,设置伪类checked点击label触发checked；当点击按钮之后就可以控制图片进行切换。nth-of-type是input父元素的第n个子元素。

这里使用keyframes动画，设置动画区间来实现动画的自动播放。

主流的浏览器内核有哪些？

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

外边距重叠指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的高度如果都是正边界，边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。只有外边距才可以是负值，内边距不允许为负值。

子对象设置margin的时候，父对象也会跟着下来。

给父元素设置边框就正常了

为外层添加border后父子盒子就不是真正意义上的贴合。

防止外边距重叠的方法。

    元素绝对定位postion:absolute;

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

    外层元素用padding增加边距

    外层元素设置overflow:hidden;

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

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

div+css优点

布局精准，网站版面布局修改简单。

加快了页面的加载速度（最重要的）（在IE中要将整个table加载完了才显示内容）。

节约站点所占的空间和站点的流量。

用只包含结构化内容的HTML代替嵌套的标签，提高搜索效率。

table布局的好处

1.容易上手。

2.可以形成复杂的变化，简单快速。

3.在不同浏览器中都能得到很好的兼容。

综合上面对两种不同网页布局的分析，大家也很显然看得出HTML+CSS的布局是很占据优势的。

缺点

1.显示样式和数据绑定在一起
2.布局的时候灵活度不高
3.一个页面可能会有大量的table元素代码冗余度高
4.增加带宽
5.搜索引擎不喜欢这样的布局（可能搜索排名靠后）

bootstrap有哪些常用组件？

就八九任务来言常用的就是栅格系统，导航栏，按钮，轮播图。

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

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

这个作用能实现的前提是：该元素没有设定width属性（当然width:auto是可以的）。

比如下图的黑灰色部分是一个块状元素，它没有设定宽度。它被包裹在一个宽度为400px,且水平居中的父元素中。

设置margin-right：-100px之后。

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

去除列表右边框

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

多列等高