今天完成的事情：解决了居中问题，完成了任务四，学习了flex，同时用flex构建了任务四； 
明天计划的事情：计划去分院报道，有时间去看一下任务五 
遇到的问题：不用 flex情况下，当浏览器边框极度缩小下，input输入框会离开原来位置。
收获：解决了居中问题，简单了解下flex布局。

具体如下：

一、昨天“居中”问题解决。

1.头部的“登录”不居中

html                          css

                 结果

原因：是“登录”被<span>设置了position：absolute，影响了body里的“text-align：center”

解决方案：仅设置“关闭”“注册”position：absolute。

再将header的width与line-height高度一直【此时垂直居中】

再加text-align：center【此时水平居中】

css结果

2图片与输出框不同水平高，不居中。

解决方案：设置父容器高和行高相同，可居中。设置img和input的vertical-align可使他们出于同一高度。

html

css结果

3底部“登录不居中”【和1相似】

html

css

结果

解决：设置设置父容器高和行高相同，和text-align：center。

二、今天遇到的问题。

4.密码输入时是可见状态。

html

结果

原因是tepe=“”命名时英文写错，应该是password不是passward。

解决方案：改写passward为password。

5.输入框输入时有边框显示。

原因是input没有设置outline：none。

解决方案：加上outline：none

css 结果

6.底部“登录”中间有空格。

解决方案：空格代码 “&nbsp;”

任务四到此算是完成。

7.但还是小问题，当屏幕宽度为173px以下时，input输入位置会重新另起一行。[未解决]

任务四网址

https://15188302990.github.io/studying-it-web/task4/Task4.html

http://118.126.113.248/jnshu773/study/task4/Task4.html

三、之后学习了flex布局

简单理解就是在默认水平方向为主轴的情况下：

display: flex;

align-items: center;使其垂直居中

justify-content: center;使其水平居中

用flex构建的任务四

https://15188302990.github.io/studying-it-web/task4/Task4a.html

http://118.126.113.248/jnshu773/study/task4/Task4a.html

四、flex基础知识

为何用flex：以前的布局是浮动或者固定宽度+百分比来进行布局，代码量大且复杂。

基础概念：

主轴（侧轴）：flexbox布局是将一个可伸缩容器按水平和垂直方向分成主或侧轴。。

主轴（侧轴）长度：在主轴方向上可伸缩容器的尺寸（宽或高）；

主轴（侧轴）起点、终点：如图：左border就是主轴起点，右border就是主轴终点；

                              上border就是侧轴起点，下border就是侧轴终点；

伸缩项目：包含在伸缩容器中需要进行伸缩布局的元素被称作伸缩项目；

伸缩容器：盒子属性为display：flex【还可以取值为inline-flex,两者的区别在于前者将这个容器渲染为块级元素，后者将其渲染为内联元素。】

flex-direction属性：就是用来定义主轴侧轴方向的

justify-content属性：用来表示可伸缩项目在主轴方向上的对齐方式

（其中flex-start,flex-end,表示相对于主轴起点和终点对齐，

center表示居中对齐，

pace-between表示两端对齐并将剩余空间在主轴方向上进行平均分配

space-around表示居中对齐然后在主轴方向上将剩余空间平均分配）

align-items属性：该属性是用来表示可伸缩项目在侧轴方向上的对齐方式，

（flex-start,flex-end,center,baseline,stretch）

baseline值，它是按照一个计算出来的基准线然后让这些项目沿这个基准线对齐，基准线的计算取决于可伸缩项目的尺寸及内容。

flex-wrap属性：表示是否支持换行或者换列。

（nowrap是默认值，表示不换行或者换列，

wrap表示换行或者换列，

wrap-reverse表示支持换行或者换列，但是会沿着相反方向进行排列（如主轴是垂直方向换行后就按照先下后上的顺序来排列伸缩项）

align-content属性：用来表示换行之后各个伸缩行的对齐方式。

（stretch,flex-start,flex-end,center,space-between,space-around，

意义和align-items属性取值意义相同）

flex-flow属性：该属性是个复属性，它是flex-direction和flex-wrap的复合属性，

flex-direction：row;flex-wrap:wrap就等同于flex-flow:row wrap

margin：auto： 可伸缩项就会在这个方向上占用该方向的剩余空间来作为自己的这个方向上的margin。

align-self属性：该属性是给各个可伸缩项设置自己的在侧轴上的对齐方式的，之前在容器上设置的align-item属性是作为一个整体设置的，所有的元素对齐方式都一样，align-self属性会覆盖之前的align-item属性，让每个可伸缩项在侧轴上具有不同的对齐方式，取值和align-item相同