当前位置: 首页 > news >正文

CSS:display和visiblity

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

display 属性设置一个元素应如何显示,visibility 属性指定一个元素应可见还是隐藏。
隐藏一个元素可以通过吧display属性设置为“none”,或者把visibility属性设置为“hidden”。但是这两种会产生不同的结果。

visibility:hidden 可以隐藏某个元素,但隐藏的元素仍需占用未隐藏之前一样的空间。
visibility: collapse 也可以用在表单中,将其剩于部分隐藏

display:none | block;
none: 隐藏HTML元素,确切的说,是浏览器消除该元素,不占屏幕的空间。若下有其他元素,就会上移;
block: 块级元素,显示已经隐藏的元素,如果有空间,其他的元素下移。

除此之外,
display:inline, 两个元素在同一水平线上。
display inline-block, 行内块元素。

块级元素主要有:address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有:a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

我们常将

  • 元素加上display:inline-block样式,原本垂直的列表就可以水平显示了。

http://www.lryc.cn/news/429341.html

相关文章:

  • 43.x86游戏实战-XXX寻找吸怪坐标
  • Redis地理位置相关应用
  • 优化WAN流量:如何通过调整系统设置降低企业网络成本
  • Java-HttpHeaders请求头或响应头
  • Elasticsearch高阶查询
  • 【流媒体】RTMPDump—RTMP_Connect函数(握手、网络连接)
  • 通过https方式访问内网IP
  • flutter 键盘弹出 都会重新Build
  • RedisDistributedLock 分布式锁
  • Java之包装类
  • Linux - 权限
  • 免费图形化nginx管理工具nginxWebUI
  • 编程上的挫折不可怕,可怕的是你畏惧了
  • docker逃逸手法
  • 3 pytest Fixture
  • pinctl 和 gpio子系统驱动
  • RocketMQ消息堆积了怎么解决?
  • C++第十二弹 -- STL之list模拟实现
  • Destiny of Gods首轮测试正式开启,参与玩家数量突破10万
  • QT聊天室基于Tcp
  • 公开课观后感:密歇根大学python for everyone
  • goweb框架-gin
  • 2024年接口测试高频面试题及答案
  • ESP32-C3在MQTT访问时出现“transport_base: Poll timeout or error”问题的分析(8)
  • Linux: 忘记密码的解决方法,passwd
  • 36. 有效的数独【 力扣(LeetCode) 】
  • 机器学习中的没有免费午餐定理
  • 高级java每日一道面试题-2024年8月21日-框架篇[Spring篇]-使用IOC容器应该注意哪些?
  • LLM训练推理相关概念
  • IP in IP 协议