一，
CSS
框模型

CSS
框模型有元素，边框，内边距，外边距组成。

内边距，边框，外边距都是可选的，默认值是
0.
外边距和内边距可以通过
margin
和
padding
来设置。

CSS
中的
width
和
height
用来设置内容即元素的宽和高。

1
，
CSS
的内边距

Padding
属性可以使用长度也可以使用

例子： h1 {padding: 10px 0.25em 2ex 20%;} 按照上下左右的顺序

同样上下左右的长度也可以分别设置 padding-top
，
padding-bottom
，
padding-left
，
padding-right

内边距是可以使用百分比的。此百分比是相对于父类
width
的百分比。如果父类的
width
改变那么他的
padding
也会改变。

2
，
CSS
边框

CSS
的边框就是围绕元素和内边距的一条线或者是若干条线。边框有颜色，样式和宽度和上面轮廓基本相同。一个边框可以设置多种样式。

例子： p.aside {border-style: solid dotted dashed double;} 这里采用的是上右下左的顺序

 同样的也可以定义单边的样式分别是：
border-top-style,border-right-style,border-bottom-style,border-left-style

边框的宽度可以使用
border-width
来设置。其他的和上面的样式是一样的也可以各自设置。

边框的颜色同理，
width
变成
color

3
，
CSS
的外边距

围绕着边框外围的空白区域就是外边距，用属性
margin
来设置用长度值，同理也可以四周分别进行设置
margin-top margin-right
，
margin-bottom
，
margin-left
。

4
，外边距的合并

当两个垂直外边距重合时，两个外边距会合并，合并后的外边距为两者较大的外边距。最普通的例子就是段落间的外边距的合并。

当一个元素包含另一个元素的时候，他们的上下外边距会发上合并，而左右外边距会相加。

注意：只有普通流的文档块元素才会合并。像行内框，浮动框，绝对定位之间的外边距是不会融合的。

二，
CSS
的定位

把一切的元素都看成块元素，例如
div
，
p
，
h1
等。像
span
和
strong
内容是显示在行内的叫做行内框。

使用
display
属性就可以调节框的类型。当他的值为
none
的时候此元素不会被显示；当他得值为
block
的时候此元素显示为块级元素；值为
inline
元素为内联元素前后无换行符。

l  CSS
的定位机制

定位有三种机制：普通流，浮动和绝对定位。

块级元素从上到下一个接着一个的排列，框之间的距离的由垂直外边距计算出来。

用来定位的属性值
position

1
，值为
static
没有定位
,
出现在正常的流当中
,

2
，值为
absolutes
生成绝对定位的元素（在文档中不占据位置），参照浏览器的左上角通过
top,right,bottom,left
定位。当
absolute
没有设置
top
等元素是则是定位到父类的坐标作为起始点既最近的已定位的祖先类。

3
，为
relative
生成相对对位元素，就是相对于元素本身在文档应该出现的位置来移动元素的位置。我们可以通过
top,right,bottom,left
来进行改变元素的位置，实际上元素的实际的位置并没有改变，只是视觉上相对移动了。

注：
absolute
与
relative
的结合使用！！！

代码如下：

<style type="text/css">
html,body,div,ul,li,a{
margin:0; 
padding:0; 
list-style:none;
}
a, a:hover{
color:#000;
border:0;
text-decoration:none;
}
#warp,#head,#main,#foot
{
width: 962px;
}
/*设置居中*/
#warp{
margin: 0 auto;
}
#head{
height:132px;
position:relative;
}
.logo{
position:absolute;
top:17px;
}
.head_pic{
position:absolute;
top:17px;
left:420px;
}
.sc{
position:absolute;
right:5px;
top:12px;
}
.sc a{
padding-left:20px;
color:#666;
}
.nav{
width:960px;
height:42px;
line-height:42px;
position:absolute;
bottom:0px;
url(img /nav_bj.jpg) no-repeat center;
}
.nav ul{
float:left;
padding:0 10px;
}
.nav li{
float:left;
url(img /li_bj.jpg) no-repeat right center;
padding-right:40px;
padding-left:20px;
text-align:center;
display:inline;
}
.nav li a{
font-size:14px;
font-family:Microsoft YaHei !important;
white-space:nowrap;
}
.nav li a:hover{
color:#FBECB7;
}
</style>
<title></title
>
<body>
<div id="warp">
<div id="head">
<div class="logo"><img src="img/logo.jpg" /></div>
<div class="head_pic"><img src="img/head_pic.jpg" /></div>
<div class="sc">
<a href=""><img src="img/sc_btn.jpg" /></a>
<a href=""><img src="img/sy_btn.jpg" /></a>
<a href=""><img src="img/kf_btn.jpg" /></a>
</div>
<div class="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">团队文化</a></li>
<li><a href="">公司动态</a></li>
<li><a href="">资讯参考</a></li>
<li><a href="">业务中心</a></li>
<li><a href="">合作银行</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</div>
<div id="main"></div>
<div id="foot"></div>
</div>
</body>
</html>  

