今天完成的事情：简单做了任务四。了解了位置属性，input，复习行块元素，浮动，rem相关知识。

明天计划的事情：先把任务一的遗留问解决。

                            再复习一下的基础知识，  特别是行块元素，浮动。重点解决“居中”问题。

                            了解弹性盒子display:flex。                           

遇到的问题：居中问题，不能解决，现在进入迷糊状态。
收获：今天有点水很差劲，明天要努力呀。

第一：今天有其他事物耽搁，时间规划不妥善，导致学习时间很短。

第二：工作顺序有所错误，应该先进行对任务一要修改的地方进行修改，而不是开始任务四。以至于俩样都没有完成。

第三：贪多嚼不烂，没有深刻理解基础知识，以至于现在卡到“居中”问题，持持不能解决。

第四：了解了位置属性，ps的图层选择，input。

任务四分析：

1界面：

Body背景色eff0f4【ps获取】，

内容宽度占满屏幕，padding和margin为0

字体尺寸：font-size

2顶端：

用hearder

背景色# 5fc0cd【ps获取】，

内容“关闭”“登录”“注册”用<span>；

它们位置：采用用position: absolute，先统一设置top，再分别设置left。

【思考，未解决】如果用浮动，在“登录”居中应该怎么办。   

下方有空间：margin-bottom；

自适应窗口则用rem单位。（前提设置html字体font-size）

发现问题：“登录”不居中

解决方案：【尚未解决】原因是内容width“登录”也占有宽度，导致左边和右边剩余的空间不同。

首先采用{margin: 0 auto; text-align: center}发现还是没有改变，原因不清

然后设置text-align:center;display:block；还是没用。

3输入框：设置背景background；margin-bottom；padding、borde。

两个子块级元素，

1插入“手机”图片【ps切片获取】【或者图层保存】

2输入框，用input，并设置type、name、placeholder。

左侧有边界，设置border

提示字体input::-webkit-input-placeholder

发现问题： ps切片保存时，太多无光图片。【昨天的问题，当时理解失误】

解决方案：是在保存时，有一个切片的选择。

清晰度问题：PNG-24, 否则默认的 PNG-8 图片是压缩后的清晰度

注：也可以直接选中图层保存，不用切片。选取移动工具，点击要选的图层，在右下角可以看到图层，在哪里右键保存。

发现问题：input不能居中。

解决方案：未解决。

4登录按钮：单独作为一个块状元素。设置盒子和“登录”颜色大小

发现问题：居中

解决方案：未解决

5“忘记密码

右侧：”float:right

         字体大小颜色：font-size、color

基础知识：

1绝对——relative, absolute, fixed 的区别是什么

CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。

absolute【绝对定位】

就是对于原点【父容器的左上角或左下角】进行位置调整。

用横坐标left纵坐标top或bottom。

top：参考点是页面的左上角，就是整个网页的左上角，不是浏览器的左上角。

目的固定了内容在页面的位置，不会变化。

bottom：浏览器-首屏-窗口-尺寸。

就是在浏览器窗口底部为对照，跟随窗口高度增加减少而变动，

目的始终使内容展示在屏幕上。（小广告大多都是如此吧

 relative【相对定位】

每生成一个元素，它就在文中有一个位置（原位置）。

relative，就是相对于“自己原位置”，进行调整，属性有left，right，top，bottom。

fixed【固定定位】

就是相对浏览器窗口进行定位。无论页面如何滚动，这个元素显示的位置不变。

和绝对定位的bottom有相似处。

用途1：网页右下角的“返回到顶部”用途2：顶部导航条

2<input> 标签用于搜集用户信息

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

Type【button、checkbox、file、hidden、image、password、radio、resetsubmit、text】

Name【定义 input 元素的名称】

Pattern【规定输入字段的值的模式或格式。】例 pattern="[0-9]" 表是 0 与 9 之间的数字。

Placeholder【规定帮助用户填写输入字段的提示。】

input::-webkit-input-placeholder【设置Placeholder属性】

3浮动清除：

overflow:hidden隐藏溢出，清除浮动

clear:both清除浮动

4元素的display，以及块级元素，和行内元素。

CSS规范的规定，每一个网页元素都有一个display属，确定该元素的类型。

比如div元素，它的默认display属性值为“block”，

而span元素的默认display属性值为“inline”，称为“行内”元素。

块级元素：据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子

行内元素：自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。

5em和rem区别和选择

em 和 rem都是灵活、可扩展的单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。即运用em rem 前，要设置字体尺寸：font-size

rem 单位翻译为像素值是由 html 元素的字体大小决定的。

此字体大小会被浏览器中字体大小的设置影响，除非写一个具体单位。

em 单位转为像素值，取决于他们使用的字体大小。

此字体大小受从父元素继承过来的字体大小，除非写与一个具体单位。

rem主要目的：确保无论用户如何设置自己的浏览器，我们的布局都能调整到合适大小。

根据浏览器的字体大小设置缩放的任何尺寸。

包括heights，widths，padding，margin，border，font-size，几乎包括布局的每部分。用rem 图像会自动缩放。rem用于盒子模型、字体排版这方面