今天完成的事情：

完成任务4:

1.布局header,让header紧贴,为header添加内容:关闭超链接 & 登录标题 & 注册超链接,保证3块文字分别居于header的左中右,并垂直居中,

2.布局main,添加表单内容:  输入手机号码的输入框 & 输入密码的输入框 & 登录按钮 & 忘记密码超链接,

3.为表单内容添加样式,通过覆盖表单input和button的原生样式

4.使得页面在不同分辨率不同设备上都能正常显示,

明天计划的事情：

开启任务5:护工个人主页——一个最常见的移动端页面

1.处理更复杂的移动端页面；

2.同样是左中右的布局，可以用很多不同的方法来完成；

3.用 CSS3 的方法更好地拉伸背景图

遇到的问题：

如何让元素垂直居中?

在一个固定高度的元素内垂直居中一行文本,可以把这一行文本的 line-height 设定为该元素的高度。假设元素高度为 300 像素,可以这样写：

text-align: center; /*水平居中*/

line-height:300px; /*垂直居中：行高=容器高度*/

如果想垂直居中其他元素 , 比如图片,可以将容器的 display 属性设定为 table-row ,再设定 （只对单元格有效的）vertical-align 属性为 middle ,比如：

display: table-cell; /*借用表格的行为*/

vertical-align: middle; /*垂直居中*/

text-align: center; /*水平居中*/

怎么让图片根据父级div的大小做自适应？

img {

    width: 100%;

    height: 100%;

}

不管容器有多大，只要将img的宽高设置成100%（这里的100%是相对于父级宽高而言）就能自适应容器大小。

怎么去掉输入框点击后会出现有颜色的边框怎么去掉？

将输入框的样式设置为  *:focus { outline: none; } 或 input {outline:none;}

 页面宽度自适应始终占满屏幕?

        body {

            margin: 0;

        }

将body的外边距设置为0,页面宽度始终占满屏幕

 CSS如何设置placeholder的字体样式 ?

        ::-webkit-input-placeholder {

            font: .16rem "Microsoft YaHei", arial, sans-serif;

        }

CSS如何设置按钮上的字体样式?

        .btn {

            font: .16rem "Microsoft YaHei", arial, sans-serif;

        }

如何给文本输入框旁边添加小图标?

            .input-row input[type=text] {

                /*给文本输入框旁边添加小图标*/

                background: url("icon_mobile.png") no-repeat;

                background-size: 0.6rem 0.5rem;

            }

            .input-row input[type=password] {

                /*给密码输入框旁边添加小图标*/

                background: url("icon_pwd.png") no-repeat;

                background-size: 0.6rem 0.5rem;

            }

收获：

position  属性有  4  个值： static 、relative 、absolute、 fixed 的区别是什么？

CSS 布局的核心是 position 属性，对元素盒子应用这个属性，可以相对于它在常规 文档流中的位置重新定位。position 属性有 4 个值：static、relative、absolute、 fixed，默认值为 static。

静态定位 (static) : 在静态定位的情况下，每个元素在处在常规文档流中。静态定位下的块级元素会在页面中自上而下地堆叠起来。

static 定位提供的是按顺序布局元素的方式。

相对定位(relative)  : 使元素自己相对于原始位置挪动了一下之 外，页面没有发生任何变化。换句话说，这个元素原来占据的空间没有动，其他 元素也没动。

绝对定位 (absolute) : 绝对定位会把元素彻底从文档流中拿出来。元素之前占据的空间被“回收了”。这说明，绝对定位的元素 完全脱离了常规文档流，它现在是相对于顶级元素 在定位。

固定定位(fixed) : 从完全移出文档流的角度说，固定定位与绝对定位类似。但不同之处在于，固定定位元素的定位上下文是视口（浏览器窗口或手持设备的屏幕），因此它不会随页面滚动而移动。固定定位并不常用，最常见的情况是用它创建不随页面滚动而移动的导航元素。

来自于CSS设计指南(第三版)第三章第四节定位

 不同的尺寸单位(px,%,em,rem,vw,wh)的用处？

用于设定字体大小的单位有两种，一种是绝对单位， 比如像素(px)或点，另一种是相对单位，比如百分比(%)或 em。下面我们就解释这两种单位 的区别。

1. 绝对字体大小

使用像素、派卡（pica）或英寸是绝对单位，因此设定多 大就多大，与祖先元素的字体大小无关。使用绝对单位的缺点就是在需 要调整页面所有元素的字体大小时，必须一个一个地修改样式表中的 font-size，相 当麻烦。

2. 相对字体大小

使用百分比、em 或 rem（根元素的字体大小）设定字体大小要复杂一些。如果你给 某个元素设定了相对字体大小，则该元素的字体大小要相对于最近的“被设定过字 体大小的”祖先元素来确定。CSS3 新增了一个相对单位 rem（root em，根 em），这个单位与 em 的区别在于使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一 身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字 体大小逐层复合的连锁反应。

使用fixed的时候，在手机上查看是否会有问题，怎么解决？ 

如果底部输入框软键盘被唤起以后，再次滑动页面，就会看到如 fixed 定位好的元素跟随页面滚动了起来… fixed 属性失效了！

 这是为什么呢？简单解释下： > 软键盘唤起后，页面的 fixed 元素将失效（即无法浮动，也可以理解为变成了 absolute 定位），所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。

 这便是 iOS 上 fixed 元素和输入框的 bug 。其中不仅限于 type=text 的输入框，凡是软键盘（比如时间日期选择、select 选择等等）被唤起，都会遇到同样地问题。来自于Web移动端Fixed布局的解决方案