今天完成的事情：

1.完成任务四

明天计划的事情：

完成任务五

遇到的问题：

今日问题已全部解决，放入收获汇总

收获：

1.登录界面header

使用了三个span包裹对应字段，原本通过设置左右字段float与margin来达到效果，但这样无法达到检验标准中去除字段不影响其他字段。原因是float的元素虽然会被块元素无视，但内联元素和块元素中文本都会被影响，所以无法达成效果。

于是将左右字段更改为设置position：absolute绝对定位脱离文档流，只设置了对应的left和right，垂直居中由继承header的line-height达成。这样，三个字段就互不影响了。

登录字段通过header设置text-align：center和header的line-height达成水平垂直居中效果。

2.输入界面

使用div，与header部分空隙使用margin-top达成。

之后手机图标使用div包裹，只设置了width:116px;高度由图标撑开，由于输入div设置了display:flex; align-items:center;所以可以打成垂直居中，而图标div中设置了text-align:center，使其水平居中。

然后放置竖线图片，设置margin-right制造与input元素之间的距离。

input元素，type分别为number和password。

<input type="number" placeholder="请输入手机号"/>

<input type="password" placeholder="请输入密码"/>

input为inline-block元素，自带样式，通过设置css样式border：none和设置font-size达成所需效果，但此时点击input输入时，元素仍然带有边框，如下

此时通过设置css属性outline: none去除( outline（轮廓）是投射于元素周围的一条线，位于边缘的外围，可扩展突出元素的作用。 )

之后设置placeholder="请输入手机号"，达成

效果。

placeholder属性和value属性都可以达成在文本框中出现预备字段的效果。

但二者区别在于：

placeholder用于提示，不会被提交，字体颜色与正式填写颜色不同，只有 字段获取焦点但未填写/字段失去焦点且未填写 的情况下才会出现；而value则是会被提交的值，如填入123123那么这个input的value就为123123，获得焦点开始填写也不会消失，一般用于填写文本框的默认内容以避免表单填写任务过于繁重。

type=number的input元素，会带一个上下三角的按钮来填充数字，为了消除这个按钮，在css中使用：

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

    -webkit-appearance: none;

}

input[type="number"] {

    -moz-appearance: textfield;

}

来达成效果。

这段代码是在网上找的，之后查了一下，只在MDN中查到是专门用于控制这个上下按钮的，于是暂时不具体学习。而input[type="number"] 就是选择type为number的input元素，语法就是这样。

其中-webkit-和-moz-都是css属性前缀，用于控制兼容，比如-webkit-css属性就是帮助webkit内核(webkit浏览器引擎)的浏览器识别该属性。

type=password的input元素，输入内容会自动转变为小黑点。

最后，说一下之前使图标居中的flex布局。

flex布局有两个概念，容器和项目，容器就是包裹住项目的盒子，设置容器属性 display为flex或者inline-flex都可以设置内部变为flex布局（考虑兼容性webkit内核的浏览器必须要加上

-webkit-前缀）。而容器内部设置为flex布局后，就会产生主轴和交叉轴，默认主轴水平交叉轴垂直，以此来控制内中项目的排列。

容器属性：

flex-derection：row（默认）/column/row-reverse/column-reverse;

设置主轴方向，水平左至右或垂直上至下或二者相反方向

flex-wrap：wrap/nowrap（默认）/wrap-reverse;

设置项目在容器内是否换行，默认不换行

flex-flow:以上二者简写 flex-flow: row nowrap;（默认）

justify-content:  flex-start（默认）/flex-end/center/space-between/space-around;

设置主轴上的项目的对齐方式，默认从头开始，也可 从尾开始/居中/项目间间隔相等（项目与边栏之间无间隔）/项目两侧间隔相等（此时与边栏有间隔，而项目与项目间隔比项目与边栏间隔大一倍）

align-items:  flex-start/flex-end/center/baseline/stretch（默认）

stretch，占满整个容器宽度    baseline 以项目的第一行文字为基线对齐。

设置交叉轴上排列方式。

align-content：同justify-content，另外有stretch（默认）,这个设置轴线占满整个交叉轴，即拉伸项目填满。

设置有多行时交叉轴排列方式，如果只有一行则不起作用。

项目属性：

align-self：同容器属性align-items，但只设置单个项目的对齐方式，除此之外还有一个auto，表示继承父元素的align-items/content 值。

order: 数值

次序，数值越小那项目就排的越前

flex-grow：数值

表示扩张，默认为0不扩张，可以给多个项目设置此属性，之后项目会按住数值比例占据容器剩余空间。

flex-shrink：数值

表示缩放，默认为1，当容器控件不足时项目都等比例缩小，如果设置某个为0，那么其他的缩小该项目不缩小

flex-basis: 可以为%,px等等表长度，默认auto本来大小

表示项目占据的主轴空间大小

flex: 0 1 none （默认）

flex ，flex-grow、flex-shrink、flex-basis合写

3.登录按钮

这部分主要在于，div中文本我写了 “登      录”但显示只有一个空格“登 录”，为了达成效果图，使用了letter-spacing：10px扩大字符之间的间距。

4.忘记密码

横线使用text-derection：underline获得。

5.补充

当模拟手机页面缩放到一定程度时，发现input会超出一部分，

于是给html设置了css属性 min-width来保证不出现这个问题。

深度思考

1.常见的表单元素有哪些？各有什么属性？

<form> 

定义一个表单

<input>  

单行输入框   单标签

<datalist>

H5新增  一个增加下拉列表的输入框

<textarea>

多行文本框

<label>

定义了input元素标签，一般为输入标题

<button>

按钮

<select><optgroup><option>

选择框-选择组-选择项

<fieldeset><legend>

构建一个框，legend为此框名

<output>

H5新增    (IE不支持) 定义一个计算结果

属性暂不做总结，本次任务所用属性与input type类型已在收获中总结。