今天完成的事

1.根据师兄的指引学习

https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

CSS深入理解vertical-align和line-height的基友关系

这篇文章

提供了一种垂直居中的思路

通过line-height定高，元素vertical-align:middle垂直居中。

2.根据文章思路给列表的文字容器添加样式

line-height: 21px;
font-size: 0;

3.给文字元素添加样式

vertical-align: middle;

4.继续寻找列表省略号不显示的原因

将文字元素设置为display：inline-block时不显示省略号

而设置display：block时显示省略号但没有并排

因为display：block带有换行符

收获

看了张鑫旭大神的文章

关于文字内容溢出用点点点(...)省略号表示

https://www.zhangxinxu.com/study/200909/text-overflow-ellipsis-so-on.html

自己采用的是第一种常规方法 

5.在群里请教了师兄们 然后发现了症结所在

做出后面的修改

6.修改并添加盒子pp的样式

display: flex;                      /*设置display属性为flex排列*/
justify-content: space-between;     /*设置两端对齐排列*/

7.修改文字部分的样式

background-position: 80px;          /*s设置背景图片起始位置为x轴上80px*/
padding-right: 70px;                /*设置右边内边距为70px*/

8.删除文字部分的样式

padding-right: 60px;                /*设定左内边距为40px*/

9.为各个按钮添加鼠标变手指样式

.cursor {
    cursor: pointer;                    /*s设置光标样式手指变化*/
}

10.修改底部栏按钮排列方式

采用display：line-block    justify-content:

footer.h {
    bottom: 0px;                         /*设置footer紧贴窗口下边*/
    background-color: rgb(248, 250, 251);/*设置footer颜色为*/
    height: 60px;                       /*设置footer的高度为60px*/
    align-items: center;                /*行列项目中垂直居中排列*/
    justify-content: space-between;
}

11.删除一些样式

flex-grow: 3;                       /*设置显示放大比例来排列三个按钮*/

flex-grow: 1;                        /*设置显示放大比例来排列三个按钮*/

12.修改“服务日期”“北京·通州·果园”部分

<p class="p">
    <p1 class="p1">
        <span1 class="icon1">服务日期</span1>
        <pp class="pp">
                <p2 class="t text">
                    2015-7-5至2015-7-12
                </p2>
                <p2 class="t2 text">
                    25元/小时
                </p2>
        </pp>
        <span1 class="icon2">北京.通州.果园</span1>
    </p1>

13.修改雪碧图样式

span1 {
    display: flex;                      /*设置为弹性布局*/
    flex-direction: column;             /*设置为flex布局 主轴从上往下垂直布局*/
    width: 0px;                       /*设置选取宽度*/
    height: 20px;                       /*设置选取高度*/
    background-image: url(列表页.png);  /*选定雪碧图*/
    background-repeat: no-repeat;       /*设定图片不重复*/
    background-size: 400px;             /*设定X轴为400px等比例缩小*/
}

14.为文字“服务日期”“北京.通州.果园”部分修改样式

padding-left: 25px;
color: silver;

15.给select下拉标签的文字添加样式使其居中

.center {
    text-align: center;
    text-align-last: center;
}

16.提交任务六

明天的计划

1.开始任务7

2.完善任务6

遇到的问题

1.用line-flex用着用着用成line-block了 现在才发觉过来 有些懵逼

2.设置

padding-left: 25px;

时 要将雪碧图的width设置为0px时才能正常显示

width: 0px;                       /*设置选取宽度*/

收获

1.

justify-content语法如下：

justify-content: flex-start | flex-end | center | space-between | space-around

参数说明如下：

flex-start

弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

flex-end

弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

center

弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

space-between

弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

space-around

弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

--------------------- 

作者：陈小峰_iefreer 

来源：CSDN 

原文：https://blog.csdn.net/iefreer/article/details/50775887