今天完成的事情，找护工ui图做完，任务1-4的深度思考，更新weiki。

提交成果的时候，被师兄打了回去，三个地方存在问题需要去改。

页头部分，放弃margin挤压效果，重新进行布局。

改动1

  两个子级元素盒子放在一起，用一个父级元素包裹。

在改动的时候，vw是我接触的新的知识，自适应布局，vw指的是可视窗，意思就是浏览器你能看到的区域就是可视窗区域。

vw指的是可视宽度，vh是可视高度，这里我们用到宽度就行了，vw还有v min比vw  vh小的单位，vmax比vw vh大的单位。

为了达到图下的挤压效果，我用vw单位把盒子空间用vw平分，用flax布局两端对齐。

改动成果

改动2内容部分，我用了mian标签去做，师兄问我main是什么。查了资料mian是最主要的部分，当初随便看了一眼css命名就瞎用了。内容部分应该使用content ，内容才对。

改动3，页尾的图标距离底部太近了，一点距离也没留。所以就调整一下页尾距离的单位。

任务1任务总结。

任务总结，第一次接触盒子模型，被搞得头有点大，好多东西根本就看不懂到底再说什么，很难去理解，css的盒子模型到底是什么，

后面通过问师兄，自己找教程，尝试把九宫格给做了出来，了解float，与长度width，height。如何去用浏览器调试代码，圆角属性。

今天的收获，学会如何去用vw单位，一定要理解ui图的意思再去布局。

明天计划，完成任务5。

深度思考

为什么html文件里面开头要用<!Doctype>？

.html文件里面的开头的Doctype，是标准的通用标记的文档类型声明。

<!DOCTYPE> 的声明必须写在html文档里面的第一行里面。

这样可以避免浏览器去用自己的怪异模式去解析文件，算是一种通用的标准。

如果文档里面不加入，<!DOCTYPE>的话，浏览器会根据自己的方式去解析文件。

盒子模型是什么？

2.盒子模型是css页面设计中最常用的方式，可以用来布局文字，图片等等内容。

盒子模型由四个属性组成，内容contnet，内边距，padding，边框border，和

外边距margin组成，边框就是盒子的本身，每个html标记都可以看做一个盒子，

盒子里面可以容纳盒子，因为css里面盒子本身具备弹性。

margin与padding的区别在哪里？

1，margin，是盒子模型里面的外边距，能够接受任何长度单位

包括百分百与负值。可以改变盒子的上下左右的边距，通过移动间距可以改变盒子模型的位置。

2，padding和margin不同，不能接受负值，因为padding定义了边框与元素内容之间的间距。

3，margin与padding的区别就是，padding是内容与边框之间的间隙，margin是模块与模块之间

的间隙。

css任务2总结

对于我这种之前只会在应用商店下载使用的人来说，真的是一种考验。

github可以完美的把我写的代码放入上去，而且与webstorom完美结合，我中间的

任何一次细微的改动，一个标签一个代码都可以记录在案。也可以和其他程序员协作开发

设计。

注册github账号，下载git，在github上创建分支，配置git，右击鼠标

选择git，然后再运行命令上面绑定邮箱账号与姓名。

绑定webstorom，右击要提交的代码文件，git，选择add。

再次右击鼠标选择文件，git，提交。在github上查看提交的代码

，并查看成果链接。

配置github，使用github是前端开发人员的重要组成部分，但是

没啥太大的理论知识，熟能生巧尔

CSS任务3总结

拿到ui图的时候，简直一脸懵逼，根本就不知道自己该从哪里开始，师兄告诉我就把内容看成无数个小盒子，把他们放到该去的位置上去。

怎么去切图，怎么去布局，后面自己查资料，问师兄可算是做出来了。

深度总结

1.photoshop如何切图？

2.如何让字体始终保持居中？

css里面设置文本居中属性即可，text-align- center

为什么要在css部分加入html:height:100%;呢？

float-right右浮动，两边距离保持一致就可以自适应了。

选择器的优先级？

第四等级：代表 标签 | 伪元素 选择器，如 p | ::after,election；

关于什么时候用，margin好，什么时候用padding好更好？

任务4总结

任务4里面的页头设计，可算是把我给折腾坏了，因为既要让页头的内容保持垂直居中的同时也要保持水平居中。

而且还要做个输入框，我用文本居中与行高把他做出来了之后，有用flax做了一遍，发现flax真的很好用。

深度思考

css定位分为哪几种？

绝对定位，固定定位，和相对定位。

他们三个都属于脱离文档流，

三种有什么区别？

绝对定位，

position: relative;

绝对定位之后，就不在区分块级元素与行内元素之别了，

不需要display block就可以设置宽高。

固定定位，

固定定位一般用在页头，页尾的布局居多。

无论页面如何滚动，盒子显示的位置，保持不变。

相对定位

类似于float效果，元素保持自己所在的位置拖动的时候，可以移动。

自适应的效果。

有那些css属性可以设置百分比？

定位：top,right,bottom,left; 

盒模型：height,width,margin,padding, 

背景：background-position,background-size(css3), 

文本：text-indent，

字体：font-size;

各个属性使用详细：

top,right,bottom,left:全兼容,

height：基于包含它的块级对象的百分比高度。

width：基于包含它的块级对象的百分比宽度。

margin：百分数是相对于父元素的 width 计算的。

padding：百分数是相对于父元素的 width 计算的。

如何页头的文本，即让他垂直居中，且水平居中，

第一种办法是flex弹性布局。

display：flax

justify-content-center

align-content-center

第二种

text-align-center

行高 li height