本文通过实例代码详细解析CSS中的display、float、clear、overflow和visibility属性，包括它们的区别和应用场景，如元素显示、隐藏、布局和流体布局等。并提供了一系列练习题加深理解。
display：block(作用是把行属性标签显示成块属性标签，可以设置宽高) ；
display：inline(作用是把块属性标签显示成行属性标签，这时块属性标签就不能设置宽高啦)；
display：none(作用是使所控制的标签不显示)
visibility：hidden(是设置元素的框的不可见，但是在布局中的位置是不变的)
它和display：none的区别就在于后者不会占用那个位置，下一个元素会直接覆盖它，而前者是会占用那个布局，只是不显示内容，是 一片空白；并且下载的时候对于display：none就不会把不显示的元素给下载下来，而visibility：hidden则会把不显示的元素给下载下来；
2、float（浮动，照样受文档流的限制）行标签float之后就可以设置它的宽高
float：none/left/right
none : 对象不浮动
left : 左浮动
right : 右浮动
3、clear（清除浮动）
clear：both/none/left/right
none : 允许两边都可以有浮动对象
both : 不允许有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
4、overflow（超出）
overflow：visible/auto/hidden/scroll
visible : 不剪切内容也不添加滚动条
auto : 默认属性
hidden : 隐藏超出内容
scroll : 总是显示滚动条
5、visibility(可视)
visibility : inherit/visible/hidden
inherit : 继承上一个父对象的可见性
visible : 对象可视
hidden : 对象隐藏
6、几种图片格式的差别：
gif：不支持半透明
jpg：支持透明
png：既不支持半透明也不支持透明
练习作业：
（1）display和visibility属性的比较
<!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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 中工css作业 </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" type="text/css" href="css/css1.css"/>
</head>
<body>
<span class="test1">
断桥是否下过雪。我望着湖面。断桥残雪。断桥残雪。断桥是否下过雪。我望着湖面
</span>
<span class="test2">
断桥是否下过雪。我望着湖面。断桥残雪。断桥残雪。断桥是否下过雪。我望着湖面
</span>
<h3>以上是span标签显示成块属性标签的效果</h3>
<p class="p1">断桥是否下过雪，我望着湖面。断桥残雪</p>
<p class="p2">断桥是否下过雪，我望着湖面。断桥残雪</p>
<!-- <p class="p3">断桥是否下过雪，我望着湖面。断桥残雪</p> -->
<h3>这是p标签显示成行标签的效果</h3>
<img class="tu1" src="images/aa.bmp" alt="中工校徽"/>
<img class="tu2" src="images/aa.bmp" alt="中工校徽"/>
<h3>这是img标签显示成块属性标签的效果，并且通过display:none隐藏了图片</h3>
<textarea class="t1">我不是公主，我不是大小姐。我不会善良的面对一切</textarea>
<textarea class="t2">我不是公主，我不是大小姐。我不会善良的面对一切</textarea>
<h3>这是textarea标签显示成快属性标签的效果</h3>
<img class="tu3" src="images/aa.bmp" alt="中工校徽"/>
<img class="tu4" src="images/aa.bmp" alt="中工校徽"/>
<h3>这是img显示成块属性标签的效果，并且通过visibility：hidden隐藏了图片</h3>
<div class="div1">
<p>孟婆的碗，触电，雨樱花，说爱你，心痛2009，大笑江湖</p>
</div>
<div class="div2">
<p>孟婆的碗，触电，雨樱花，说爱你，心痛2009，大笑江湖</p>
</div>
<h3>这是块属性标签嵌套块属性标签，把div标签显示成行标签的效果</h3>
<ol class="o1">
<li>河南省</li>
<li>河北省</li>
<li>湖南省</li>
<li>湖北省</li>
</ol>
<ol class="o2">
<li>河南省</li>
<li>河北省</li>
<li>湖南省</li>
<li>湖北省</li>
</ol>
<h3>这是块属性标签嵌套块属性标签，把内部的li标签显示成行属性标签的效果</h3>
<ul class="u1">
<li>吉林省</li>
<li>辽宁省</li>
<li>黑龙江省</li>
<li>陕西省</li>
</ul>
<ul class="u2">
<li>吉林省</li>
<li>辽宁省</li>
<li>黑龙江省</li>
<li>陕西省</li>
</ul>
<h3>这是把两个块属性嵌套块属性标签的外块属性标签显示成行标签，但是因为嵌套的是块属性标签，所以它们并不在一行</h3>
<div class="div3">
<input type="checkbox">江苏省
<input type="checkbox">福建省
<input type="checkbox">台湾省
</div>
<div class="div4">
<input type="checkbox">广西省
<input type="checkbox">广东省
<input type="checkbox">云南省
</div>
<h3>这是块属性标签嵌套行标签，把块属性标签显示成行标签的效果</h3>
</body>
</html>
css文档：
h3 {color:#a52a2a;font-size:25px;}
.test1 {border:1px blue dashed;margin:10px;padding:10px;}
.test2 {display:block;border:2px red solid;width:200px;height:150px;margin:20px;padding:10px;}
.p1 {border:2px blue dashed;width:250px;height:100px;text-indent:20px;padding:5px;}
.p2 {border:2px red solid;display:inline;}
.tu1 {border:1px orange dashed;display:block;margin:5px;}
.tu2{border:1px orange dashed;display:none; }
.t2 {display:block;margin:10px;}
.tu3 {border:2px red dashed;visibility:hidden;}
.tu4 {border:2px red solid;display:block;margin:5px;}
.div1 {border:2px blue dashed;width:300px;height:80px;}
.div2 {border:2px red dashed;display:inline;width:300px;height:80px;}
.o1 {border:1px green solid;width:300px;height:100px;}
.o1 li {margin:5px;}
.o2 {border:1px blue solid;width:300px;height:100px;}
.o2 li {margin:5px;padding:5px;display:inline;}
.u1 {border:1px red dashed;display:inline;}
.u2 {border:2px blue solid;display:inline;}
.div3 {border:1px red solid;display:inline;padding:10px;margin:10px;}
.div4 {border:2px blue dashed;display:inline;margin:10px;padding:20px;}
生成的页面截图如下（部分图片未能加载，但不影响理解）：：
（2）导航条1（li标签用inline内联属性值限制）
<!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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>homework</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<ul class="navigation">
<li>首页</li>
<li>学院特色</li>
<li>规章制度</li>
<li>科学研究</li>
<li>在线咨询</li>
<li>学生工作</li>
<li>帮助</li>
</ul>
</body>
</html>
css文档：
.navigation {border:1px red solid;width:800px;height:30px;text-align:center;padding:0px;}.navigation li {display:inline;line-height:30px;padding:0px 10px;font-size:12px;}
生成的页面截图如下：
（3）导航条2（li标签用float属性值限制）
<!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=utf-8" />
<title>导航条</title>
<meta name="keywords" content="" />
<meta name="Description" content="" />
<style type="text/css">
.nav {height:33px;width:945px;background:url("images/beijing.jpg") no-repeat;padding:0px 5px;}
.nav .word {font-size:14px;font-weight:bold;line-height:33px;color:white;padding:0px 20px;float:left;list-style-type:none;}
.nav .line {float:left;list-style-type:none;margin:6px 0px;}
.nav .zx {font-size:12px;line-height:33px;color:white;width:80px;padding:0px 5px;margin:0px 5px;float:right;background:url("images/zhongxin.jpg") center no-repeat;list-style-type:none;}
</style>
</head>
<body>
<ul class="nav">
<li class="word"><strong>论坛</strong></li>
<li class="line"><img src="images/xian.jpg"/></li>
<li class="word"><strong>博客</strong></li>
<li class="line"><img src="images/xian.jpg"/></li>
<li class="zx"><span>我的中心</span></li>
</ul>
</body>
</html>
生成的页面截图如下（部分图片未能加载，但不影响理解）：
（4）float属性练习
<!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=utf-8" />
<title> float </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.rowsone {border:1px red solid;width:956px;}
.clear {clear:both;height:0;overflow:hidden;}
.rowsone .one {border:1px blue solid;height:202px;width:150px;float:left;word-wrap:break-word/*自动换行*/}
.rowsone .two {border:1px blue solid;height:150px;width:400px;float:left;word-wrap:break-word}
.rowsone .thr {border:1px blue solid;height:100px;width:400px;float:left;word-wrap:break-word}
.rowsone .fou {border:1px blue solid;height:50px;width:400px;float:right;word-wrap:break-word}
.rowsone .fiv {border:1px blue solid;height:100px;width:400px;float:right;word-wrap:break-word}
.rowstwo {border:1px blue dashed;width:956px;}
.rowstwo .aa {border:1px red solid;height:202px;width:150px;float:left;}
.aa .one {border:1px red solid;height:98px;width:150px;float:left;border-top:none;}
.aa .two {border:1px red solid;height:98px;width:150px;float:left;border-bottom:none;}
.rowstwo .thr {border:1px red solid;height:202px;width:650px;float:left;}
.rowstwo .fou {border:1px red solid;height:100px;width:150px;float:right;}
.rowstwo .fiv {border:1px red solid;height:100px;width:150px;float:right;}
.rowsthr {border:1px green solid;width:956px;}
.rowsthr .one {border:1px purple solid;height:202px;width:150px;float:left;}
.rowsthr .two {border:1px purple solid;height:100px;width:650px;float:left;}
.rowsthr .thr {border:1px purple solid;height:100px+50px;width:650px;float:right;}
.rowsthr .fou {border:1px purple solid;height:202px;width:150px;float:right;}
</style>
</head>
<body>
<div class="rowsone">
<div class='one'>1 (class="one")<br />(即：border:1px blue solid;height:202px;width:150px;float:left;word-wrap:break-word)</div>
<div class='two'>2 (class="two")<br />(即：border:1px blue solid;height:150px;width:400px;float:left;word-wrap:break-word)</div>
<div class="thr">3 (class="thr")<br />(即：border:1px blue solid;height:100px;width:400px;float:left;word-wrap:break-word)</div>
<div class="fiv">5 (class="fiv")<br />(即：border:1px blue solid;height:100px;width:400px;float:right;word-wrap:break-word)</div>
<div class="fou">4 (class="fou")  即：border:1px blue solid; height:100px;width:400px;float:right;word-wrap:break-word)</div>
<div class='clear'></div>
</div>
<div class="rowstwo">
<div class='aa'>
<div class='one'>1 (class="one")(float:left)</div>
<div class='two'>2 (class="two")(float:left)</div>
</div>
<div class='fou'>4 (class="fou")(flost:right)</div>
<div class='thr'>3 (class="thr")(float:left)</div>
<div class='fiv'>5 (class="fiv")(float:right)</div>
<div class='clear'></div>
</div>
<div class="rowsthr">
<div class='one'>1 (class="one")(float:left)</div>
<div class='two'>2 (class="two")(float:left)</div>
<div class='fou'>4 (class="fou")(float:right)</div>
<div class='thr'>3 (class="thr")(float:right)
<br />(说明：每次float：left时，就找目前容器内部“从左开始数最右边的元素”是哪个，然后当前要布局的元素浮到“找到的元素的右侧”，如果“容器剩下的宽度不够放下当前要布局的元素，则下移一行”，把当前要布局的元素浮到下行的最左边；float:right亦然。
<br />左右即水平方向的位置确定后,再看上下即垂直方向能否放下，如果放不下则下移一行再摆放。总之：先水平再垂直方向顺序摆放float属性的元素)
</div>
<div class='clear'></div>
</div>
</body>
</html>
生成的页面截图如下：
难点：关于float，主要以前不理解在元素浮动之后元素的显示方式即display方式，当元素浮动之后元素的display属性就变为类似于inline-block，所以在行内元素浮动之后可以设置他的高度，宽度（简单来说float后display就变成了inline-block，即外框box为inline，而里面的内容为block，可以设置高和宽）。
上述练习要注意的问题：
1、用link方式引入css文件，尽量少用<stytle>引用
2、css中的注释用/* */表示的
3、尽量不用空标签，除了clear和其它一些特殊的
4、背景图和img标签的正确使用：没有意义的图片用背景图即可，有意义的图片要用img标签
5、ps的时候保存图片的格式时注意自己所要保存的格式
6、用float进行布局，不使用display来进行布局
7、清除ul标签中li标签前面的黑圆点的命令是：list-style-type:none
以上内容参考了：http://hi.baidu.com/darel1742/item/8db125b9282b9ffa4ec7fd71
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
