元素的显示visibility/display
visibility
visibility 属性虽然会隐藏元素，但会保留元素在页面中所占的空间。
| 值 | 描述 |
|---|---|
| visible | 默认值，表示元素是可见的 |
| hidden | 隐藏元素 |
| collapse | 主要用来隐藏表格的行和列，隐藏的行或列所占的空间可以被其他表格内容使用；如果在其他元素上使用，其效果等同于“hidden” |
| inherit | 从父元素继承 visibility 属性的值 |
display
通过 display 属性可以设置元素是否显示以及如何显示。
| 值 | 描述 |
|---|---|
| none | 隐藏元素 |
| block | 将元素设置为块级元素 |
| inline | 将元素设置为内联元素 |
| list-item | 将元素设置为列表项目 |
| inline-block | 将元素设置为行内块元素 |
| table |
将元素设置为块元素级的表格（类似<table>）
|
| inline-table |
将元素设置为内联元素级的表格（类似<table>）
|
| table-caption |
将元素设置为表格的标题（类似<caption>）
|
| table-cell |
将元素设置为表格的单元格（类似<td>和<th>）
|
| table-row |
将元素设置为表格的行（类似<tr>）
|
| table-row-group |
将元素设置为表格的内容部分（类似<tbody>）
|
| table-column |
将元素设置为表格的列（类似<col>）
|
| table-column-group |
将元素设置为表格中一个或多个列的分组（类似<colgroup>）
|
| table-header-group |
将元素设置为表格的头部（类似<thead>）
|
| table-footer-group |
将元素设置为表格的脚（类似<tfoot>）
|
| box | CSS3 中新增的属性值，表示将对象设置为弹性伸缩盒（伸缩盒的最老版本） |
| inline-box | CSS3 中新增的属性值，表示将对象设置为内联元素级的弹性伸缩盒（伸缩盒的最老版本） |
| flexbox | CSS3 中新增的属性值，表示将对象设置为弹性伸缩盒（伸缩盒的过渡版本） |
| inline-flexbox | CSS3 中新增的属性值，表示将对象设置为内联元素级的弹性伸缩盒（伸缩盒的过渡版本） |
| flex | CSS3 中新增的属性值，表示将对象设置为弹性伸缩盒（伸缩盒的最新版本） |
| inline-flex | CSS3 中新增的属性值，表示将对象设置为内联元素级的弹性伸缩盒（伸缩盒的最新版本） |
| run-in | 根据上下文来决定将元素设置为块级元素或内联元素 |
| inherit | 从父元素继承 display 属性的值 |
元素的显示visibility/display相关推荐
- html元素的显示与隐藏（display、visibility、overflow）
类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现! 本质:让一个元素在页面中隐藏或者显示出来. 1display显示隐藏 Display属性用于设置一个元素如何显示. Displ ...
- web前端入门学习 css（6）（定位position）（元素的显示与隐藏display、可见性visibility、溢出overflow）（案例：土豆播放页）
文章目录 什么是定位? 定位组成(定位模式+边偏移) 定位模式static relative absolute fixed 边偏移 定位模式--静态定位static(平时用不到)就是标准流 定位模式- ...
- css元素的显示与隐藏 display显示隐藏 +visibility显示隐藏 +overflow溢出显示隐藏
css元素的显示与隐藏 display显示隐藏元素 visibility显示隐藏元素 overflow溢出显示隐藏 总结 display显示隐藏元素 display 设置或检索对象是否及如何显示. d ...
- 通过jQuery的slideToggle()方法实现元素的显示隐藏时，利用当前ul元素display的值判断状态遇到的问题
项目场景: 通过jQuery的slideToggle()方法实现元素的显示隐藏时,利用当前ul元素display的值判断状态,点击当前p标签时,显示隐藏兄弟元素ul,当ul显示时p为灰色,隐藏则p为蓝 ...
- html display 显示,CSS display显示
显示或隐藏 我们可以通过使用visibility属性或display属性来显示或隐藏元素. 要隐藏元素,请将display属性设置为"none"或将visibility属性设置为& ...
- 19元素的显示与隐藏
类似网站广告,当我们点击关闭就不见了.但是,当我们重新刷新页面时,广告又会重新出现! 本质:让一个元素在页面中隐藏或显示出来! 1.三种显示与隐藏方式 display显示隐藏 visibility显示 ...
- 动态控制SAP C4C UI元素的显示和隐藏
C4C UI上UI元素的显示和隐藏可以通过Key User在Adaptation模式里通过编辑一些简单的rule去控制,诸如这种格式: if ( logic expression = true )th ...
- 四、pink老师的学习笔记——元素的显示与隐藏
1. 元素的显示与隐藏 目的 让一个元素在页面中消失或者显示出来 场景 类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现! 1.1 display 显示(重点) display ...
- CSS基础「六」元素的显示与隐藏
本篇文章为 CSS 基础系列笔记第六篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
最新文章
- 穿了个GUI马甲的PyInstaller
- tomcat启动命令行窗口出现乱码的解决方法
- 判断非负整数是否是3的倍数_六年级小升初数学总复习专题（2-1）因数与倍数...
- Swift 位运算练习
- 多线程环境下调用 HttpWebRequest 并发连接限制
- why I cannot get any search result from P8F
- [渝粤教育] 四川大学 药用植物学 参考 资料
- 第五节 CImage和CBmp（二）
- 光遇安卓服务器维修,《光遇》渠道服更换手机解决办法
- linux把标准输出赋值给变量遇到的问题
- 演示Thread.sleep(100)和Thread.currentThread().isInterrupted()+@Deprecated:将方法标注为废弃的方法...
- *使用配置类定义Codeigniter全局变量
- 计算机主板电池拆卸,主板电池没电了会怎么样 电脑主板电池怎么拆换【详解】...
- 2022企业邮箱登陆入口介绍，企业邮箱电脑版登陆入口有哪些？手机如何登陆企业邮箱？
- Hadoop运行原理详解
- python爬取喜马拉雅音频数据
- 10分钟教你如何在win10上操作win10上的虚拟机中的docker容器，保证学会
- 【嵌入式开发】开发板设置系统时间
- macOS上的汇编入门（五）——第一个汇编程序
- 浅谈SVG的两个黑魔法