今天完成的事：

一、px、em、rem、%、vw、wh、vm等单位有什么区别？

px：是显示屏上显示的每一个小点,为显示的最小单位。这个长度与你正在看的显示屏中的文字屏幕像素没有任何关系。

px值是固定的，不会随着屏幕宽度变而变。

em:是相对单位。em其实就是一种排版的测试单位。

在CSS中，“em”实际上是一个垂直测量。一个em等于任何字体中的字母所需要的垂直空间，而和它所占据的水平空间没有任何的关系，因此：如果字体大小是16px，那么1em=16px。在所有现代浏览器中，其默认的字体大小就是“16px”。但自身如果定义了font-size大小则按照自身来计算，也就是说整个页面内的em值并非完全一样。

rem:是一个相对的单位，像em，但它总是相对于“根”元素html的字体大小来计算。em和rem的区别：em相对于父元素，rem相对于根元素。这极大地简化了与相关长度单位的合作。

%：以百分比形式设置的长度基于父元素的相同属性的长度。例如，如果一个元素以450px宽度呈现，宽度设置为50％的子元素将呈现225px。

vw-这是“视口宽度”单位。 1vw等于视口宽度的1％。它与百分比类似，不同之处在于，所有元素的值都保持一致，无论其父元素或父元素宽度如何。

vh-这与vw（视口宽度）单位相同，只是它基于视口高度。vmin and vmax：关于视口高度vh和宽度vw两者的最小值或者最大值。

二、常见的css绘制图形

css能画出来的图形有很多，列了几个目前会用到的写下来。

向上的三角形

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;}

向下

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;}

向左

#triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent;}

向右

#triangle-right {    width: 0;    height: 0;    border-top: 50px solid transparent;    border-left: 100px solid red;    border-bottom: 50px solid transparent;}

明天计划的事情：

尽快完成任务六

遇到的问题：

下拉栏的实现，还在解决当中。

收获：

在做任务的过程中对弹性盒子有了进一步的了解。