CSS布局元素

一、display（元素显示模式）

　　display属性用来设置元素的显示方式。如果display设置为none，float及position属性定义将生效。

　　语法：display: block | none | inline | inline-block

　　　　1)block：块对象值的是元素显示为一个方块，默认显示状态下将占据整行，其它元素只能另起一行显示。（块元素）
　　　　2)inline：行间对象与block刚好相反，它允许其它元素在同一行显示。（内联元素）
　　　　3)inline-block：指定对象为内联块元素。可以在同一行的块元素吧。
　　　　4)none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间。
如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .display{width:100px;height:100px;display:inline-block;}
            .displayInline1{background-color:red;}
            .displayInline2{background-color:green;}
        </style>
    </head>
    <body>
        <div class="display displayInline1"></div><div class="display displayInline2"></div><!--注意：两个div代码之间写在同一行，要不然会出现中间会多出空白或者不能在同一行-->
    </body>
</html>

二、float（元素的浮动）

　　用来控制元素是否浮动显示。浮动的时候元素的显示属性也变化了，变为“行内元素”

　　语法：float: none | left | right

　　　　1)left：向左浮动
　　　　2)right：向右浮动
　　　　3)none：不浮动

如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{width:100px;height:100px;}
            .floatLeft1{background-color:blue;float:left;}
            .floatLeft2{background-color:red;float:left;}
        </style>
    </head>
    <body>
        <div class="box floatLeft1"></div>
        <div class="box floatLeft2"></div>
    </body>
</html>

浮动的目的：

　　就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示，这时就要利用float属性。

说明：

　　1.任何声明为float的元素自动被设置为一个“块级元素”。
　　2.在标准浏览器中，浮动元素脱离了文档流，所以浮动元素后的元素会占据浮动元素本来应该所处的位置。
　　3.如果水平方向上没有足够的空间容纳浮动元素，则转向下一行。
　　4.文字内容会围绕在浮动元素周围。
　　5.浮动元素只能浮动至左侧或者右侧。

清除浮动：

　　语法：clear: none | left | right | both

　　　　1)none：默认值。允许两边都可以有浮动对象。
　　　　2)left：不允许左边有浮动对象。
　　　　3)right：不允许右边有浮动对象。
　　　　4)both：不允许有浮动对象。

三、position（元素的定位）

　　设置元素定位方式

　　语法：position: static | absolute | fixed | relative

　　　　1)static：无定位，默认值。
　　　　2)absolute：绝对定位
　　　　3)relative：相对定位
　　　　4)fixed：固定定位

absolute说明：

脱离文档流
通过top，bottom，left，right定位
如果父元素position为static时，将以body坐标原点进行定位
如果父元素position为relative时，将以父元素进行定位

div{
    position:absolute;
    left:100px;
    top:100px;
}

relative说明：

相对定位（相对自己原来的位置而言）
不脱离文档流
参考自身静态位置通过top，bottom，left，right定位

div{
    position:relative;
    left:100px;
    top:100px;
}

fixed说明：

　　固定定位实际上只是绝对定位的特殊形式；固定定位的元素是相对浏览器窗口而固定，而不是相对于其包含元素；即使页面在滚动了，他们仍然会处在浏览器窗口中跟原来完全一样的地方。

　　fixed属性可以用来做网页返回顶端按钮

请看右边那个蓝色的东东

这里是fixed固定定位

div{
    position:fixed;
    right:0;
    top:50%
}

z-index（元素的层叠关系）

　　当元素发生重叠时，可以通过z-index属性，设置其层叠的先后顺序。较大number值的对象会覆盖在较小number值的对象之上。

　　语法：z-index:auto | number

以下通过调整div的z-index值换颜色：（点击）

红色蓝色绿色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box0{
                position: relative;
            }
            .box{
                width: 300px;
                height: 150px;
                position: absolute;
                left: 0;
                top: 0;
            }
            .box1{
                background: red;
            }
            .box2{
                background: blue;
            }
            .box3{
                background: green;
            }
            .input{
                z-index: 99;
                position: relative;
                top: 150px;
            }
            .radio{
                display: none;
            }
            .radio:nth-of-type(1):checked~.box1{
                z-index: 10;
            }
            .radio:nth-of-type(2):checked~.box2{
                z-index: 10;
            }
            .radio:nth-of-type(3):checked~.box3{
                z-index: 10;
            }
        </style>
    </head>
    <body>
        <div class="box0">
            <input type="radio" name="bg" id="bg1" class="radio"/><label for="bg1"class="input">红色</label>
            <input type="radio" name="bg" id="bg2" class="radio"/><label for="bg2"class="input">蓝色</label>
            <input type="radio" name="bg" id="bg3" class="radio"/><label for="bg3"class="input">绿色</label>
            <div class="box box1"></div>
            <div class="box box2"></div>
            <div class="box box3"></div>
        </div>
    </body>
</html>