聊聊 CSS 隐藏元素的 10 种实用方法
CSS 隐藏元素的方法你能说出来几种?
这是一个在初级 web 前端面试中可能常会提及的问题,聊这个话题不仅仅只是讨论“茴”字有几种写法,更是能从一个简单的问题中体现出你的 CSS 边界能力,本文提炼了十种最实用的方法,希望对你有所帮助。
常规方法
display: none;
结构消失,会触发回流重绘(Reflow
& Repaint
)。
opacity: 0;
结构保留,占据空间,可以正常触发事件,因触发硬件加速所以不发生回流和重绘。
visibility: hidden;
结构保留,占据空间,仅触发重绘,不会触发事件(无法选中)。
content-visibility: hidden;
设置元素内容可见性,设置的元素本身不受影响。hidden
隐藏效果与 display: none
类似,但实际浏览器只是跳过了内容的渲染,还保留着内容的渲染状态,性能上有优势。
注意:该属性目前还处于实验性阶段,使用时需要考虑浏览器兼容性问题。
逃逸视窗
position
+ left/top
利用绝对定位 position
设置 absolute
或 fixed
,同时 left
或 top
设置 -9999px
;
超大负边距会将元素抛出视图,因为定位本身脱离了文档流所以不占据空间。
translate(-9999px)
利用偏移抛出视图,空间会占据,不过元素实际不在视窗内所以无法交互。
transform: translate(-9999px);
注意:此方法对行内元素无效!
这两种方法并不使元素本身消失,只是看不见了而已。
移行变换
scale(0) / skew(90deg)
通过2D变换来达到隐藏,占据空间,不可交互。
transform: scale(0);
transform: skew(90deg);
注意:此方法对行内元素无效!
circle(0px)
利用裁剪创建元素的可显示区域,区域外会隐藏,占据空间,不可交互(这里我用 circle 是因为它参数最少)
clip-path: circle(0px);
z-index
层叠上下文在合适的情况下可以遮挡住元素,也算是一种隐藏方式。
压缩空间
height: 0; width: 0;
宽高都为 0 时不占据空间,不可交互。需要处理边距等样式,还需设置 overflow: hidden;
否则子元素可能不会隐藏,注意还会被display
影响,所以这个方法本身并不实用,但是可以充分体现对盒模型的理解。
width: 0;
height: 0;
padding: 0;
margin: 0;
border: none;
overflow: hidden;
总结
或许还有其它“障眼法”可以让元素不可见,以上整理的十种方法都独具代表性,且比较实用。
以上就是文章的全部内容,感谢看到这里!本人知识水平有限,如有错误望不吝指正,如果觉得写得不错,对你有所帮助或启发,可以点赞收藏支持一下,我会更新更多实用的前端知识与技巧。
相关文章
- css opacity属性_CSS中的opacity属性[通俗易懂]
- YUI Compressor插件压缩后war中的js/css文件未压缩的解决方法(被maven打包顶替了)
- 【说站】python concat方法的作用
- 谷歌注册账号手机号码无法用于验证,大陆手机可以正常注册方法!
- Oracle 查询死锁并解锁的终极处理方法
- MySQL实现时间触发器的方法(mysql时间触发器)
- Linux下播放AVI视频的方法(linux播放avi)
- Oracle中实现日期格式转换的方法(oracle转换日期)
- 关于Linux系统乱码问题处理方法
- MySQL两表去重方法汇总(mysql中两表去重)
- MySQL登陆系统CSS实现一键登录(css mysql登陆)
- 用css来控制图片大小显示的实现方法与代码
- DIV和CSS排版中制作细线条的方法小结
- 发现四种在网页中使用CSS样式表的方法
- css不换行自动换行强制换行的实现方法
- CSS美化表格边框为凹陷立体效果的实现方法
- juqery学习之六CSS--css、位置、宽高
- Asp.net控制Tomcat启动关闭的实现方法
- 存储过程配合UpdateDaset方法批量插入Dataset数据实现代码
- 你未必知道的JavaScript和CSS交互的5种方法
- jQuery操作元素css样式的三种方法
- C++取得当前时间的方法
- ASP.Net中利用CSS实现多界面的两种方法
- js动态修改css文件的方法