发表于： 2017-03-31 01:08:56

今天完成的事情：

1.把absolute、relative、flex和float的概念和区别又仔细看了一遍，明白了子元素绝对定位时，会根据祖（父）元素是否采用absolute或者relative定位而进行相应的定位，如果祖（父）元素都未有，则会根据body元素进行定位。

Absolute

俗称的绝对定位，绝对定位是相对而言的，怎么理解呢？应用了position: absolute的元素会循着节点树中的父（祖）元素来确定“根”，然后相对这个“根”元素来偏移。如果在其节点树中所有父（祖）元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移。应用了position: absolute的元素会脱离页面中的普通流并改变Display属性（重点）！

2.明白了对于行内元素进行relative定位时，并不会改变行内元素的display，但是进行absolute定位时则会改变它的display，变成block。

3.明白了块状元素在relative和默认情况下width的宽度都是100%，但是进行absolute定位后，宽度将会变成auto,而且受父元素宽度的影响。

1）块状元素在position(relative/static)的情况下width为100%，但是设置了position: absolute之后，会将width变成auto（会受到父元素的宽度影响）。

2）元素设置了position: absolute之后，如果没有设置top、bottom、left、right属性的话，浏览器会默认设置成auto，而auto的值则是该元素的“默认位置”。即设置position: absolute前后的offsetTop和offsetLeft属性值不变。
特殊情况：

Firefox的话会直接将top、left设置成offsetTop和offsetLeft的值而非auto。
IE7下的表现更类似于float，会附加到父元素的末尾。

4.了解了表单元素的几种常用属性以及input的常用type。知道了如何在表单文本输入框内加入提示语，而且改变提示语的样式。附上链接：

如何在文本框内加入提示语：

http://blog.csdn.net/u012248761/article/details/51447435

http://www.cnblogs.com/tzdy/p/5969553.html

5.了解了元素display的三种类型：block、inline和inline-block，知道了他们的概念和区别。

总体概念

block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。
大体来说HTML元素各有其自身的布局级别（block元素还是inline元素）：
- 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
- 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 P 元素，只能包含inline元素，而不能包含block元素。
一般来说，可以通过display:inline和display:block的设置，改变元素的布局级别。

block，inline和inlinke-block细节对比

display:block

1. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
3. block元素可以设置margin和padding属性。

display:inline

1. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
2. inline元素设置width,height属性无效。
3. inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

1. 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

补充说明

一般我们会用display:block，display:inline或者display:inline-block来调整元素的布局级别，其实display的参数远远不止这三种，仅仅是比较常用而已。
IE（低版本IE）本来是不支持inline-block的，所以在IE中对内联元素使用display:inline-block，理论上IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表象。

6.其他的零散小知识点：

+++怎样增加字与字之间的间距？

使用字与字的间距可设置letter-spacing属性实现，例如：
1、p{letter-spacing:15px;}即表示<p>这是一段文字</p>标签里的文字间距为15px。
2、另外，该属性允许使用负值，这会让字母之间挤得更紧，比如p{letter-spacing:-2px;}
3、所有的浏览器都支持letter-spacing属性。

+++如何让元素居中到父元素中间？

使用

vertical-align:middle;

就可以搞定。

-----------------------------------------------------------------------分割线--------------------------------------------------------------------------

明天计划的事情：开始任务五的学习，并且加深今天所学知识的印象，及时复习和巩固。

遇到的问题：

1.特意保存了一份我开始写任务四header部分的代码，无修改的，然后用浏览器一打开，惨不忍睹。

<!DOCTYPE html>

<html>

<head>

<title>loginpage</title>

*{margin:0;padding:0;}

html{font-size:10px;}

.wrap{

background:#eff0f4;

width:100%;

}

.header{

background:#5fc0cd;

color:white;

text-align:center;

position:relative;

font-family:黑体;

height:3.2rem;

font-size:2rem;

}

.header span{

position:absolute;

top:0.65rem;

left:1rem;

}

strong{

padding:0.65rem;

}

position:absolute;

top:0.65rem;

right:1rem;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

我今天一整天都是在修改自己的代码，先从header开始，一直往下到表单，发现了很多自己的不足，首先就是没有清晰的思路，然后就是写代码的时候东写一点，西写一点，没有一个条理性。

今天本来有很多问题的，但是自己都通过百度解决了，明天开始我要记录好问题和解决方法。

收获：完成了任务四，代码虽然不精简，但是最终效果跟任务还是差不多的,附上我的代码，请师兄们帮我看看怎么优化，让代码精简一点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <title>loginpage</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        html{font-size:10px;}
        .wrap{
            background:#eff0f4;
 width:100%;
 }
        .header{
            background:#5fc0cd;
 color:white;
 text-align:center;
 position:relative;
 font-family:黑体;
 font-size:3.2rem;
 height:5.8rem;
 width:100%;
 }
        .header span{
            position:absolute;
 top:1.3rem;
 left:1.2rem;
 }
        .login{
            position:relative;
 top:1.3rem;
 font-weight:bold;
 }
        p{
            position:absolute;
 top:1.3rem;
 right:1.2rem;
 }
        ul{
            margin-bottom:7rem;
 list-style-type:none;
 margin-top:1rem;
 }
        li{
            background:white;
 margin-top:1rem;
 padding:3% 0;
 }
        label{
            display:inline-block;
 width:5%;
 padding:0 3%;
 text-align:center;
 vertical-align:middle;
 }

        img{
            max-width:100%;
 }
        input{
            border:0;
 border-left:solid 1px #bfbfbf;
 outline:none;
 font-size:3.2rem;
 width:85%;
 vertical-align:middle;
 }
        input::-webkit-input-placeholder {
            color:#bfbfbf;
 -webkit-transition: color.5s;
 }
        input[type=button]{
            padding:3% 0;
 background:#5fc0cd;
 font-family:黑体;
 width:100%;
 color:white;
 vertical-align:middle;
 border:none;
 }
        .tips{
            color:#5fc0cd;
 font-size:3rem;
 text-align:right;
 margin:1rem 1rem;
 width：100%；
 }
    </style>
</head>
<body>
<div class="wrap">
    <div class="header">
        <span>注册</span>
        <div class="login">登录</div>
        <p>关闭</p>
    </div>
<form>
    <ul class="list">
        <li>
            <label for="username">
            <img src="5.png">
            </label>
            <input type="text" maxlength="11" name="phonenumber" id="username" placeholder="&nbsp&nbsp请输入手机号">
        </li>
        <li>
            <label for="pw">
            <img src="6.png">
            </label>
            <input type="password" name="psw" id="pw" placeholder="&nbsp&nbsp请输入密码">
        </li>
    </ul>
    <input type="button" value="登&nbsp&nbsp录" onclick="alert('密码错误')">
</form>
</div>
    <div class="tips">忘记密码？
 </div>
</body>
</html>