今天完成的事情：

1.用最笨的方法完成了任务四。

2.初步接触了解input标签。

明天计划的事情：

1.用文档流重写任务四。

2.完成后学习flex布局。

遇到的问题： 

1.对position概念不清晰，导致早上做任务四布局时遇到困难。

2.用table-cell实现居中不理想，使用条件和使用方法没有掌握。

收获：

1.强行用absolute绝对定位写完任务四，同时也了解到绝对定位布局的不足。

position:absolute滥用，其left, top属性值也滥用，relative属性值滥用，z-index也滥用。

可能会给后来的扩展和维护造成很大的麻烦。

absolute属性的出现本来是想把页面搞得像photoshop那样，一个图层一个图层覆盖似的。

而流动性布局很强调不定宽，不定高，活用标签自身属性，顺其自然，最少干预。

所以一般布局时首先考虑流体布局，在某些情况下需要用到absolute属性再少数添加绝对定位。

2.加深对position的理解。position分为static、relative、absolute、flex。

static为默认方式，无特殊，遵循标准文档流。

relative为相对定位，遵循标准文档流。如果给relative加上top、left。则会相对于原来的位置进行偏移，但占据的空间仍然是原位置的空间。再加上margin后，占据的空间相当于原来位置加margin的大小。

absolute为绝对定位。脱离标准文档流。根据以postion非static方式定位的祖先类元素进行定位。

直接使用top、left相对于祖先类元素的位置进行定位。相当于直接找坐标贴标签。

fixed称为固定定位。也脱离文档流。但是是根据窗口的原点进行定位的。也就是说他不随着滚动条的变化而变化。一般网页的小广告应该就是用fixed定位的。

z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。相当于添加了对线的z坐标。整数值相当于权重。越大越放到上层。

但是这个属性只能给position非static的元素使用。

3.

一开始没明白包裹性。后来发现就是absolute脱离文档流。导致父元素内容变少，可能就会出现高度坍塌。

4.如果想设置用户不可调节窗口缩放比例。那可以在

maximum-scale=1.0, user-scalable=0

意思是最大缩放值为1，用户不可调节缩放比例。

如果想设置input只能输入数字，可以在input设置

onkeyup="value=value.replace(/[^\d]/g,'')" pattern="\d" 

正则表达式，目前看不太懂，不过知道作用，先记下来。

在input style中加入

可以去除边框

placeholder="请输入手机号"

可以设置提示提示信息。如果想改变placeholder的字体样式，可以在style中加入

实现分隔线的方法

设置一个高和分割线长度相等的div，设置右边框的样式即可。

或者切图贴上去。（简单粗暴，但是被师兄狠狠的拒绝了）

5.学到了几种垂直居中的方法：

如果是单行文本，可以设置line-height和容器width一样，就可以使文本垂直居中。

如果是图像等同于单行文本。（亲测可行）

用这个代码也可以使元素居中，但是文本的显示位置会有些偏离，还没有找到原因，定位位置确实居中。

（实现绝对定位元素水平垂直居中）

可以实现水平垂直居中。如果只要垂直居中

top：50%;transform:translate(0,-50%);水平居中同理。

button中设置

可以去除button