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样式,原本垂直的列表就可以水平显示了。
相关推荐
yusirxiaer4 分钟前
为什么 markRaw 能修复 Vue 3 + ECharts 的 resize 报错
javascript·vue.js·echarts
代码搬运媛17 分钟前
30分钟带你从0手搓一个AI-Cli命令行工具
前端
赛博切图仔24 分钟前
前端性能内卷终点?Signals 正在重塑我们的开发习惯
前端·javascript·vue.js
小江的记录本27 分钟前
【RAG】RAG检索增强生成(核心架构、全流程、RAG优化方案、常见问题与解决方案)
java·前端·人工智能·后端·python·机器学习·架构
程序员buddha30 分钟前
SCSS从0到1精通教程
前端·css·scss
ZC跨境爬虫37 分钟前
海南大学交友平台登录页开发实战day6(覆写接口+Flask 本地链接正常访问)
前端·后端·python·flask·html
Highcharts.js1 小时前
抉择之巅:从2029年回望2026年——企业可视化“战略分水岭”?
前端·javascript·信息可视化·编辑器·echarts·highcharts
沙振宇1 小时前
【Web】使用Vue3+PlayCanvas开发3D游戏(十)让人物动起来
前端·游戏·3d·人物·
米丘1 小时前
Vite 开发服务器启动时,如何将 client 注入 HTML?
javascript·node.js·vite
军军君011 小时前
数字孪生监控大屏实战模板:空气污染监控
前端·javascript·vue.js·typescript·前端框架·echarts·数字孪生