标签：
<div></div>
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>
如果内容要分开两个部分或更多时可以这样
<!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}
标签：
原文地址：http://www.cnblogs.com/azq6252930/p/5778061.html
