一、今天完成的事情：

1.熟练水平居中布局

2.熟练雪碧图的具体使用

二、明天计划的事情：

1.完成任务8

2.熟练响应式布局

三、遇到的问题：

1.响应式布局还是有点不熟练，通过bootstrap的栅格布局和媒体查询来写响应式布局，一开始的时候没有提前定好什么尺寸显示哪些内容，后面做任务的时候，才开始见一块写一块，使得媒体查询的时候尺寸写的有些混乱，增加了很多不必要的工作量。

2.

在将一列好几个元素想水平居中的时候，遇到了些困难，尝试了margin: 0 auto; text-align: center; 等都没有成功使几个元素分布式居中。后来通过在这些元素之上新建一个包含它们的DIV，然后定好宽度。在添加样式margin:0 auto;，就可以使得这几个元素居中了，然后再通过调整margin值，使得之间有相等的间隙，这样就分布居中成一行了。

四、收获：

1.熟练水平居中布局

水平居中我一般使用的较多的是margin: 0 atuo; 和 text-align: center; 但是这两个样式想取得居中的效果是有条件的。

1.1 像margin: 0 atuo; 想要获得水平居中效果，需要注意以下几点：

子元素要有高宽，要为块元素，或者属性为 inline-block 的元素，因为只有块元素 和属性为 inline-block 的元素才能定高宽。

宽度不要随便定，比如你div里有一行字（不过根据html标签规范，文本使用span\p等标签更好，此仅做例子），实际宽为10px，但是你将宽设置为20px，就得不到让文字居中的效果。除非你再在里面添加text-align: center；的样式

.content .advan .effic .effic-p,.standard-p,.peo-p {
    height: 0.62rem;
    width: 0.62rem;
    margin: 0 auto;    
}

1.2 像text-align: center; 则用于行内元素的居中，诸如span/p等为标签的文本。text-align:center；因为是行内元素，不可以定高宽，所以要文本居中一般常用text-align: center；该样式用于父元素，则可使行内的子元素居中。我经常犯的错误就是，给子元素添加该样式，添加半天都没有效果。就是因为添加错了地方，应该添加到父元素上。

.content .advan .effic,.standard,.peo {   
    text-align: center;   （添加到父元素）
}

2.熟练雪碧图小图标的具体使用

有时候我们用雪碧图会遇到个问题，例如div直接跟了文本（没有再新建span子元素），然后我们想在div 的 background里添加小图标，这时候我们就会遇到文字跟图标重叠的情况，而且有时你的文本大小跟图标大小不一。像这样：，人头图标跟数字重叠了。

这个时候不仅要灵活调整background-position的位置，使其跟数字处于同一水平线。还要将其分开，这时候直接给元素添加padding-left值就可以了，数字就会往右移动，与图标不再重叠。

.content .advan .num-peo .num-peo-on {
    background: url("img/icon.png") no-repeat -3rem -2.96rem;
    margin-top: 0.45rem;
    margin-bottom: 0.1rem;
    color: #209f6a;
    font-weight: bold;
    width: 0.9rem;
    padding-left: 0.2rem;
}

进度：任务8

任务开始时间：06.07

预计demo时间：06.12

是否有延期风险：有

禅道：http://task.ptteng.com/zentao/project-task-729.html