一：今日份收获

关于布局：

1. position属性：static（默认值）；absolute；relative；fixed；

absolute 绝对定位：通过“left、top、right、bottom”属性进行规定，

在不使用这些属性定位之前，基于原来在文档流的位置停留在文档流之外（仅仅是在那个位置1⃣️）；

但在使用定位后，位置就不是基于文档流时的位置了，会脱离文档流基于body再根据设置的属性确定位置（和relative的关系在下面再提）。

relative 相对定位：通过“left、top、right、bottom”属性进行规定，基于其正常位置进行定位。

fixed 绝对定位：通过“left、top、right、bottom”属性进行规定，基于浏览器窗口（或手机等终端窗口）进行定位。

注：position和fixed的区别：

 前者根据body进行定位，向下滑动窗口滑轮不会一直停留在屏幕中。

后者根据浏览器窗口进行定位，随你怎么滚动会一直停留在屏幕中。

1⃣️这里是上文提到的absolute和relative的关系

当一个元素position属性设置为absolute后：

当其父元素及其祖先都为static时，这个元素会基于body进行定位；

当其父元素或者其祖先有relative属性时，这个元素会基于关系最近且具有relative属性的元素进行定位。

2. 在了解position时 顺便粗略了解了一下flex布局。简单收集了下资料，把我在这个任务中用到的放在这做个参考，也好便于复习。

flex布局：display：flex；

    采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

• flex-direction　　容器内项目的排列方向(默认横向排列)　　
• flex-wrap　　容器内项目换行方式
• flex-flow　　以上两个属性的简写方式
• justify-content　　项目在主轴上的对齐方式
• align-items　　项目在交叉轴上如何对齐
• align-content　　定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

2.1 flex-direction

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

2. justify-content

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

关于表格

1. input的基本用法

<input type="" name="" size="" maxlength="" placeholder="">

type 输入参数类型

name 该文本输入框名称

size 输入框长度大小

maxlength 输入框中允许输入字符的最大数

placeholder 输入字段预期值的提示信息

2. button的基本用法

3. input 样式设置

去掉输入框的默认的样式：

-web-kit-appearance:none;

-moz-appearance: none;

font-size:输入框中字体的大小

height:输入框的高度

border-radius:输入框的圆角的大小

border:输入框边框的粗细和颜色

color:输入框中文字的颜色

outline:输入框点击的时候出现的边框去掉

text-align:输入框中文字的位置

display:block; 将输入框设置为块级元素

二：task4整体思路

1. header头部

开始是 将注册、登陆、关闭装在3个div里，利用 justify-content：space-between；放置在页面顶部。

后面有看到说随便拿掉一个部分后，其他部分要不变。以上做法页面和任务上是一样的，但是当拿掉其中的一个div后页面会变化。

所以后来改用fixed绝对定位。

2.input部分

将图片和input标签分别放在两个div里，利用relation相对定位使其在竖直方向上剧中，再修改padding、margin

3.footer部分

button标签，修改样式。

4.小尾巴～

忘记密码 装div里，利用 flex-direction: row-reverse；改变水平方向起始位置为右。搞定！