Day 20

今天完成的事情

      1.任务五和任务四的页面布局很像，所以索性直接套用来做 

      2.一不小心又过了十二点，所以这是两篇日报

      3.将护工头像部分只导出背景和头像，其余部分以浮动或定位实现

遇到的问题

      1.想将护工头像浮动在背景图片上方，发现float不可行

原因：float本意是实现文字环绕图片的效果，即不能对图片起作用

解决办法：①.样式表里将背景图片以链接方式插入div，html里插入img

            后期发现有图片的影响，很多东西做起来很麻烦，所以重新思考解决办法

                 ②.用绝对定位把第二张图片定位过来

      2.背景图片在不同分辨率下显示不完全

后面通过查阅标签，找到了background-size标签确定了图片x方向和y方向上的大小

      3.使用固定定位时，header和footer会遮挡内容的情况

我在网上查了一下第一种方法是给body加上padding-bottom，这样正常流文档的内容距离body就会产生设置的距离

第二种方法是使用js解决，但是还没有学过，不怎么看得懂

第三种是增加同级占位符<div>，在<footer>块之外再包裹一层div，然后在增加一个一<footer>同级的的<div>块。

第三个：页面属性变多之后，感觉自己写的时候很杂乱，有些样式刚开始没有意识到，后面又去加。

还有一些比较杂的小问题就不多赘述了。

      4.img图片下面出现空白

原因是基线和底线之间会有一段空白区域；

解决的方法：

给图片img标签设置display：block；或者是vertical-align

定义容器字体大小font-size：0；

收获

      1.了解了一下块级元素、内联元素、内联块元素。

inline元素：

可以和别的元素同占一行；元素高宽、行高、顶部底部边距无法设置；元素宽度由内容决定；

block元素：

块级元素总是独占一行，元素高宽、边距都可以设置；

inline-block元素：

可以和别的元素同占一行，高宽边距也可以设置；

并且知道了img图片下面出现空白的原因及解决方法：

原因是基线和底线之间会有一段空白区域；

解决的方法：

给图片img标签设置display：block；或者是vertical-align

定义容器字体大小font-size：0；

      2.继续查看了弹性容器的知识，加深理解：

弹性容器包含了一个或者是多个弹性子元素，它并不改变渲染情况，只是定义弹性元素如何布局且默认元素按一行排列。

flex-direction属性：指定了弹性子元素在盒子中是横向还是竖向排列，是从左到右或是从右到左；

justify-content属性：指定了弹性子元素在横向上的对齐方式，有flex-start（从行头紧挨着填充）、flex-end（从行尾紧挨着填充）、center（居中紧挨着填充）、space-between（两边对齐）、space-around（两边对齐，但是两边留有一半的间隔空间）；

align-items属性：设置子元素在竖直方向上的对齐方式，有flex-start（紧挨着上部）、flex-end（紧挨着下部）、baseline（基线对齐）、center（垂直居中）；

flex-wrap属性：指定元素换行方式，有nowrap（单行）、wrap（多行）、wrap-reverse（反转排列）。

      3.进一步了解line-height行高

顾名思义行高就是一行文字的高度，具体指两行文字基线之间的距离。

行高具有垂直居中性，能够实现单行、多行或者是图片的垂直居中。

明天计划学习

      1.学习（了解？）雪碧图和其应用

      2.继续完善任务五