一、定位
模型和定位是密不可分的，就像买了家具，要找地方放家具一样，要不然没地方放，放到人家家里面，是没有意义的。
下面就介绍一下定位的属性：
- position 定义元素在页面的定位方式
- left 指定元素和最近一个具有定位设置的父对象左边的距离
- right 指定元素和最近一个具有定位设置的父对象右边的距离
- top 指定元素和最近一个具有定位设置的父对象上边的距离
- bottom 指定元素和最近一个具有定位设置的父对象下边的距离
- z-index 设置元素的层叠顺序，仅在position属性为relative或者是absolute时有效
- width 设置元素的框的宽
- height 设置元素的框的高
- overflow内容溢出控制
- clip 剪切
前六个是定位，后四个是设置区块，或对其中内容进行控制
下面主要先说一下position的属性absolute 、relative（相对的）、static （静态的）、fixed(固定的)
下面是一个absolute的例子 top和left的作用很简单的体现出来了、
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>cssTest</title>
<style type="text/css">
#box{400px;height:500px;border:1px solid #000fff; background-color:Red; padding:10px; position:absolute;top:100px;left:200px;}
</style>
</head>
<body>
<div id="box">我顶部距离是100 左边是200
</div>
</body>
</html>
下面是一个relative的例子 主要是相对上级模型块content的位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>cssTest</title>
<style type="text/css">
#box{400px;height:500px;border:1px solid #000fff; background-color:Red; padding:10px; position:absolute;top:100px;left:200px;}
#content1{ position:relative;top:100px;left:200px; background-color:Blue;}
</style>
</head>
<body>
<div id="box">我顶部距离是100 左边是200
<p id="content1">relative测试</p>
</div>
</body>
</html>
下面是一个fixed的例子 主要是浏览器窗口的位置可以制作悬浮广告
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>cssTest</title>
<style type="text/css">
#box{400px;height:500px;border:1px solid #000fff; background-color:Red; padding:10px; position:absolute;top:100px;left:200px;}
#content1{ position:relative;top:100px;left:200px; background-color:Blue;}
#content2{ position:fixed;top:100px;left:200px; background-color:Blue;}
</style>
</head>
<body>
<div id="box">我顶部距离是100 左边是200
<p id="content1">relative测试</p>
</div>
<p id="content2">fixed测试可以做悬浮广告</p>
</body>
</html>
其他几个属性暂时不说了，等有时间的话补上。。。。
二、布局
布局和定位的作用有点类似，都是将模型块放置到一个地方
布局的操作主要是如何安排、排列、和改变区块的显示位置、同时处理邻里纠纷（设置两个相邻块的间距）布局的主要属性如下：
- clear 指定元素不允许有浮动对象的边 取值有none left right both
- float 指定元素是否以及如何浮动，取值是none left right
- clip 指定元素的可视区域，区域外的部分隐藏
- overflow 指定元素的内容超过指定宽度和高度时的处理方式 默认为visible（隐藏）
- overflow-x超过宽度
- overflow-y超过高度
- display 指定元素如何显示
- visibility 指定是否显示元素
看一下属性就感觉很多是要用到的，在此主要是float和clare的用法，float主要是流向某个地方 clear主要是不让某个方向流向，
<head>
<title>cssTest</title>
<style type="text/css">
.news {
background-color: gray;
border: solid 1px black;
}
.news img { float: left; }
.news p { float: right; }
.clear { clear:right; }
</style>
</head>
<body>
<div class="news">
<img src="news-pic.jpg" /><div class="clear">candnndnnd</div>
<p>some text</p>
</div>
</body>
</html>
试着把上述clear属性改成both left right 看看其效果
其他的有时间补上