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样式,原本垂直的列表就可以水平显示了。
相关推荐
2501_918126916 分钟前
小圆点踢足球
css·html·css3
半岛@少年13 分钟前
Webpack在前端项目中究竟发挥什么作用?
前端·webpack·前端工程化
2501_9400417414 分钟前
企业官网与品牌落地页,能直接交付的前端题目
前端
川冰ICE15 分钟前
JavaScript高级④|类(class)与面向对象,ES6现代写法
开发语言·javascript·es6
小番茄夫斯基21 分钟前
全球大模型的价格和能力排行汇总
前端·后端·架构
Sirius Wu22 分钟前
Agent模型冷启动问题
开发语言·javascript·人工智能·机器学习·ecmascript·aigc
小小小小宇34 分钟前
前端领域 30 个值得安装的 Agent Skills
前端
xkxnq37 分钟前
第八阶段:工程化、质量管控与高级拓展(132天),Vue项目文档自动化:VuePress搭建组件文档(组件示例+API说明)
javascript·vue.js·自动化
喵了几个咪38 分钟前
基于 Next.js 的 Headless CMS 前端架构:技术解析与二次开发导引
前端·javascript·架构
星栈39 分钟前
Makepad 不只是画界面:事件、状态和组件通信,到底怎么写
前端·rust