今天完成的事情：任务八第二个页面完成，关于z-index和叠加上下文的理解。

明天计划的事情：完成任务八

遇到的问题：布局不合理，浪费了很长时间。

收获：

层叠上下文是基于Z轴的一个环境，他有一个默认的层叠顺序：

同级元素中，后面的元素覆盖前面的元素，

父子元素中，子元素覆盖父元素。

在css上增加两个东西  position 增加一个css属性，但是这个定位不能是static ；z-index 增加一个z-index的属性，这个属性控制元素在Z轴上面的位置

一个元素想控制自身的z轴层叠顺序，这个元素不能含有子元素，且这个子元素的第一个父元素不能控制自身的z轴层叠顺序，即不能含有定位和z-index这两个css属性。

CSS * 选择器：

选择所有元素，并设置它们的背景色：

*

{ 

background-color:yellow;

}

选取 <div> 元素内部的所有元素：

div *

{ 

background-color:yellow;

}

媒体查询：

就是“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性），

比较常见的就是@media（min-width：768px）或者@media（max-width：1086px），对应的就是最小显示屏宽度是768px的设备，后面的就是最大宽度是1086px的设备。

当然这两个也可以一起用 添加一个and。变成@media（min-width：768px）and（max-width1086px）。对应就是屏幕尺寸在768px和1086px之间的设备当然也包裹768px和1086px

了解熟练运用了 bootstarp的栅格布局。

了解到col-xm-x，col-sm-x,col-ml-x,col-lg-x的作用

他们对应的是bootstarp自带的媒体查询断点。

超小屏幕手机 (<768px) 小屏幕（xm）

平板 (≥768px) 中等屏幕（sm）

桌面 (≥992px) 大屏幕（ml）

桌面 (≥1200px)（lg）中平分一行row的对应宽度。