学习前端的第八天

下面是记得笔记：

1、 文档流
     普通文档流
     浮动
     定位
2、 定位
     通过一个坐标点将元素定位在网页中任意一个位置。

3、 定位分类
     static：普通文档（无定位）
     absolute：绝对定位
     relative：相对定位
     fixed：固定定位

    3.1 relative :
         position:relative;
         坐标点通过left || right + top || bottom。
         坐标点是相对于他原来的位置的
         没有脱离文档流。
    
    3.2 absolute：绝对定位
         position:absolute;
         left || right:数值；
         top  || bottom:数值；

         绝对定位会脱离文档流：
         如果当前元素的所有祖先级元素都没有定位，则相对于浏览器当前可视窗口定位。
         如果祖先级元素有定位，则相对于有定位的祖先级元素进行定位。
         定位边界点包含padding，不包含margin、border。

    3.3 fixed：固定定位
         position:fixed;
         left || right:数值；
         top  || bottom:数值；
         定位相对于浏览器的可视窗口，并且不会随着浏览器的滚动改变位置
    
    3.4 z-index
         z-index：数值；
         该属性用于决定定位元素（绝对、相对、固定）的层级关系，如果没有定位，则该属性不生效。

         问题：一个元素有定位，并且设置了一个很大的z-index的值，但是依然被一个元素遮挡了。

         解决办法：提高父元素的z-index值。

1、文本居中
     水平方向：text-align：center；
     垂直方向：line-height=hight；

2、 设置宽度的块级元素水平居中：
     margin-left：auto；
     margin-right：auto；
3、内联元素设置的
     vertical-align：middle；
     设置块级元素内部元素垂直居中；
     display:table-cell;
     vertical-align:middle;
4、 有宽度的块级元素居中：
方法一：
     position：obsolute；
     left：50%;
     top:50%；
     margin-top：-100px；
     margin-left：-100px；
方法二：
     position：obsolute；
     top：0；
     bottom：0；
     left：0；
     right：0；
     margin：auto；

4、 布局
     4.1 左右两列布局
         4.1.1 左右两列固定宽度

         4.1.2宽度不固定
             左列宽度固定，右列宽度不固定

             左列宽度不固定，右列宽度固定

             左右列固定，中间不固定
             //淘宝双飞翼  根据圣杯布局改善而来

5、 图标的使用
     img：

     图片精灵（雪碧图）（css sorite）
     标签设置宽高
     background-image
     background-position

     目的：
     减少请求次数
     减少资源大小

     缺点：
     合成图片很麻烦；
     记录各个图标的位置也很麻烦；

     字体图标：
     阿里巴巴字体图标库：

     transform:translateY;

画小三角：

.icon {
    width:0;
    height:0;
    boder-top:100px； solid #fff;
    boder-left:10px solid transparent;
    boder-bottom:10px solid transparent;
    boder-right:10px solid transparent;

    position:absolute;
    right:5px;
    top:50%;
    margin-top:-5px;
}
li:hover .icon {
    boder-top:10px solid transparent;
    boder-bottom:10px solid #fff;
    margin-top:-10px;
}