今日完成的事

1. 基本完成了任务八和任务九，还有些细节需要修改。

2. 在做任务的时候发现三个页面的头部（客服热线部分+导航栏）和footer部分都是一样的，无论是HTML还是css代码，都可以重用。便将header和footer部分的css代码整理成单独的一个css文件，分别嵌入3个html文档中。

3. 结合张鑫旭大神的书复习了一下以前的知识点：

    1).  css里面的元素通常分为块级元素和内联元素。块级元素(block-level element)和display为block的元素并不是一个概念，例如<li>的默认display值是list-item；而table元素的display值为table；他们虽然display不是block，但却都是块级元素，符合块级元素的基本特征。

         可利用块级元素的换行特性，配合clear属性清除浮动；

          .clear:after{

                 content: "";

                 display: block;  //也可以是table或者list-item

                clear： both;

           }

    2). 解决了一个困扰多时的问题，当div中的文字单行时居中显示，当文字多行时居左显示（以前一直使用媒体查询）：

          .father{

                text-align: center;

           }

          .son{

               display: inline-blcok;

                text-align: left;

           }

   3). 在做任务当中，经常遇到的一个问题就是伪元素设置了宽度之后，如果再添加padding或者border，会导致元素的宽度增加，原因众所周知，标准盒模型中，width的值是直接作用于content的，如果有另外的border或者padding之类的会直接导致元素宽度的增加，css权威指南上也有一句话可以说明这种情况：一般情况下，padding左右+content width+margin左右=父元素的width。解决方法如下：

        a. 宽度分离： 即在外层嵌套一个父元素，设置父元素的宽度，而后设置子元素的boder和padding，使子元素的宽度达到自适应。

        b. box-sizing；IE8支持，但需加上-ms-私有前缀，IE9及以上无需添加。

            box-sizing: content-box    默认值

            box-sizing: padding-box    firefox曾经支持

            box-sizing: border-box     全线支持

    4). 莫名其妙的空白节点。在<div><span></span></div>这样的HTML结构中，div会存在一个固定高度但宽度为0的空白节点，css规范中提及，这个空白节点其实也是一个盒子，只不过是个假想盒，名为“strut”，中文直译为“支柱”，存在于每个行框盒子前面，同时具有该元素的字体和行高属性的0

宽度的内联盒（只存在于HTML5中）, 一般设置font-size为0即可解决，同时也可解决HTML文档中由换行符带来的空白节点。

    5). 替换元素是通过修改某个属性值呈现的内容就可以被替换的元素。例如<img>, <object>,<video>,<iframe>或者表单元素<textarea><input>。

         替换元素的一些特性：

           a. 内容的外观不受页面上CSS的影响。内容样式表现在CSS作用域外

           b. 有自已的尺寸。在web中，有很多替换元素在没有明确尺寸设定的情况下，其默认的尺寸（不包括边框）是300*150px；如<iframe>,<canvas>等。

           c. 在很多css属性上有自已的一套表现规则。比较具有代表性的就是 vertical-align属性，对于替换元素和非替换元素，vertical-align 属性值的解释是不一样的。比方说vertical-align 的默认值的 baseline，很简单的属性值，基线之意，被定义为字符 x 的下边缘，但是到了替换元素那里就不适用了, 因为替换元素的内容往往不不可能含有字符X，于是替换元素的基线就被定义成为元素的下边缘。

明天计划的事 

1. 完善任务八。

2. 继续看css的基础。

遇到的问题

1. 在利用rem+媒体查询设置页面的html的font-size时，一直使用的计算方法是font-size = 不同的屏幕的尺寸/UI图的尺寸*625%；意思就是假设页面是以640的宽度（指设计图宽度）去切的，那么屏幕宽度为384的html的font-size的计算方法就是 384/640 = 0.6，384是640的0.6倍，所以384页面宽度下的font-size也等于它的0.6倍，这时384的font-size就等于12px。在不同设备的宽度计算方式以此类推，而本次的设计图是1920宽度的，任何一种屏幕宽度比上1920得到的结果都很小，所以套用这种方法得到的font-size也非常小，因此当屏幕缩小到一定程度时，页面会挤成一团，观感很不好。不知道是我操作有问题还是我对这块知识点的理解有问题。我一直都没整明白这个，求师兄解惑！

2. boostrap里面的.col-有15px的padding，每次预想的布局出现偏差，大部分都是因为它。

收获

如上。