1、display属性:block/inline/none
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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/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>孟婆的碗,触电,雨樱花,说爱你,心痛,大笑江湖</p>
</div>
<div class="div2">
<p>孟婆的碗,触电,雨樱花,说爱你,心痛,大笑江湖</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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/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
以上内容参考了:/darel1742/item/8db125b9282b9ffa4ec7fd71