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

首先看了一下css绘制三角形的原理。

其语句是对盒子的center的width和height设置为0，padding内边距设置为0，这样盒子本身全部由border填充。

由四条边的border进行填充，如果四条border设置的宽度相等，那么就等分成四个全等三角形。

如果对其中一个border的宽度设置为0.那么

只需将左右的border的参数设置为透明(transparent) 就可以得到方向向上的三角形了。

而后解决了昨天的由于宽度变小导致的元素移位问题。

在其父元素设置white space：no wrap 不换行就可以解决。。。。。。。。。。。。。。

任务6总结。

耗时2018.6.18-2018.6.19.

我的脑图

官方脑图。

首先学习了css sprites的定义和制作方式。。

通过css sprites将页面的所有icon制作成一张图片。

对所有需要icon的地方生成相应icon图标大小的盒子

然后作为背景插入到所有的图标盒子中，通过background position对背景进行坐标定位，使需要的icon出现在盒子内的位置

而后使用了position fixed 定位将header和footer定位到顶部和底部、

然后学习了css模拟下拉选框的方式。

基本原理是选框本身一直存在，不过通过display：none设置为不显示，通过：hover 鼠标悬浮在按钮上。

选框变更display：block。显示选框。

在这里需要对设置一个盒子包含按钮和选框通过relative相对定位保证其位置，对选框本身用absolute固定位置。

在main处声明overflow auto，对超出的内容生成滚动条。

使用white space：no wrap；这里是超出页面不换行

overflow：hidden；超出文本隐藏

text-overflow：ellipsis；对超出文本部分生成省略号

组合起来就可以使单行的文本在页面缩小时省略号截断。

剩下的就是布局的学习，思考如何才能将盒子摆放到合适的位置。

- -搞不定就套个盒子，在搞不定就flex布局，还是搞不定就定位挪...

然后学习层叠的概念。

层叠是指两个元素可能重合的情况下，其中一个元素去层叠另一个元素，该让谁在前面，谁在后面。

当元素在标准文档流时，

默认情况下后一个元素比前一个元素层级高。

如果两个元素是块级元素，文字比背景层级高，后一个元素层叠前一个元素的时候，前一个元素的文字会浮上来（不管是否设置背景文字始终会透上来）。

如果两个元素都是行内或行内块，背景比文字层级高（设置了背景，后一个元素将透不上来）。

当一个元素为块级元素，另一个为行内块或者行内时，行内块和行内都比块级元素层级高，但是块级元素的文字层级比行内块和行内的背景层级高。

当一个元素是行内块另一个是行内元素时，行内元素比行内块元素层级高，行内的背景层级比行内块的文字层级高。

当浮动脱离标准流后

浮动和浮动，后一个比前一个层级高。

浮动和块元素，浮动层级高。

浮动和行内块，行内块层级高。

浮动和行内，行内层级高。

当使用定位后

如果使用多个定位，后一个定位的层级比前一个高

绝对定位和块元素，绝对定位层级高。

定位和行内块，定位层级高。

定位和行内元素，定位层级高。

定位和浮动，定位层级高。

总结、

当两个元素类型一样时，默认情况下后一个元素层级比前一个元素层级高。

在没有设置背景的情况下，元素的背景是透明的，并且允许后面的元素透上来。

块元素和其他任意除定位元素以外，块元素的文字层级比其他元素背景层级高。

浮动和块元素，浮动层级高。

浮动和行内块，行内块层级高。

浮动和行内，行内层级高。

定位和定位，后一个元素层级高。

定位比所有元素层级高。

它们的前后顺序：块 < 浮动 < 行内块 < 行内 < 定位 

然后学习了解了层叠上下文的概念。

在HTML中有一个三维概念，也就是我们面向电脑屏幕的这一端为Z轴

层叠上下文（stacking context）：

如果一个元素含有层叠上下文，这个元素在z轴上更靠近人。

凡是拥有层叠上下文的元素，将离用户最近，也就是越靠在Z轴前面。

默认情况下只有根元素HTML会产生一个层叠上下文，并且元素一旦使用了一些属性也将会产生一个层叠上下文，如定位属性。

两个层叠上下文相遇时，总是后一个层叠前一个，除非使用z-index来改变。

层叠水平【stacking level】

层叠水平顺序决定了同一个层叠上下文中元素在z轴上的显示顺序

除了定位属性可以生成层叠上下文以外还有：

• 根元素 (HTML),
• z-index 值不为 "auto"的 绝对/相对定位，
• 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex。
• opacity 属性值小于 1 的元素
• transform 属性值不为 "none"的元素，
• mix-blend-mode 属性值不为 "normal"的元素，
• filter值不为“none”的元素，
• perspective值不为“none”的元素，
• isolation 属性被设置为 "isolate"的元素，
• position: fixed
• 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
• -webkit-overflow-scrolling 属性被设置 "touch"的元素*

• 层叠准则：

  1. 层叠上下文的水平比普通元素高。
  2. 当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。
  3. 层叠上下文内部嵌套的子元素均受父元素影响。
  4. 层叠上下文不会影响兄弟元素，只会影响后代元素。
  5. 在同一层叠水平上时，有明显的z-index值，则值越大，谁在上。
  6. 使用了css3属性的时候，层叠顺序是跟z-index:auto/z-index:0是一样的，当他们发生层叠的时候，遵循的是“后来居上”准则。

  注意：

  1. 普通元素的层叠水平优先由层叠上下文决定，因此，层叠水平的比较只有在当前层叠上下文元素中才有意义。
  2. 如果父元素没有创建层叠上下文的时候，子元素没有受父元素的限制，父子元素是处于同一层叠水平，比较时需要按下面的7层进行比较。

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

开始任务7
遇到的问题：（遇到什么困难，怎么解决的） 

任务6代码修改
收获：（通过今天的学习，学到了什么知识）

加深布局熟悉度，了解了层叠和层叠上下文的概念