今天完成的事情：（还有昨天）

  1.下载任务资源，布局header，先是切back图标，然后放到页面上，float图标到left；用div把title（个人主页）装起来，并让height和line-height的值相同，垂直居中；background-color之后，header布局完成；

   布局footer，要让footer紧贴底部，用position;fixed固定，然后设置两个bottom，为了美观，border-radius做了圆角，调整好边距，footer布局完成；

   把用到的图标切好，开始布局页面上半部分，先插入背景图，并在css样式中设置宽度和高度；再在背景图上插入头像，设置图片大小，在div中插入姓名和居住地址的文本；

   布局页面的下半部分，个人主页的详细信息，用了定义列表：<dl>，<dl>没有属性，子元素是且只能是<dt>和<dd>，<dt>列表的标题，这个标签是必需的；<dd>是列表的列表项，如果不需要，可以不加。然后在div中加入文本，调整边距，中间的分隔符可以用盒子的border-right显示出来，插入水平线用<hr>。文字垂直居中可以用padding来调整。

  2.理解【深度思考】中的问题

    （1）css可以绘制哪些常见的形状？

       正方形:设置宽高，用border就可以；

       圆形:设置宽高，用border-radius切圆角50%。

       近40种图形：https://blog.csdn.net/aerchi/article/details/52909158

    （2）如何理解vertical-align和line-helght？

       vertical-align：使行内元素的基线相对于该元素所在行的基线的垂直对齐，默认值baseline:元素基线与父元素基线对齐；vertical-align支持很多属性值，包括关键字值，长度值，百分比值；

       vertical-align是垂直对齐，可以实现一些垂直方向上的对齐效果，有时候vertical-align属性不起作用，这是因为只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。

       line-height：行高是指文本行基线baseline之间的垂直距离，可以设置数字和百分比值；数字可以直接被继承，然后在计算行高，而百分比是先计算出行高，在以px继承。

       参考：https://blog.csdn.net/menggx1/article/details/80147322

    （3）解释css3的flexbox（弹性布局盒模型）以及适用场景？

       Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局,行内元素也可以使用Flex布局。flex布局非常灵活，任一容器都可以指定为flex布局。块状只需要display属性规定为flex即可。 行内元素也可以指定为flex布局，将display属性设置为inline-flex。

       适用场景：布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。而Flex布局，可以简便、完整、响应式地实现各种页面布局。但是设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

     （4）title与h1、b与strong、i与em、img的alt与title、src与href有什么区别？     

title与h1的区别: 
定义：title是网站标题，h1是文章主题

作用：title概括网站信息，可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的，是显示在网页Tab栏里的；h1突出文章主题，面对用户，更突出其视觉效果，指向页面主体信息，是显示在网页中的

b与strong,i与em的区别: 
但从视觉上效果观看b与strong、i与em是没有区别的,唯一区别是搜索引擎检索的时候搜索引擎可以识别strong、em标签、而不能识别b与i标签

建议：为了符合CSS3的规范，b应尽量少用而改用strong ,i应尽量少用而改用em

img中的alt与title属性区别: 
alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方

title属性是在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，有点类似jQuery的hover

src与href的区别: 
href，.是超文本引用，指向需要连结的地方，是与该页面有关联的，是引用。在 link和a 等元素上使用。 
src是指向物件的来源地址，是引入。在 img、script、iframe 等元素上使用 
src通常用作“拿取”（引入），href 用作 “连结前往”（引用） 

来源：https://blog.csdn.net/vivian_1122/article/details/80235052

    （5）如何使用IconFont？

      阿里的iconfont矢量图标是是图标库，可以选取适用的图标；

       使用教程：https://blog.csdn.net/paditang/article/details/70141040

    （6）HTML中dl、ul、ol用哪个比较好？

       <dl>标签：有层级关系

          dl是定义列表

                       <dl>
                       <dt>我是头</dt>
                       <dd>我是内容</dd>
                       <dd>我是内容</dd>
                        </dl>

       <ul>标签：无序，无缩进

                         ul是无序列表

                        <ul>
                       <li>可以随意放置</li>
                       <li>可以随意放置</li>
                       <li>可以随意放置</li>
                       </ul>

       <ol>标签：有标号，有序，无缩进

          ol有序列表

                        <ol>
                        <li>我是第一</li>
                        <li>我是第二</li>
                        <li>我是第三</li>
                        </ol>

明天计划的事情：

     1.看一下css代码规范，以后尽量规范代码

     2.开启任务六，简单完成页面布局

遇到的问题：

     1.底部的footer定位以后，会覆盖掉内容

        有三种解决方法：（1）Javasrript解决（没看，以后再接触）

                  （2）给body加上padding-bottom

                  （3）增加同级占位符<div>

     2.在{自我介绍}那一栏里，用了两个div，但是高度无法满足自适应，而且内容不能对齐

          解决方法：用了css3里面的flex布局，可以满足自适应

                align-items: center 可以将两个盒子内容垂直居中对齐

     3.插入的背景图在浏览器宽度变大的时候会变形

          css3中增加的新background属性会让图片随着窗口宽度的变化等比例放大；

         贴上代码：

         background-repeat表示不会重复显示

         background-size表示等比缩放

         height表示图片高度

  有一篇文章写到了等比缩放的问题：http://yijiebuyi.com/blog/260c099f3462623f6c1e4425e3bd8664.html

收获：综上所述