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>
1221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
