今天完成的事情：完成了任务五，开始了任务六。并学习了css编码规范。
明天计划的事情：任务六
遇到的问题：内容溢出盒子。
收获：更深一步了解了flex的运用，以及display的inline block 运用。

           以及父元素如何跟随子元素高度变化。

          和设置盒子最小的宽，避免屏幕缩小后内容溢出。

在information_a处

   1插入背景图片用background:url("./images/background.png") no-repeat center

                     其中url("./images/background.png")为文件地址

no-repeat不重复

center居中，

    2设置背景尺寸：background-size: 100% 100% 完全铺满整个盒子

    3利用flex布置头像和用户信息（比如任务四的表单）。

     设置父元素的displayflex，头像和用户信息就可弹性。

     并设置头像和用户信息为行元素display: inline;是他们排列一行。并设置父元素设置align-items: center使垂直居中。

     设置盒子宽高填充边缘。

发现问题：当屏幕宽度缩小到图片的宽度后，界面就会出现白色空白。

原因理解：图片设置了具体的宽度，不会随着自适应。

在information_b处

   1 专业技能：只做一个盒子就行，然后设置margin、border-left、padding-left

   2 住家和餐，做两个盒子，用flex设置盒子。如information_a处第3步

   3 剩下的如同2

发现问题：缩小后盒子内容跑出

解决方案：设置最小宽度

发现问题：缩小后，父元素高度不随着子元素高度而变化。

解决方案：

1设置最小的父元素高度，满足前面的任务的需求

都设置父元素height:auto!important。自动适应。

2添加浮动：

在浮动的容器后面，父容器结束之前加入一个空的div，并清除浮动。

 任务五

成果：https://15188302990.github.io/studying-it-web/task5/Task5.html

代码：https://github.com/15188302990/studying-it-web/tree/master/task5

规范CSS书写（今天所改写，所了解到的）

一、CSS书写顺序

1.位置属性(position, top, right, z-index, display, float等)

2.大小(width, height, padding, margin)

3.文字系列(font, line-height, letter-spacing, color- text-align等)

4.背景(background, border等)

5.其他(animation, transition等)

二修改空格

选择器 与 { 之间必须包含空格。

属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格

三属性

属性定义必须另起一行；

属性定义后必须以分号结尾。

四清除浮动

当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。

五数值

当数值为 0 - 1 之间的小数时，省略整数部分的 0。

六url()

url() 函数中的路径不加引号。

七长度

长度为 0 时须省略单位。 (也只有长度单位可省)

八颜色

RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()

颜色值可以缩写时，必须使用缩写形式