2018/1024

今日收获：

1、理解并学会用flex做垂直居中，向右对齐，向左对齐等利用，利用主轴属性justify-content和交叉轴align-items属性，如需要竖向排列项目，可以用flex-direction:column;。

2、如果屏幕过窄时，设置左边的文字被截断出现”…”省略号，百度查看学习资料后，学会用width指定宽度, white-space + text-overflow + overflow，使溢出文字用点点。。。。表示。引用网页：http://caibaojian.com/css-white-space.html

p{width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

text-overflow属性指定当文本溢出包含它的元素，应该发生什么。

值：clip 修剪文本。 （默认值）

ellipsis 显示省略符号来代表被修剪的文本。 

string 使用给定的字符串来代表被修剪的文本。 

white-space属性指定元素内的空白怎样处理。

值：nowrap 强制文本在一行内显示。

overflow属性指定如果内容溢出一个元素的框，会发生什么。

值：hidden 内容会被修剪，并且其余内容是不可见的。  

visible 默认值。内容不会被修剪，会呈现在元素框之外。 

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 

3、初步学会用CSS模拟下拉框。

.dropdown类使用 position:relative

dropdown-content 类中是实际的下拉菜单，默认是隐藏的，在鼠标移动到指定元素后会显示。此处display设为none，元素将不显示，如果未设置此项，默认是显示全部下拉菜单的状态。min-width是设置下拉的菜单最小宽度，可以设置其他宽度。box-shadow属性可以让下拉菜单看起来像一个"卡片"，可以理解为为下拉菜单加个border样式。

:hover 选择器用于在将鼠标移动到下拉按钮上时显示下拉菜单，显示当前的位置，可以调整背景颜色。

4、学会用雪碧图布局图标。background属性是符合属性，子属性应写在它下面。搞了一晚上终于明白为什么雪碧图一直不定位不准的原因。

遇到的问题：图标按钮暂时不会弄。

明日计划：计划完成任务6，header和footer的按钮明日尝试做出来，巩固常用定位知识。