一、今天完成的事情：

1. 任务6过程中感觉很多知识点只停留在会用（蒙）的层面，没有真正吃透，重新系统复习position定位布局知识，结合任务练习并测试，提高了对position的熟练度。

学习资料：

CSS深入理解之relative（https://www.imooc.com/learn/565）

CSS深入理解之absolute（https://www.imooc.com/learn/192）

2. 学会下拉选单select标签的应用

3. 元素居中的方法总结：

1）margin：0 auto；水平居中

     margin：auto 0；垂直居中

     若元素脱离文档流，无效。

2）text-align: center; 水平居中

     写在父级元素上，则目标元素（行内元素inline、inline-block）水平居中。若元素脱离文档流，无效。

3）line-height：“父级容器height”；垂直居中

     仅用于单行文字的垂直居中。

4）假设目标元素宽度20px，先将父级元素relative定位。目标样式如下：

      {position：absolute；

      left：50%；

      top: 50%;

      margin-left:-10px;

      margin-top:-10px;}

      缺点：无法自适应，如果元素大小发生变化，百分比也变化，比例失衡。

5）给目标元素加个relative定位父级，偏移量为父级宽/高的50%；再给目标元素absolute定位，反方向偏移自身宽/高的50%；

     .wraper{

                   position:relative;

                   left:50%;

                   top:50%;

                  }

     .child{

               position:absolute;

               right:-50%;

               bottom:50%;

              }

6）给目标元素加个relative定位父级；再给目标元素absolute定位，left, top, right, bottom偏移量均为0，设定宽高，margin：auto；则元素水平、垂直居中。

     .wraper{

                   position:relative;

                  }

     .child{

               position:absolute;

               left: 0; right: 0;

               top:0; bottom:0;

               width:10%;

               height:10%;

               margin:auto;

              }

要点：目标元素偏移量对立的属性值同时为0，给定宽高，margin：auto。

二、明天计划的事情：

制作雪碧图，学习bootstrap，完成任务六。

学习资料：

浅谈 CSS Sprites 雪碧图应用（https://zhuanlan.zhihu.com/p/23873229）

CSS Sprite雪碧图应用（https://www.imooc.com/learn/93）

玩转Bootstrap（http://study.163.com/course/courseMain.htm?courseId=1003948065）

三、遇到的问题：

fixed定位header，原本忘记设置"top: 0;"，虽然也在页面顶部，但给内容区域content设置"margin-top: 50px;"时（为了内容区域下移，避免被脱离文档流的header覆盖），header也跟随内容区域下移了50px，如图。

设置top:0后解决，但不清楚原因。header固定定位后脱离文档流，就算不写偏移量，为什么会被兄弟元素content的margin-top影响，跟随content位移？百度也没找到解释。

四、收获：知识点

1. 默认样式优先级>继承样式优先级。例如：a标签不能继承body（父级）的text-decoration和color，因为自带默认样式。

2. 测试出select标签样式的几个特性：

   1）select标签是内联块标签；

   2）select标签不能继承body（父级）的任何属性;

   3）select标签默认样式margin:2px; font-size:13px; font-family:arial; color:black; border:1px solid darkgray;

   4）用复合写法设置border样式时，必须设置style属性值，否则边框会消失；在此前提下：

         如果未设置width属性值，则默认的边框宽度1px失效，边框宽度变成width:3px；

         如果未设置color属性值，则默认的边框颜色darkgray失效，边框颜色跟随字体颜色。

   5）如果单独设置border-width、border-style、border-color属性值，则未设置的属性为默认样式。具体如下:

        border-width:3px; 则style:solid; color:darkgray;

        border-style:dashed; 则width:1px; color:darkgray;

        border-color:blue; 则width:1px; style:solid;*/