今天完成的事情：

一、visibility和display的区别

visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。

display: none----将元素的显示设为无，即在网页中不占任何的位置。

注意：在现实中大多数人的习惯是使用display属性，当决定用display：none来隐藏一个元素时，必须知道其它内容将填充到该元素留下的空白位置，从而改变页面的布局。

二、visibility的值有：

（1）visible:可见

（2）hidden:隐藏

（3）collapse:当一个元素的visibility 属性被设置成 collapse 值后，对于一般的元素，它的表现跟hidden 是一样的。但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟 display: none 一样，也就是说，它们占用的空间也会释放。

整理来源：https://blog.csdn.net/gongze_yan/article/details/84789160

https://blog.csdn.net/u010678947/article/details/42047351

三、Zoom属性

Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支撑。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小感化，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。

注意：zoom在非IE浏览器中表现为支持放大或者缩小，但是由于这个属性是一个不标准的css属性，因此一般在非IE浏览器中不用zoom来实现div 的缩放效果，现在要放大或者缩小直接用css3的transform属性。

整理来源：https://blog.csdn.net/shmily_lsl/article/details/79677627

四、task4资料整理

1、HTML 5 <input> type 属性

https://www.w3school.com.cn/html5/att_input_type.asp

2、HTML 5 <input> 标签

https://www.w3school.com.cn/html5/tag_input.asp

https://www.tuicool.com/articles/7V3eqan

3、flex布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool（语法）

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html（实例）

6、position属性static、fixed、absolute和relative的区别和用法

https://www.cnblogs.com/theWayToAce/p/5264436.html

7、边款属性

https://www.cnblogs.com/mingerlcm/p/10886247.html

五、 CSS固定定位fixed

“position:fixed;”是结合top、bottom、left和right这4个属性一起使用的，其中“position:fixed;”使得元素成为固定定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。

资料来源：https://www.baidu.com/link?url=CxjpcZQg-MM0Ffmum32HBo_lXPLZ0ViX16gqeIBJ90dN6XeVVcetRJqgFhh1sF4D-Kep3NF7YnZZQ7F3Jutwl_&wd=&eqid=9282f87f0000b51d000000065da5373f

明天计划的事情：1、完成task4剩下部分。

2、把之前task3部分的代码优化下。

3、进入task5部分。

遇到的问题：1、两个input，旁边的小图标只能添加到一个input里，第二个没有显示。发现是设置图片样式时，添加top之后就会重叠，top需要分别给不同的高度。

2、怎么设置字符间距，解决办法：text-indent设置抬头距离css缩进，letter-spacing来设置字与字间距_字符间距离，字体间距css样式。

3、点击输入框input显示外边框，解决办法：使用outline:none。

4、输入框与图标之间边框的设置(未解决)

收获：对flex的应用有了一定的加深，flex在布局中简化了代码