1.<div> 是divsion(分割)的缩写,其实就是一个“CSS-layer”
2.<span> 这也是一个非常常用的标签,这个标签可以说与div很像,没有什么特定的意义,只是他是一个级联元素,不是块级元素。我一直把它看作是一个袋子,他不像箱子那样可以有自己的宽高,他的宽高只能随着内容的多少而定,所以很像是袋子。这个标签与div正好互补
3.<div>是可以嵌套的,而这样的嵌套加上布局的float属性,这样一来,就有点类似于java里的布局器了,这是一个很强大的功能,几乎是无敌的
4.在布局的过程中,一般会用到以下几个属性:clear,float,position,其中clear用来设置某个对象的左右两边是否允许有浮动对象,而float属性则用来设置某个对象是如何浮动的,是浮动在左边还是右边,position则用来设置某个对象是绝对定位还是相对定位,不管是绝对还是相对,都要用left,right,top,bottom来设置一个周边值
5.如何将多个小控件排成一排?其实就是将每个控件的float都设置为left就可以了
6.如果不想让这些东西都排成一排,怎么办? 那也很简单,只要设置他们的clear:both就可以了;
总的来说,就是要充分利用float和clear;还有就是widht,height这几个属性,就能够很好的对界面元素进行定位;
示例:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>XHTML+CSS简单布局</title>
<style type="text/css">
*{margin:0px;
padding:0px;}
#all{width:400px;
margin:0px auto;
color:#f00; }
#top,#bt{height:20px;
background-color:#ccc;
color:#00f;
font-weight:bold;}
#list{width:25%;
height:120px;
float:left;
background-color:#eee;}
#content{width:75%;
height:120px;
background-color:#f7f7f7;}
</style>
</head>
<body>
<div id="all">
<div id="top">顶部</div>
<div id="mid">
<div id="list">列表</div>
<div id="content"> 内容</div>
</div>
<div id="bt">底部</div>
</div>
</body>
</html>
选自《网页开发手记》第10章