900字范文 > 图解：实例对比讲解display float clear overflow visibility属性

图解：实例对比讲解display float clear overflow visibility属性

时间：2019-01-20 10:55:23

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>

<head>

<title> 中工css作业 </title>

</head>

<body>

断桥是否下过雪。我望着湖面。断桥残雪。断桥残雪。断桥是否下过雪。我望着湖面

</span>

断桥是否下过雪。我望着湖面。断桥残雪。断桥残雪。断桥是否下过雪。我望着湖面

</span>

<h3>以上是span标签显示成块属性标签的效果</h3>

<p class="p1">断桥是否下过雪，我望着湖面。断桥残雪</p>

<p class="p2">断桥是否下过雪，我望着湖面。断桥残雪</p>

<h3>这是p标签显示成行标签的效果</h3>

<h3>这是img标签显示成块属性标签的效果，并且通过display:none隐藏了图片</h3>

<textarea class="t1">我不是公主，我不是大小姐。我不会善良的面对一切</textarea>

<textarea class="t2">我不是公主，我不是大小姐。我不会善良的面对一切</textarea>

<h3>这是textarea标签显示成快属性标签的效果</h3>

<h3>这是img显示成块属性标签的效果，并且通过visibility：hidden隐藏了图片</h3>

</div>

</div>

<h3>这是块属性标签嵌套块属性标签，把div标签显示成行标签的效果</h3>

</ol>

</ol>

<h3>这是块属性标签嵌套块属性标签，把内部的li标签显示成行属性标签的效果</h3>

</ul>

</ul>

<h3>这是把两个块属性嵌套块属性标签的外块属性标签显示成行标签，但是因为嵌套的是块属性标签，所以它们并不在一行</h3>

<input type="checkbox">江苏省

<input type="checkbox">福建省

<input type="checkbox">台湾省

</div>

<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>

<head>

<title>homework</title>

</head>

<body>

</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">

<head>

.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>

</body>

</html>

生成的页面截图如下（部分图片未能加载，但不影响理解）：

（4）float属性练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title> float </title>

.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='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")&nbsp&nbsp即：border:1px blue solid; height:100px;width:400px;float:right;word-wrap:break-word)</div>

</div>

<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>

<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>

</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

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。