今天完成的事情：

完成了任务把第一个页面的轮播布局和栅格布局

明天计划的事情：

明天计划把任务八第一个页面做完，并把第二个网页了解一下，然后在看一下标签的书写规范
遇到的问题：

轮播布局

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> 

  <div class="carousel-inner">     

<div class="carousel-item active">         

<img src="..." class="d-block w-100" alt="...">    

</div>     <div class="carousel-item">       

<img src="..." class="d-block w-100" alt="...">     

</div>    

<div class="carousel-item">      

<img src="..." class="d-block w-100" alt="...">    

</div>   

</div>

</div>

栅格布局

<div class="container">   

<div class="row">    

<div class="col-sm">       三分之一空间占位    </div>    

<div class="col-sm">       三分之一空间占位     </div>     

<div class="col-sm">       三分之一空间占位     </div>   

</div> 

</div>

收获：今天了解了轮播布局和栅格布局，并加深了对客服查询的理解

任务七总结

任务耗时3天

任务总结：任务七主要了解应用一下hover效果r和超链接还有雪碧图。做这个任务的时候一定要记住上下固定定位。还有就是雪碧图两边要和上面的盒子对其。第三个图片下面的文字要注意对齐。然后就是超链接路径引用一定不能出现错误

深度思考

1.什么是CSS sprites？

雪碧图

2.什么是浮动？有哪些清除浮动的方法？

浮动最开始出现的本意是用来让文字环绕图片

但是早期的前端开发者发现：浮动的元素可以设置宽高并且可以内联排列，是介于inline和block之间的一个神奇的存在， 在inline-block出来之前，浮动大行其道。直到inline-block出来后，浮动也有它自己独特的使用场景。

浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素才会停下来。

清除浮动的方法

（1）、给浮动元素父级设置高度

高度塌陷是应为给浮动元素的父级高度是自适应导致的，那么我们给它的设置适当的高度就可以解决这个问题了.

缺点：在浮动元素高度不确定的时候不适用

（2）以浮制浮（父级同时浮动）

缺点：需要给每个浮动元素父级添加浮动，浮动多了容易出现问题。

计算BFC的高度时，浮动元素也参与计算

float属性不为none

position为absolute或fixed

display为inline-block, table-cell, table-caption, flex, inline-flex

overflow不为visible

（3）br 清浮动

br 标签自带clear属性，将它设置成both其实和添加空div原理是一样的。

（4）使用AFTER伪元素

通过父元素的::after伪元素来生成浮动元素的兄弟元素，然后兄弟元素使用clear:both方法。

3.rgba和opacity的透明效果有什么不同？display和visiblity有什么区别？

opacity会继承父元素的opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。简单来说就是opacity作用于元素和元素所有内容的透明

rgba相对于opacity还是技高一筹的，当然只要是涉及颜色的，都可以用rgba来设置。

display和visiblity的区别

visibility要占用域的空间，而display则不占用。

4.描述下z-index和叠加上下文是如何形成的？