首先我们把 haed
这个图片设置为
relative
，而
head
的
div
中的其他
div
用
absolute
这样其他的
div
的绝对位置就是相对于
head
的绝对位置了 。当
head
的位置改变时则其他的元素就会随着他一起改变。

4
，值为
fixed
，生成绝对定位元素，也叫固定定位，相对于浏览器窗口进行定位。

注：使用滚动条来显示元素内溢出的内容，使用属性：
overflow
：
scroll
，，若为
hidden
则异常的部分就会被隐藏。

注
2
，如何设置元素的外形
?
一例子说明：

<html>

<head>

<style type="text/css">

img 

{

position:absolute;

clip:rect(0px 50px 200px 0px)

}

</style>

</head>

<body>

<p>clip 
属性剪切了一幅图像：
</p>

<p><img border="0" src="../i/eg_bookasp.gif" tppabs="http://www.w3school.com.cn/i/eg_bookasp.gif" width="120" height="151"></p>

</body>

</html>

将图片的设置为绝对定位，定位的标准时他的父类标签
P
，这里用到了
CSS
的一个属性
:clip

它的作用就是剪裁绝对定位元素。用法像上面的例子：
clip:rect(0px 50px 200px 0px)
。

注
3:

CSS
属性：
z-index,
用来设置元素的堆叠顺序，只能用在绝对定位元素上拥有高堆叠的元素会显示在低堆叠元素的前面。元素可以有负的
z-index
值。

例子：
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

img.top { position:absolute;

top:0px;

left:0px;

z-index:-1;}

p{ color:#00F;}

</style>

</head>

<body>

<p>

这是一幅图像。

</p> 

<img class="top" border="0" src="http://d3.sina.com.cn/201212/19/470351_640-90all.jpg" />

</body>

这个例子里面把图片
top
的
z-index
设置为
-1
，则
p
标签的优先级就在图片之上。如果把图片的
z-index
调整为
-1
，则显示的将会是整张的图片而看不见文档。

l  相对定位和绝对定位在上面的定位机制中讲的差不多了。

注：因为绝对定位与流无关，所以绝对定位的图片会覆盖其他文本所以要是设置
z-index
来安排显示的顺序

l  浮动

什么叫浮动：浮动的框可以向左或者向右进行浮动，直到碰到包含框或者其他浮动框的边框为止。浮动框不在文档的普通流当中所以在普通的文档流中快框表现得好像浮动框不存在似的。

下面的图可以明显的说明浮动的意义。

请看下图，当把框 
1 
向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框 
1 
向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 
2
，使框 
2 
从视图中消失。

如果把所有三个框都向左移动，那么框 
1 
向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素
“
卡住
”
：
CSS
提供了属性
float
实现浮动。

l  float
属性

Float
属性值为
left
，
right 
，
none
，向那个方向进行浮动或者是不进行浮动。

问题一：如何将一个带标题的图片浮动到文档的右侧。

只要将图片和标题放在同一个
div
当中一起浮动就可以了。

代码：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

div{ float:right;

border:thin #009 dashed;

margin:0px 15px 30px 11px;

text-align:center;

padding:15px;}

p{ color: #000;

font-size: 36px;

font-weight:900;

text-align: left;

vertical-align:middle;}

</style>

</head>

<body>

<div>

<img class="top" border="0" src="http://i3.sinaimg.cn/home/deco/2009/0330/logo_home.gif" /><br />

这是新浪的图片！！！！

</div>

<p>

这是一幅位于段落中的图像。如果把所有三个框都向左移动，那么框 
1 
向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素
"
卡住
"
：

</p> 

</body>