专栏首页鲸鱼动画display , visibility

display , visibility

display: none; 与 visibility: hidden; 的区别:

相同: 它们都能让元素不可见

区别:

display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;

visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见

示例:

补充内容:

display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示; visibility:hidden;是继承属性,子孙节点消失由于继承了 hidden,通过设置 visibility: visible;可以让子孙节点显式 修改常规流中元素的 display 通常会造成文档重排。 修改 visibility 属性只会造成本元素的重绘 读屏器不会读取 display: none;元素内容; 会读取 visibility: hidden 元素内容

什么是重绘,什么是回流?

这问题太简单了,没必要单独写博客

重绘:

重新渲染页面! 元素位置、大小等都不改变,只改变颜色或形状等外观样式。

回流:

元素位置或大小或隐藏状态等发生改变时,重新渲染页面。

重绘不一定引起回流,回流必将引起重绘

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS文件夹

      网上冲浪时发现的瑰宝,特别适合刚学习过 transform 的同学拿来练习,也比较适合前端大能拿来复习CSS 。素材来源于 “ 站长之家 ”

    我不是费圆
  • 纯CSS换肤

    老规矩,先把代码给大家,拿去粘贴直接用,无需引用,不好用评论底下随便喷,我一条一条看。

    我不是费圆
  • 选择排序,冒泡排序

    我不是费圆
  • pyhanlp文本分类与情感分析

    本文语料库特指文本分类语料库,对应IDataSet接口。而文本分类语料库包含两个概念:文档和类目。一个文档只属于一个类目,一个类目可能含有多个文档。比如搜狗文本...

    IT小白龙
  • 学界 | 新型循环神经网络IndRNN:可构建更长更深的RNN(附GitHub实现)

    选自arXiv 作者:Shuai Li等 机器之心编译 参与:张倩、黄小天 近日,澳大利亚伍伦贡大学联合电子科技大学提出一种新型的循环神经网络 IndRNN,不...

    机器之心
  • 人工智能学会“听音辨声”

    美国麻省理工学院的科研人员开发出一套人工智能系统,能够分辨出音乐中不同乐器发出的声音,并单独调音。

    人工智能快报
  • PHP面向对象核心(二)——继承、多态、接口

    PHP面向对象核心(二) (原创内容,转载请注明来源,谢谢) 三、继承与多态 3.1 继承 1、继承是类级别的复用,关键词为extends;多态是方法级别的复用...

    用户1327360
  • 【AngularJS】—— 11 指令的交互

    前面基本了解了指令的相关内容:   1 如何自定义指令   2 指令的复用 本篇看一下指令之间如何交互。学习内容来自《慕课网 指令3》 背景介绍 ...

    用户1154259
  • ApplicationHttpRequest cannot be cast to MultipartHttpServletRequest springMVC 文件上传转换出错解决

    1、确认<form name=”contractForm” id=”contractForm” action=”” method=”post” enctype ...

    Java架构师历程
  • 数据一致性校验及数据同步,运维必看

    主从数据不一致对DBA来说是一个比较头疼的事情,刚接触MySQL时,遇到这种问题我一般采用重新还原备库的方式恢复数据,这对我来说是个很痛苦的过程。今天就来介绍两...

    MySQL数据库技术栈

扫码关注云+社区

领取腾讯云代金券