今天完成的事情

今天完成了任务六页面的重构，使用sass进行的重构，规范代码，重构后页面如下

今天遇到的问题

问题1：在使用sass的过程中遇到了需要使用hover效果的情况，直接嵌套发现不行最后，使用&完美解决

解  决：hover前添加 & 符号完美解决,如下图

问题2：如下图，使用text-align属性无法使文字居中

解 决：经过测试，发现text-align属性确实无效，后来使用text-align-last：center就可以达到居中效果

问题3：如下图，在重构页面的时候，遇到之前一样的问题，文本挤压并没有出现省略号，而是换行

解 决：关于文本超出出现省略号的属性使用我没问题，white-space：nowrap；(文本换行）、overflow：hidden；(超出隐藏）、

          text-overflow：ellipsis；(产出后隐藏方式为省略号）。但是此处“25元/小时”需要给固定宽度，然后左边文本使用calc即可解决，如下图。

问题4：如下图，在使用position：fixed；固定定位以及弹性盒子flex后，给下方途中父元素添加padding时，发现padding只有一边生效，且布局混乱。

解 决：最后放弃使用padding的思路，改为给左右两端子元素添加margin的做法完美解决。

分析：后来自己分析使用padding不行的原因是：此处我使用了position：fixed； right：0px； bottom：0px；以及justify-content：space-between，所以此处父元素以及两端元素必须和左右两边以及底边靠齐，此处是right 和bottom的属性值起了作用，所以只能给子元素添加margin来解决。-----------此分析有待明天和师兄确认是否正确。

今天的收获

text-align-last属性

text-align-last 属性规定如何对齐文本的最后一行。

注意：text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作用。

css语法：

text-align-last: auto|left|right|center|justify|start|end|initial|inherit;

属性值：

明天的计划

1.确认任务十二的重构中，使用sass有没有问题，代码规范如何

2.如果任务十二没问题，就开始任务十三