【今天完成的事情】

今天终于完成任务五啦！

本来很早就接了任务五的，但是之前做任务的期间，我发现我的基础真的应该好好补补了，有很多知识点（比较基础的那种）我都不会，比如我经常用的text-align以及vertical-align的适用范围我都不知道，再比如什么是圣杯布局、什么是双飞翼布局、什么是表格布局......，

这些知识我都不认识，而且之前也没有花时间去了解一下，真的太不应该了。所以，就暂时停下了任务，改为去补充更多的基础知识去了

学了html+css基础知识几天（其实还去看了js基础），又看了看之前一直都不看的深度思考栏，今天终于大功告成！（当然，还要看审核过不过）

【明天的计划】

下一个任务要学bootstrap，感觉又是很多内容，啊......啊，又要卡很久了。

【遇到的问题】

突然发现要学的知识挺多的，只能慢慢学了

【收获】

看了之前的深度思考并查阅资料了解后，自然是有一些收获的，下面讲几个我认为需要此时列一下的知识点：

1、viewport

关于viewport，需要知道有个叫layout viewport的东西，这是屏幕的虚拟视区，屏幕相对较窄的移动端浏览器为了能较好的展示电脑端的网页，会将自己的layout viewport设置为一个较宽的值：980px，然后用户就能在移动端上看到一个宽980px的网页，当然，要依靠横向滚动条。那么我们如何利用viewport去做一个适应移动端的网页呢？很简单，只要将 layout viewport设置为浏览器的宽度（实际上并不是你所看到的宽度，这个宽度是 ideal viewport），并且制作网页时的单位设置尽量使用相对单位如百分比之类的就基本上可以了，这些只需要

<meta name="viewport" content="width=device-width, initial-scale=1">就可以完成了，

具体的也可以看一下这篇博客：https://blog.csdn.net/zhouziyu2011/article/details/60570547

2、表单中的input

这才看懂了一些，然后也就成功的看懂了这两个布局的代码。

 （1）两者的相同点：

两者都是要中在前，然后是左和右，三部分都采用浮动，一般是float:left，中间块宽度设置100%，左块和右块则通过设置负边距来使其跑到相应的位置。

 （2）两者的不同点：

圣杯布局左中右三块是在一个大div里，中间部分的内容是靠中间块显示，再通过设置大div的左右padding值来为左块和右块腾地方。然后将左右两个div用相对布局position: relative并分别配合padding属性，以便左右两栏div移动后不遮挡中间div。

而双飞翼布局没有那个大div，但中间部分的内容则是在中间块中加一个子块用于显示中间内容，然后通过子块的左右margin值来为左块和右块腾地方，不需要后续的position:relative的操作。

4、text-align和vertical-align

这两个属性我通常用于水平居中和垂直居中，最近才知道text-align只对块级元素有效，而vertical-align只对行内元素以及单元格有效，我说怎么有时候不管用呢。

5、flex布局

弹性布局，顾名思义，它会想有弹力的块一样，可以排的既整齐又合理，只需要在父元素上display:flex就可以了，而子元素就变成了flex-item，默认为inline-block类型。

用弹性布局的一大好处就是可以轻松地实现居中，它有一个主轴（默认行向，从左到右），一个与之垂直的交叉轴（默认列向，从上到下），当然主轴方向可以改的，用flex-direction就可以设置了。通过justify-content和item-align分别可以设置flex-item在主轴和交叉轴的排列规则。

在flex-item上可以用flex-grow和flex-shrink设置它的缩放规则，用order设置排列顺序等。

这个布局的属性还是挺多的，效果也很好，代码量也不大，就是使用的时候要考虑一下兼容性......

6、表格布局

就是内容都写在表格的单元格里，这种布局我也是才知道，感觉也挺强大的就是代码量有点多，想象一下满屏的tr、td......

7、iconFont

我的天！福利啊！这么多图标，不用再用我那拙劣的ps技术去切图了，哈哈，好东西。

今天最大的收获竟然是iconFont？