2018/10/29

今日完成：

完成页面跳转,完成任务7所有页面的布局，了解伪类和伪元素及他们的区别。

1、用a标签，可以跳转到另一个页面。

2、button可以用onclick事件:

<button onclick="window.location.href='链接';" >

3、了解伪类、伪元素以及他们的区别：

伪类的效果可以通过添加实际的类来实现 

伪元素的效果可以通过添加实际的元素来实现。它们的本质区别就是是否抽象创造了新元素

任务7深度思考

1、什么是CSS sprites。

即雪碧图，是将多个图片集成在一个图片中的图。使用雪碧图可以减少网络请求的次数，加快运行的速度。

雪碧图的优点：（摘抄网页：https://m.aliyun.com/jiaocheng/639491.html）

1、加快网页的加载速度。

2、后期维护简单。

3、能减少图片的字节。

4、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了。

5、更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。

雪碧图的缺点：（不要滥用css spirte：https://blog.csdn.net/hu441805796/article/details/53258382）

1、CSS雪碧的最大问题是内存使用

2、影响浏览器的缩放功能；

3、拼图维护比较麻烦；

4、使CSS的编写变得困难；

5、CSS 雪碧调用的图片不能被打印；

6、错误得使用 Sprites 影响可访问性。

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

浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。浮动有左浮动和右浮动。

由于设置了浮动使它们脱离了原来的文档流，将它原先占用的空间释放；当容器父元素没有设置指定的高度时，是根据内子元素的空间大小来撑开的，现在浮动后，使它飘出来了，也就是父元素容器现在是空的高度为0，父元素会造成塌陷。可能产生的影响：影响这个容器后面元素的布局，导致布局产生混乱。

清除浮动的j常用方法：

1、额外标签法 ： 在父元素内最后面添加一个无关的元素，让添加的无关元素去清除浮动。此方法代码阅读受影响。

.clearfix{clear: both;}

<div class="clearfix"></div>

2、使用 :after 伪元素 ：在需要清除浮动的父元素里，添加一个清除浮动的伪类，

.clearfix:after{content: '';display: block; clear: both;}

3、给父元素定宽高。

4、利用 overflow:hidden 属性  ：  overflow: hidden出发BFC（通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，里面的元素不会在布局上影响到外面的元素，箱子内部的元素无论如何翻江倒海，都不会影响到外部。https://blog.csdn.net/jiaojsun/article/details/76408215），容器将会包裹着浮动元素。

5、父元素浮动   ：但是父元素也浮动后，后面的元素如果是在正常文档流中，会被挤到它的下面，解决方法是跟前面一样，添加无关元素clearfix或用：after伪元素。

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

opacity：元素容器内子元素全部继承，全都会跟着半透明。

background:rgba：只作用于元素的颜色或其背景色，设置rgba透明的元素的子元素不会继承透明效果。

visibility: hidden：将元素隐藏，但是在网页中该占的位置还是占着。

display: none：将元素的显示设为无，即在网页中不占任何的位置。

visibility:hidden占据空间，无法点击，另一个display:none;不占据空间，无法点击。有一句话是这么说的，display：none会真的把你弄没，而visibility：hidden则仅仅是为你披上一件隐身衣而已，你还在原来的地方呆着。设置透明值(opcity)，占据空间，可以点击，该方法并非真正意义上的隐藏。

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

网上看的资料都好长，不太好理解这块， 后面还需多理解。参考资料：https://www.jianshu.com/p/d50d1cccbf70?utm_campaign

z-index只能应用于定位元素（即设置了 position 属性为非 static 值），其它情况下，z-index 将被忽略。元素在 "Z轴" 方向上的呈现顺序，由层叠上下文和层叠级别决定。

在文档中，每个元素仅属于一个层叠上下文。元素的层叠级别为整型，它描述了在相同层叠上下文中元素在 "Z轴" 上的呈现顺序。同一层叠上下文中，层叠级别大的显示在上，层叠级别小的显示在下，相同层叠级别时，遵循后来居上的原则，即其在HTML文档中的顺序。不同层叠上下文中，元素呈现顺序以父级层叠上下文的层叠级别来决定呈现的先后顺序，与自身的层叠级别无关。

在一个层叠上下文，所有的元素根据规则从下到上排列，分成了七个等级：

1、背景和边框 — 形成层叠上下文的元素的背景和边框。 层叠上下文中的最低等级。

2、负z-index值 — 层叠上下文内有着负z-index值的子元素。

3、块级盒 — 文档流中非行内非定位子元素。

4、浮动盒 — 非定位浮动元素。

5、行内盒 — 文档流中行内级别非定位子元素。

6、z-index: 0 — 定位元素。这些元素形成了新的层叠上下文。

7、正z-index值 — 定位元素。层叠上下文中的最高等级。

收获了什么：学习了任务7后面的深度思考。

遇到的问题：暂无。

明日计划：开始任务8，学习bootstrap常用的布局和组件，学习怎样实现轮播。