2018/10/21

今日完成：

1、了解rem单位和em单位的区别，明白他们的意思以及怎么使用。2、学习background的用法，学会background属性的用法。3、完成任务五的切图，期间切的图有白色背景，选中图层隐藏其他图层导出就没这个问题。

rem单位怎么转换为像素值，取决于html元素的字体大小，谷歌浏览器默认的字体大小为16px（几乎在每个浏览器中，16px都是字体大小的默认值），即1rem=16px 。 可以通过设置font-size来设置字体大小。

em单位取决于它上一父元素font-size的大小，而它上一级的父元素又取决上上级，以此类推。

html {  font-size: 16px;}

p {font-size: 1rem; /* 1*20=16px*/}

.someClass {  font-size: .75em; // 12px}

.someClass p {  font-size: 2em; // 24px}

.someClass p .test {
  font-size: 1.25rem; // 20px}

但是当设置到12px以下的时候字体大小不再改变，因为谷歌浏览器默认最小的是12px。即font-size设为62.5%时，1rem不等于10px，应为浏览器的最小值12px，所以可以设置其他合适的font-size值。

2、background的各项属性

• background-color                           定义了元素的背景颜色.。
• background-image                         描述了元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。
• background-repeat                         设置背景图像如何平铺，默认情况进行x,y轴平铺。
• background-attachment                 设置背景图像是否固定或者随着页面的其余部分滚动。
• background-position                     设置背景图像的起始位置。

background的简写顺序：   body{background:#ffffff url('img_tree.png') no-repeat right top;}

CSS3新增的背景属性，

background-size                     设置背景图片的尺寸。

background-origin                 规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。

初步布局任务五，用的还是之前的方法盒子模型+div+float+position，巩固之前学的知识。

遇到的问题及解决思路：

布局时最下面一行的文字内容当屏幕宽度缩小时，不能保证在丨的后面自动换行。想了下办法，先把两条线之间块高度设置成auto,把文字组成块然后向左浮动，这时新组成的文字块内容太长直接浮到下一行了，又想了下这个块应该设置个宽度给他，所以用calc函数属性calc(100% - 2.5rem)，宽度最终随屏幕宽变化。

但是这时候如果文字继承父元素的line-height属性垂直居中，行距将变大了{左图}，暂时找不到解决思路。还有这行前面的“自我介绍”由于它的高度也是随line-height属性垂直居中的，当高度发生变化时也不能跟随父元素的高度变化而居中，最后尝试用flex布局设置这个块的父元素，使里面的块都能垂直居中， display: flex;align-items:center;

遇到的问题：如上，文字垂直居中的间距出现问题，剩下两个按钮的定位还未完成，心态太浮躁了思考问题也不集中，进度很慢。

明日计划： 把任务五剩下的做完，认真思考该怎样做剩下的内容，调整好心态。

收获：学会rem、em单位的区别并学会使用，巩固了之前的自适应知识，并初步使用了flex布局，把任务五基本布局完成。