今天完成的事情：今天完成任务第二个页面
明天计划的事情：明天第三个页面
遇到的问题：暂无
收获：对boothstrap更加熟练一点

任务六总结

通过任务六学会了简单的雪碧图的制作和引用。根据深刻的理解 处理居中问题的line-height属性，它的%值，他是基于当前字体尺寸的百分比行间距。也学会了一种简单的下拉框，简单的原理是设置此框架隐藏，然后通过hover使其显现出来。更加深刻了对于Flex理解，按钮不能运用这个属性。也学会运用border-radius标签，仅可以用此设置形状，也可以分别对每个角进行设置。在出现未掩盖的显现，可以运用z-index标签进行处理。学习到了margin的值为负值的运用。学习到字体内容长度超过时，出现“...”的css方式。

脑图：

深度思考：

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