今天完成的事情：完成了任务六
明天计划的事情：任务七
遇到的问题：在下拉框菜单有背景颜色情况下，任然盖不住图片。

收获：了解了z-index标签。

           加深了border-radius标签对四个角分别运用。

          了解了margin的值为负值的运用。

          了解了字体内容长度超过时，出现“...”的方式。

发现问题：在下拉框菜单有背景颜色情况下，任然盖不住图片。

原因：

解决方案：添加z-index.

相关知识：

1  z-index：设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

   可能的值：

2  border-radius

      只有一个值，那么 top-left、top-right、bottom-right、bottom-left 四个值相等。

      有两个值，那么 top-left 等于 bottom-right，并且取第一个值；top-right 等于 bottom-left，并且取第二个值

      有三个值，其中第一个值是设置top-left;而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。

      有四个值，其中第一个值是设置 top-left 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left。

3 margin为负值像素，偏移值相对于自身，其后元素受影响

4 字体内容长度超过时，出现“...”

   text-overflow: ellipsis;属性规定当文本溢出包含元素时发生的事情。

   white-space: nowrap;规定段落中的文本不进行换行

   overflow: hidden;溢出隐藏的一个属性

 【补充】overflow: hidden还可以解决插入图片时的底部留白问题！

深度思考：

1 去除inline-block间距有哪几种方法？  

①inline-block的基本内容：

    它是一个块状行盒，表现为一个行内元素，

    它既拥有了块状元素可以设置width和height的特性，又保留了行内元素不换行的特点。

    应用了display:line-block属性的元素会生成一个块状盒，该块状盒随着周围内容流动。

②它的间距是什么？如图箭头指的位置。

③如何解决？（移除空格、用margin负值、删掉闭合标签、用font-size:0、用letter-spacing、用word-spacing）

一、移除空格

元素间留白间距的出现原因即标签段间的空格，去掉空格间距自然没有了。

或者使用<!---->

因为<!---->是注释标签。注释不会显示在浏览器中。

二、使用margin负值

但是margin负值的大小与上下文字体和文字大小有关，

       由于外部环境的不确定性及最后一个元素多出的父margin值等问题，此方法不适合大规模使用。

三 删掉闭合标签

HTML5中可以很任性：虽然这样很怪但确实有效。

4.使用font-size:0【并不是很理解原理】

font-size 属性可设置字体的尺寸。

注意，实际上它设置的是字体中字符框的高度；

          实际的字符字形可能比这些框高或矮（通常会矮）。

5. 使用letter-spacing

letter-spacing 属性增加或减少字符间的空白（字符间距）。

该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。

注意：允许使用负值，这会让字母之间挤得更紧

    值：normal 默认。规定字符间没有额外的空间。

          length 定义字符间的固定空间（允许使用负值）。

          inherit 规定应该从父元素继承 letter-spacing 属性的值。

6. 使用word-spacing

letter-spacing属性增加或减少单词间的空白

2 css有哪些属性可以继承？

一、无继承性的属性

1、display：规定元素应该生成的框的类型

2、文本属性：

vertical-align：垂直文本对齐

text-decoration：规定添加到文本的装饰

text-shadow：文本阴影效果

white-space：空白符的处理

unicode-bidi：设置文本的方向

3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6、生成内容属性：content、counter-reset、counter-increment

7、轮廓样式属性：outline-style、outline-width、outline-color、outline

8、页面样式属性：size、page-break-before、page-break-after

9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性

1、字体系列属性

font：组合字体

font-family：规定元素的字体系列

font-weight：设置字体的粗细

font-size：设置字体的尺寸

font-style：定义字体的风格

font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

2、文本系列属性

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：增加或减少单词间的空白（即字间隔）

letter-spacing：增加或减少字符间的空白（字符间距）

text-transform：控制文本大小写

direction：规定文本的书写方向

color：文本颜色

3、元素可见性：visibility

4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style

6、生成内容属性：quotes

7、光标属性：cursor

8、页面样式属性：page、page-break-inside、windows、orphans

9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

三、所有元素可以继承的属性

1、元素可见性：visibility

2、光标属性：cursor

四、内联元素可以继承的属性

1、字体系列属性

2、除text-indent、text-align之外的文本系列属性

五、块级元素可以继承的属性

1、text-indent、text-align