CSS篇之DIV+CSS布局

　　div与其他标签一样，也是一个XHTML所支持的标签。

　　div是XHTML中指定的，远门用于布局设计的容器标记。

简单的CSS布局

内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .header{
                width: 1000px;
                height: 100px;
                background-color:#ccc;
            }
            
            .content{
                width: 1000px;    
                height: 500px;
                background-color: bisque;            
            }
            
            .footer{
                width: 1000px;
                height: 100px;
                background-color: darkkhaki;
            }
        </style>
    </head>
    <body>
        <div class="header">头部</div>
        <div class="content">内容</div>
        <div class="footer">页脚</div>
    </body>
</html>

上面是简单地布局方法，然而上面有多个值可以精简我最后精简的（把它们相同的值另起一个class名称三个都有就可以了）

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .container{
                width: 1000px;
                height: 100px;
            }
            
            .header{
                background-color:#ccc;
            }
            
            .content{
                height: 500px;
                background-color: bisque;            
            }
            
            .footer{
                background-color: darkkhaki;
            }
        </style>
    </head>
    <body>
        <div class="header container">头部</div>
        <div class="content container">内容</div>
        <div class="footer container">页脚</div>
    </body>
</html>

如果内容要分开两个部分或更多时可以这样

内容1

内容2

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .container {
                width: 1000px;
                height: 100px;
                background-color: #FF0000;
                border: 1px solid #333;
            }
            
            .content {
                height: 500px;
            }
            
            .left {
                float:left;
                height: 500px;
                width: 300px;
                background-color: #5CBE3E;
            }
            
            .right  {
                float:left;
                height: 500px;
                width: 300px;
                background-color: #CCCCCC;
            }
            
        </style>
    </head>

    <body>
        <div class="header container">头部</div>
        <div class="content container">
            <div class="left">内容1</div>
            <div class="right">内容2</div>
        </div>
        <div class="footer container">页脚</div>
    </body>

</html>

这里用到一个float（元素的浮动）

float（元素浮动）

left：向左浮动

right：向右浮动

none：不浮动

它的改变属于行内元素。浮动有个注意的地方。浮动的窗口宽度越大可以放的数量越多，反之窗口宽度越下它的数量多的话就会自动换行显示。

div{float:left}

clear（浮动清除）

none：默认值。两边都有浮动

left：清楚左浮动

right：清除右浮动

both：不允许有浮动（这个比较常用）

div{clear：both}

position（对象定位）

staitc：无定位，默认。

absolute：绝对定位。脱离文档流通过top、right、left、bottom定位。

如果父元素position为static时，将以body坐标原点进行定位。

如果父元素position为relative时，将父元素进行定位。

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

relative：相对定位。（想对自己原来的位置而言）

不脱离文档流

参考自身静态位置通过top、right、left、bottom定位。

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

fixed：固定定位

固定死的位置一直在那里不会乱跑。它是以浏览器窗口来固定的，而不是相对于其包含元素，即时滚动页面，它也会在浏览器窗口一模一样的地方。

（可以用作返回顶部功能）

div { position: fixed; right:0; bottom:0;}

z-index

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

z-index：none| number

div { z-index:number}

display（元素显示模式

block 块对象指的是元素显示为一个方块，默认显示状态下将占据整行，其他的元素只能另起一行显示。（可以调节宽度和高度）

inline 行间对象与block刚好相反，它允许多个元素在同一行显示。（不可以调节宽度和高度）

none 隐藏对象

inline-block 上面两个元素的集合体可以调节宽度和高度。

div{display:block}