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

最新推荐文章于 2022-12-16 21:15:00 发布

HNFXS985

最新推荐文章于 2022-12-16 21:15:00 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/WaitForFree/article/details/9118931

版权

本文通过实例代码详细解析CSS中的display、float、clear、overflow和visibility属性，包括它们的区别和应用场景，如元素显示、隐藏、布局和流体布局等。并提供了一系列练习题加深理解。

摘要由CSDN通过智能技术生成

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" "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>
   
   <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=&#

最低0.47元/天解锁文章

HNFXS985

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图解：实例对比讲解display、float、clear、overflow、visibility属性

1、display属性:block/inline/none display：block(作用是把行属性标签显示成块属性标签，可以设置宽高) ； display：inline(作用是把块属性标签显示成行属性标签，这时块属性标签就不能设置宽高啦)； display：none(作用是使所控制的标签不显示) visibility：hidden(是设置元素的框的不可见
复制链接

扫一扫