‍‍今天完成的事情：‍‍

完成了任务3

1.通过给div添加属性margin: 0 auto;使div水平居中;

2.通过text-align: justify;让文本对齐

3.CSS3 还可以给元素背景添加多个背景图片 

        div.contact {

            margin: 0 auto;

            height: 5rem;

            margin: 12rem 10% 0;

            background: url(task3_2.png) left no-repeat, url(task3_3.png) right no-repeat;

        }

明天计划的事情： 

开启任务4 登录页——一个最常见的移动端页面 

1.处理常见的移动端页面；

 2.学会改变表单元素样式

遇到的问题： 

1.怎么让页面所有元素同一范围自适应?

将HTML页面body标签的所有子元素放在一个大div中,通过让大div自适应使页面所有元素自适应.

2.怎么让"222222222"和"BJPTTeng"能与它们上面的图片保持一致?

通过float让段落格式分别向左向右浮动,浮动和清除是用来组织页面布局的一柄利剑，这柄剑的剑刃就是 float 和 clear 属性。浮动的意思就是把元素从常规文档流中拿出来。一是可以实现文字绕排图片的效果，二是可以让原来 上下堆叠的块级元素，变成左右并列，从而实现布局中的分栏。这里通过浮动让原来 上下堆叠的两个块级元素变成左右并列.

        p.qq {

            color: #ffffff;

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

            margin: 1rem 10%;

            float: left;

        }

        p.location {

            color: #ffffff;

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

            margin: 1rem 10%;

            float: right;

        }

收获:

1. rem长度单位；

rem是相对于HTML根元素字体大小,这个单位集相对大小和绝对大小的优势于一体,通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字 体大小逐层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。 这些浏览器会忽略用 rem 设定的字体大小。下面就是一个例子：

 /*IE8 及之前版本的 IE 浏览器使用 14 像素*/ p {font-size:14px; font-size:.875rem;}

2. 网页宽度自动适应手机屏幕宽度

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

3. margin:0 auto 与 text-align:center 的区别

基本概念：

1.text-align: 属性控制着文本在水平 方向对齐的方式; text-align 属性只有 4 个值，left( 左对齐)、right(右对齐)、center(居中对齐) 和 justify(两端对齐)，控制着文本在水平 方向对齐的方式。其中，center 值也可以用来在较大的元素中居中较小的固定宽度 的元素或图片。 

　　例如: div { text-align: left; }  //文本居左对齐

2.margin 是设置对象四边的外延边距，被称为外补丁或外边距。

　　例如: div { margin: 20px 10px 30px 40px; }  // 表示该div外边距，上20px、右10px、下30px、左40px

区别如下:

1.text-align:center 设置文本或img标签等一些内联对象（或与之类似的元素）的居中。

2.margin:0 auto 设置块元素（或与之类似的元素）的居中。

4.简写写字体属性

            规则一：必须声明 font-size 和 font-family 的值。

            规则二：所有值必须按如下顺序声明。

            1. font-weight、font-style、font-variant 不分先后；

            2. 然后是 font-size；

            3. 最后是 font-family。

例如:p {font: bold italic small-caps .9em helvetica, arial, sans-serif;}