博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS Display(显示) and Visibility(可见性)
阅读量:6452 次
发布时间:2019-06-23

本文共 742 字,大约阅读时间需要 2 分钟。

hot3.png

如何设置一个元素是否显示,visibility属性指定一个元素应可见或隐藏。


隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过display属性设置为"none"或"hidden"属性的可见性。但是,请注意这两种方法产生不同的结果

visibility:hidden可以让您隐藏某个元素,但它仍然需要像以前一样的空间。该元素将被隐藏,但仍然会影响布局。

h1.hidden {visibility:hidden;}

display:没有隐藏的元素,它不会占用任何空间。元素将被隐藏,但页面会显示:

h1.hidden {display:none;}

CSS Display - 块和内联元素

块元素是一个元素,占用了全部宽度,在前后都是换行符。

块元素的例子:

  • <h1>

  • <p>

  • <div>

内联元素只需要必要的宽度,不强制换行。

内联元素的例子:

  • <span>

  • <a>


如何改变一个元素显示

可以更改内联元素和块元素,反之亦然,可以使页面看起来是以一种特定的方式组合,并仍然遵循web标准。

下面的示例显示为内联元素的列表项:

li {display:inline;}

下面的示例是把span元素作为块元素

span {display:block;}

注意:变更元素的显示类型看该元素是如何显示,它是什么样的元素。例如:一个内联元素设置为display:block是不允许有它内部的嵌套块元素。.


Examples

更多实例

这个例子演示了如何显示一个元素的内联元素。

这个例子演示了如何显示一个元素的块元素。

这个例子演示里如何使用表的collapse属性

转载于:https://my.oschina.net/wybo521/blog/603801

你可能感兴趣的文章
Spring MVC简单原理
查看>>
DynamoDB Local for Desktop Development
查看>>
ANDROID的SENSOR相关信息
查看>>
laravel 使用QQ邮箱发送邮件
查看>>
用javascript验证哥德巴赫猜想
查看>>
Shell编程-环境变量配置文件
查看>>
thymeleaf 中文乱码问题
查看>>
(转)CSS浮动(float,clear)通俗讲解
查看>>
os.walk函数
查看>>
[Unity3d]DrawCall优化手记
查看>>
细数.NET 中那些ORM框架 —— 谈谈这些天的收获之一
查看>>
SQL Serever学习7——数据表2
查看>>
洛谷——P2404 自然数的拆分问题
查看>>
(转)Mac 下设置android NDK的环境
查看>>
[struts]s:action 的使用方法
查看>>
dubbo问题总结
查看>>
20165320 第三周学习总结
查看>>
Struts2和Spring MVC的区别
查看>>
angular-bootstrap ui-date组件问题总结
查看>>
理解Javascript参数中的arguments对象
查看>>