今天完成：

初步完成任务六；

了解了clear属性清除浮动的生效范围和正确的书写位置；

明天计划：

了解Bootstrap网格布局；

开始完成任务七；

遇到的问题：

1、ps无法完成请求因为程序错误

解决：photoshop的工作界面后， “编辑”à“清理”à”清理全部”。

2、：hover选择器失效

解决：虽然视觉上看不出效果，但该元素已被拥有定位属性的元素覆盖，无法实现理想中被鼠标悬浮后的效果。

例子：

.one{

              float: left;        

               background: black;

           }

           .pos{

              position: relative;

              background: red;

           }

<div class="one">     </div>

           <div class="pos"></div>

效果

代码：     .one{

              float: left;        

               background: black;

           }

           .pos{

              position: relative;

              background: red;

           }

<div class="pos"></div>

<div class="one"> </div>

效果：

结论：Float会受定位影响，而定位不受float影响

解决：

(1)、clear清除浮动的影响

(2)、去除position：relative;或更改定位。（更为position: absolute后宽高默认只会覆盖元素）

(3)、改变盒子位置，不与其他区域重叠

(4)、设置z-index属性Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

3、雪碧图计算距离，手动核准距离，既不准确……

    使用在线spite生成工具，自动计算出距离，准确方便省时

网址：

https://www.toptal.com/developers/css/sprite-generator

收获：

1、可以单独设置border-radius属性，如：border-top-left-radius:2em;

2、对于CSS的清除浮动(clear)：这个规则只能影响使用清除的元素本身，不能影响其他元素。

下面是对浮动后的位置理解

如图：

假如把div2、div4左浮动，div2、div4浮动，脱离了标准流，因此div3将会自动上移，与div1组成标准流。div2发现上一个元素div1是标准流中的元素，因此div2相对垂直位置不变，与div1底部对齐。div4发现上一个元素div3是标准流中的元素，因此div4的顶部和div3的底部对齐，并且总是成立的，

假如页面中只有两个元素div1、div2，它们都是左浮动，场景如下：

如果希望div2能排列在div1下边，就像div1没有浮动，div2左浮动那样。

这时候就要用到清除浮动（clear），一开始我是这样写的：在div1的CSS样式中添加clear:right;，理解为不允许div1的右边有浮动元素，由于div2是浮动元素，因此会自动下移一行来满足规则。

其实这种理解是不正确的，这样做没有任何效果。

因为这个清除浮动是在div1中调用的，它只能影响div1，不能影响div2。

要想让div2下移，就必须在div2的CSS样式中使用浮动。div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。

3、Dl要添加固定高度（百分比也不行），不然即使给dd设置浮动，依然会侵占文档流的空间，打乱布局。

4、层级关系

首先是遵循DOM的规则，同级的后面居上；

一般有定位属性的元素会高于无定位属性的同级元素；

都有定位属性的同级元素，z-index大者居上；

如果是非同级的元素， 则会忽略元素本身z-index，取与对比元素同级的祖先元素的z-index属性，大者居上；

Z-index 仅能在定位元素上奏效（例如 position:absolute;）

5、纯css书写“>”号

span{

                            width: 12px; 

                            height: 12px;

                            position: absolute; 

                            border-left: 1px solid #999; 

                            border-bottom: 1px solid #999; 

                            -webkit-transform:translate(0,-50%) rotate(-135deg) ;                                                     transform: translate(0,-50%) rotate(-135deg); 

                     }