今天完成的事情：

1.完成任务6 2.雪碧图

明天计划的事情：

完成任务7

遇到的问题：

已解决

收获：

1.雪碧图

雪碧图的原理就是把要用到的所有图标合成一张图片，然后设置空div背景为这张图片，再通过设置div宽高（设置为所需其中图标宽高）和background-position：x y 来给这张合成图片的左上角顶点设置坐标，以达到这个div的背景为所需图标的效果。

好处是：只需要下载一张图片，不像以前使用img时每次都要请求一下下载，减少了http请求。

制作雪碧图可以使用css Sprite 软件，在生成雪碧图后也会生成对应的css代码，直接粘贴使用就好。

2.html+css制作选择框。

主要是运用伪元素选择器 element:hover{..}来达成光标悬浮其上时（手机端要点击）overflow变化。设置固定选择下拉按钮的高度，然后选择框在下面，全部超出父元素。正常情况下，父元素overflow：hidden，选择框不会出现。然后 父元素上有鼠标时，设置父元素overflow：visible，选择框就出现了。

为了防止选择框出现时影响其他元素，设置了父元素position：relative，选择框absolute。

3.边框颜色渐变

为了达成效果图，主要使用了border-image属性和linear-gradient函数。

border-right:solid 1px;

border-image: linear-gradient(to top, rgba(255, 255, 255, 0.8),

          rgba(175, 186, 192, 0.8) 30%, rgba(175, 186, 192, 0.8) 70%,

          rgba(255, 255, 255, 0.8)) 1;

linear-gradient：top表示颜色从上到下安排，颜色，30%表示起止色位置

4.固定header和footer，主体滚动

直接设置body grid布局

body{

margin: 0;

height: 100vh;

display: grid;

grid-template-rows: 83px auto 50px;

}

达成固定

之后设置main主体列表 overflow：scroll 使其超出滚动

5.宽度过小时，字体多余部分为 ... 

首先给包含文本的div设置一个固定宽度(为了成为响应式，设置了宽度单位为vw)，然后设置它

text-overflow: ellipsis;    （超出文本显示为...）

white-space: nowrap;       (文本不自动换行)

overflow: hidden; 

深度思考：

css有哪些属性可以继承？

按css编码规范属性书写顺序来

1.布局、位置

（1）表格布局

caption-side：设置表格标题位置

border-collapse：设置是够将表格边框折叠成单一边框

border-spacing：设置分隔单元格边框的距离

empty-cells：设置是否显示表格中的空单元格

table-layout：设置显示单元、行、列的算法

（2）列表布局

list-style：设置列表风格 

list-style-type：列表项的标志类型

list-style-image：对各标志使用一个图像

list-style-position：可以确定标志出现在列表项内容之外还是内容内部

2.尺寸

3.文本相关

（1）字体系列

font-family：字体系列

font-weight：字体粗细

font-size：字体大小

font-style：字体风格 （如斜体）

font-variant：设置小型大写字母的字体显示文本，所有小写会被转为大写，但所有使用小型大写字体的字母与其他文本相比，其字体尺寸更小（variant：变体）

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

字体的小写字母 "x" 的高度与 "font-size" 高度之间的比率被称为一个字体的 aspect 值。高aspect值使字体即使尺寸小也更易阅读

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

（2）文本系列

text-indent：文本缩进 （length % inherit）

text-align：文本水平对齐

line-height：行高

word-sapcing：单词之间的间距

letter-spacing：中文字符或字母之间的间距

direction：规定文本的书写方向

text-transform：控制文本大小写 （lowercase：只有小写  uppercase：只有大写 capitalize：每个单词以大写开头）

color：文本颜色

4.视觉效果

（1）元素可见性

visibility：控制元素显示隐藏 

（2）光标

cursor：设置光标为何种形态

（3）生成内容

quotes：设置嵌套引用的引号类型

（4）页面样式

page：规定元素应该被显示的页面特定类型。

page-break-inside：设置在表格元素内部避免进行分页的分页行为。

windows：设置当元素内部发生分页时必须在页面顶部保留的最少行数。

orphans：设置当元素内部发生分页时必须在页面底部保留的最少行数。

（5）声音样式

speak：设置或检索声音是否给出。

speak-punctuation：设置或检索标点符号如何发音。

speak-numeral：设置或检索数字如何发音。

speak-header：设置或检索表格头与其后的一系列单元格发生多少次关系。

speech-rate：设置或检索发音速度。

volume：设置或检索音量。

voice-family：设置或检索当前声音类型。

pitch：设置或检索音高。

pitch-range：设置或检索声音的平滑程度。

stress：和pitch-range相似。设置或检索当前声音波形的最高峰值。

richness：设置或检索当前声音的音色。

azimuth：设置或检索当前声音的音场角度。

elevation：设置或检索当前声音的音源仰角。