[成都|结业弟子]JS-董家宇|2019年01月09日的日报-技能树.IT修真院

发表于： 2019-01-09 21:06:18

1 642

今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）

完成了任务七第一个页面的部分布局：

学会了css样式重置的新方式

学会了如何制作箭头

对以前学过的知识进行了巩固

对雪碧图的应用更熟练

明天计划的事情：（一定要写非常细致的内容）

完成任务七的第一个页面

对伪元素的效果进行了解

尝试做出字体随着屏幕大小改变而改变
遇到的问题：（遇到什么困难，怎么解决的）

暂无
收获：（通过今天的学习，学到了什么知识）

z-index和叠加上下文是如何形成的

z-index语法：

z-index: auto(自动，默认值) | integer(整数) | inherit (继承)

z-index 接受的属性值为：关键字auto和整数，整数可以是负值。

需要注意的是 z-index 虽然很给力，却只能应用于定位元素（即设置了 position 属性为非 static 值），其它情况下，z-index 将被忽略。

每个元素都具有三维空间位置，除了水平和垂直位置外，还能在 "Z轴" 上层层相叠、排列。元素在 "Z轴" 方向上的呈现顺序，由层叠上下文和层叠级别决定。在文档中，每个元素仅属于一个层叠上下文。元素的层叠级别为整型，它描述了在相同层叠上下文中元素在 "Z轴" 上的呈现顺序。同一层叠上下文中，层叠级别大的显示在上，层叠级别小的显示在下，相同层叠级别时，遵循后来居上的原则，即其在HTML文档中的顺序。不同层叠上下文中，元素呈现顺序以父级层叠上下文的层叠级别来决定呈现的先后顺序，与自身的层叠级别无关。

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

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

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

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

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

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

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

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

hover选择器

:hover 选择器用于选择鼠标指针浮动在上面的元素。