今天完成的事情：

今天主要完成任务四，学习包括任务四中的知识点，包括relative, absolute, fixed 的区别，对绝对定位的深入理解，表单内容里的相关知识点，比如input和button，文本框里如何设置文字，及文本框如何自适应等。

明天计划的事情：

任务四提交给师兄审核，需要修改则进行修改，开始任务四的学习。

遇到的问题：

在设置两个文本框时，一直不知道怎么设置成隐藏边框，因为给整个input设置div的类选择器（class=”text”）后再调整格式，是作为整个元素块进行调整的，无法调整对于的文本框，后来才看到师兄做任务的写法是将类选择器放入input中（class=”input-box1”），结果一试确实可以设置边框了。登陆那个按钮也是遇到这个情况，再button外加div后设置类选择器再设置样式，按钮就是默认按钮的灰色小按钮，无法设置样式，后来直接设置button样式就解决了，现在有一种思想是设置样式就设置div，实际很多时候设置不了元素本身的样式。

另外设置密码和手机图标和后面的小竖条时，本来是想分别截图手机和小竖条的，但是没有找到方法放他们的位置，后来想到截图成一个来设置，比较方便，不知道两个分开是否有方法设置。

还有设置绝对定位时的高度是根据原图估算的，文本框的长宽始终对不上后面的盒子模型，只能不断调试，使文本框符合它后面盒子模型的宽高

收获：

1、学习css如何实现垂直居中

https://www.cnblogs.com/zhouhuan/p/vertical_center.html

像任务四中头部登陆这两个字的居中办法就用了绝对定位结合margin: auto，还有使用 line-height 对单行文本进行垂直居中。

2、学习css的position:absolute绝对定位的特性：

绝对定位的元素以前所占空间会释放，脱离普通文档流，在层级上是最上层的，所以会覆盖html里它的下面的元素。

用途：不用relative限制absolute,（有利于样式的复用），a.实现一个小东西在一个块上。

绝对定位的元素有位置跟随的特性，即跟随它html结构里的上一个元素(“ ”也可以)。

用途：a.用于布局写某个小东西在某元素的后面（上下左右均可），用margin调距离。

绝对定位后元素出现的位置和没定位时一样，可用top,right,bottom,left,margin来调整（负margin也好，兼容到IE6）。

用途：想去哪去哪，但是会覆盖其他的元素。注意事项：用一些标签会有间距，可以在写html结构时让两个标签无间距<img></img><i></i>.

绝对定位的限制，受限于absolute,relative,fixed。

绝对定位影响浮动，若加在父元素上，则内部元素浮动无效，同级则不影响，也可以去除元素自身的浮动。注意事项：和浮动的区别，浮动的遇到文字不会覆盖。浮动的历史为文字环绕效果。

绝对的布局，高100%，头和脚高固定，高有溢出部分出现滚动条。

 3、边框如何实现自适应宽度

width中一个calc属性可以用这个来实现宽度的自适应比如在input样式中写如下样式width:calc(100%-X);X为以占宽度

4、在input中既隐藏边框，也隐藏轮廓的设置，css代码如下:

input{
    border: none;
    outline: none;
}

5、学习表单提交中的input、button、submit的区别https://blog.csdn.net/ldc5306590/article/details/54376417

这个再做任务四时就发现好几种设置都是有提交按钮的作用，到底该用那个，最终看到上面这个文章选择了：button[type=submit]