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样式,原本垂直的列表就可以水平显示了。
相关推荐
掘金安东尼5 分钟前
互联网不再由 URL 为核心入口
前端·人工智能·github
Moment7 分钟前
面试官:用户访问到一个不存在的路由,如何重定向到404 Not Found的页面 ❓❓❓
前端·javascript·面试
前端小巷子10 分钟前
深入 Vue3 computed
前端·vue.js·面试
未来的旋律~21 分钟前
Web程序设计
前端
全宝21 分钟前
实现一个有意思的眼球跟随卡片
前端·javascript·css
全宝28 分钟前
用css做一枚拟物风格的按钮
前端·css·svg
IT_陈寒36 分钟前
3年Java开发经验总结:提升50%编码效率的7个核心技巧与实战案例
前端·人工智能·后端
yqcoder43 分钟前
vue2 和 vue3 生命周期的区别
前端·javascript·vue.js
excel1 小时前
前端人必备的 JavaScript API 全面指南(含 postMessage、File、Stream、Web 组件等)
前端
m0_738120726 小时前
CTFshow系列——命令执行web53-56
前端·安全·web安全·网络安全·ctfshow