css关于定位

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.3fixed

position: fixed;
lefy||right :数值；
运用：广告 回到顶部。
定位相对于浏览器窗口，并且不会随着浏览器的滚动改变！！

3.4 z-index

该元素用于决定定位元素{绝对，相对、固定} 的层级关系。
以定位为前提。

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

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

4. 居中

1.文本
水平方向：text-align：center；
垂直方向：line-height = height

2.设置宽度的块级元素水平居中；
margin-left：auto；
margin-right：auto：

3、内联元素设置的
vertical-align: middle;
设置块级元素内部元素垂直居中:
display: table-cell;
vertical-align:middle;

4.有宽度的块级元素居中：
position: absolute;
left: 50%;
top: 50%;
margin-top: -height/ 2;
margin-left: -width / 2;
计算宽高

position：absolute
top: 0;
bottom:0;
left: 0;
right: 0;
margin: auto;

下拉菜单
父元素的width 100%

5.布局、

5.1左右两列布局（宽度固定）

html代码段

<div class="box1 clear-float">
        <div class="box1-left"></div>
        <div class="box1-right"></div>
 </div>

CSS代码段

	.box1{
        width: 1536px;
        margin: 20px auto 0;
    }
    .box1-left {
        float: left;
        width: 536px;
        height: 100px;
        background-color: #999;
    }

    .box1-right {
        float: right;
        width: 1000px;
        height: 100px;
        background-color: #ddd;
    }

5.2宽度不固定

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

html代码段

<div class="box2 clear-float">
        <div class="box2-left"></div>
        <div class="box2-right"></div>
 </div>

CSS代码段

.box2, {
     width: 80%;
     margin: 20px auto 0;
 }
 .box2-left {
        float: left;
        width: 300px;
        height: 80px;
        background-color: red;
 }
.box2-right {
        margin-left: 300px;
        height: 80px;
        background-color: green;
}

5.2.2左列宽度不固定，右列的宽度是固定的

html代码段

<div class="box3 clear-float">
        <div class="box3-left">
            <div class="box3-inner"></div>
        </div>
        <div class="box3-right"></div>
 </div>

CSS代码段

.box3, {
     width: 80%;
     margin: 20px auto 0;
 }
.box3-right {
        float: left;
        margin-left: -300px;
        width: 300px;
        height: 100px;
        background-color: grey;
    }

    .box3-left {
        float: left;
        width: 100%;
    }

    .box3-inner {
        height: 100px;
        background-color: #333;
        margin-right: 300px;
    }

5.3三列布局

淘宝双飞翼 – 根据 圣杯布局改善
html代码段

<div class="box4 clear-float">
        <div class="box4-center">
            <div class="box4-inner"></div>
        </div>
        <div class="box4-left"></div>
        <div class="box4-right"></div>
</div>

CSS代码段

.box4, {
     width: 80%;
     margin: 20px auto 0;
 }
.box4-center {
        float: left;
        width: 100%;
    }

    .box4-left {
        float: left;
        height: 100px;
        background-color: indigo;
        width: 100px;
        margin-left: -100%;
        /* margin 的百分比相对于父元素宽度的 */
    }

    .box4-right {
        float: left;
        height: 100px;
        background-color: khaki;
        width: 100px;
        margin-left: -100px;
    }

    .box4-inner {
        background-color: lawngreen;
        height: 100px;
        margin: 0 100px;
    }

6. 图标

6.1 img

6.2图片精灵 雪碧图（css sprite）

标签设置宽高
background-image
background-position 背景定位
目的：减少请求次数，减少资源大小。
缺点：
合成图片很麻烦，记录各个图标的位置。

6.字体图标

阿里巴巴字体图标库

第一步:引入项目下面生成的fontclass代码:

<link rel="stylesheet" href="./iconfont.css">

第二步:挑选相应图标并获取类名,应用于页面:

<span class="iconfont icon-xxx"></span>