欢迎大家来我的空间踩踩哦，留言哈！

css课程

上一篇 / 下一篇 2008-03-19 16:50:19 / 个人分类：网站修改

/ * CSS知识学习中 520tk.cn * /
#div_one {
clear:both;
width:300px;
height:170px;
border:1px blue solid;
background:#c0c0c0;
padding:5px;
font-family:Arial;
color:black;}

高度170象素
宽度300象素
边框线1象素蓝色实体线
背景颜色浅灰色
内距5象素
字体ARIAL
字体颜色黑色

clear:both;
CSS手册上这样解释的：该属性的值指出了不允许有浮动对象的边。
这个属性是用来控制float属性在文档流的物理位置的。

当属性设置float（浮动）时，他所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除clear:both;

例子：

这个是第1列，
这个是第2列，
这个是列的下面。

如果不用清除浮动，那么第3个的文字就会和第一二行在一起
所以我们在第3个这利加一个清除浮动。
这个是第1列，
这个是第2列，
这个是列的下面。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
注意：
1:实际宽度是边框线与宽度相加;
比如整体宽度是300
边框线1象素
那么设定容器宽度的时候要设定为　298px

2:如果有PADDING (内边距) 那么在实际宽度中要加上PADDING的LEFT和RIGHT 上用padding

比如象刚才我写的那一段

#div_one {
clear:both;
width:300px;
height:170px;
border:1px blue solid;
background:#c0c0c0;
padding:5px;
font-family:Arial;
color:black;}
现在所占的实际宽度是多少,计算一下.

300+2+10=312px

300(width)
2(border-left border-right)
10(padding-left padding-right)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
示例
* {
margin:0px;
padding:0px;}

body {
margin:auto;
text-align:center;
cursor:default;
background:white;
font-size:12px;}

div {
margin:auto;}

#top {
clear:both;
width:900px;}

#top .tops {
float:left;
width:100%;
height:150px;
background:black;}

#main {
clear:both;
width:900px;}

#main .left {
float:left;
width:300px;
height:200px;}
#main .right {
float:left;
width:600px;
height:200px;}

#foot {
clear:both;
width:900px;}

#foot .footer {
float:left;
width:900px;
height:60px;}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
其中：

body {
margin:auto;
text-align:center;
cursor:default;
background:white;
font-size:12px;}

cursor:default; 鼠标样式

div {
margin:auto;}

DIV容器居中

图片出现多余时：
用DISPLAY:BLOCK;可以解决出现多余的问题.
比如一个容器里只有一个图片的时候才能使用用DISPLAY:BLOCK;
如果并排放5个图片
oO○小山○Oo<osam@vip.qq.com> 14:59:54
或若干个图片
oO○小山○Oo<osam@vip.qq.com> 14:59:57
可以使用UL LI