1.占据空间 ：none 隐藏后不占据空间 visibility占据空间
2.回流与渲染：none产生回流与渲染 ？ 可以通过oprea中的Profiler 工具测试。
display 和visibility的回流区别
回流 似乎是页面布局所需的时间
3.株连性：none 具有株连性 visibility没有。
也就是说如果设置了display：none 其子元素同样隐藏 但是visibility：hidden后 如果子元素有设置过 visibility：visible 那子元素不受父元素影响。

关于display：none 和visibility:hidden 的区别的更多相关文章

  1. 个人收集（转载）CSS中 display:none和visibility:hidden的区别

    visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...

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

    visibility:隐藏对应的元素但不挤占该元素原来的空间.display:隐藏对应的元素并且挤占该元素原来的空间. 下面来看visibility和dispaly的一些参数 visibility用来 ...

  3. display:none和visibility:hidden的区别？

    css控制元素不可见的方法 { display: none; /* 不占据空间,无法点击 */ } /************************************************* ...

  4. 前端面试题-display:none和visibility:hidden的区别

    一.display:none和visibility:hidden的区别 1.1 空间占据 1.2 回流和渲染 1.3 株连性 二.空间占据 display:none 隐藏后的元素不占据任何空间,而 v ...

  5. display:none与visibility: hidden的区别

    display:none和visibility: hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. ...

  6. CSS样式display:none和visibility:hidden的区别

    同样是隐藏,display:none与visibility:hidden有什么区别呢? 虽然display:none与visibility:hidden都能达到隐藏可见元素的作用(视觉上),但事实上, ...

  7. display:none和visibility:hidden的区别[]

    display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能,但两者有所区别,我发现使用 visibility:hidden属性会使对象不可见,但该对象在网页所占的空 ...

  8. [HTML/CSS]display:none和visibility:hidden的区别

    写在前面 在群里有朋友问这样一个问题,display:none的标签,影响了布局.这就引出了本篇这样的问题,印象中display:none的块元素是不占位置的. 一个例子 <!DOCTYPE h ...

  9. css中display:none与visibility: hidden的区别

    display: none; 隐藏元素,不占用其本来空间------对应元素显示用的是display:block; visibility: hidden:元素隐藏,占用其本来的页面空间-------- ...

  10. CSS display:none和visibility:hidden区别

    你知道CSSdisplay:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度.高度等各种属性值都将&qu ...

随机推荐

  1. 搭建自己的网站之一：如何在linux下使用tomcat

    1. 要打造自己的网站,首先应该有属于自己的服务器.个人的话可以在阿里云或者腾讯云购买云主机,需要的话再购买一个域名,与自己的公网ip绑定(不然只能由ip地址访问,当然,自己用来练手的话是没什么问题的 ...

  2. 基于redis 实现分布式锁的方案

    在电商项目中,经常有秒杀这样的活动促销,在并发访问下,很容易出现上述问题.如果在库存操作上,加锁就可以避免库存卖超的问题.分布式锁使分布式系统之间同步访问共享资源的一种方式 基于redis实现分布式锁 ...

  3. cocos初认识

    一直知道cocos是做游戏的,想学习一下,结果去官网一看就懵逼了.Cocos Creator,Cocos2d-x,cocos studio,Cocos2d-js,Cocos2d-x-lua,那一种才是 ...

  4. 一个将 footer 保持在底部的最好方法

    原文: Quick Tip: The Best Way To Make Sticky Footers 当你在布局网页时,有可能会遇到类似下面的这种情况 导致这一问题的原因是页面内容太少,无法将内容区域 ...

  5. Python操作MySQL

    本篇对于Python操作MySQL主要使用两种方式: 原生模块 pymsql ORM框架 SQLAchemy pymsql pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb ...

  6. oracle--游标--bai

    --复制表 create table emp as(select * from scott.emp); select * from emp; --(1) 最简单的游标 declare --声明并初始化 ...

  7. phpcms首页实现轮播图

    1.在你想要加轮播图的位置加入以下 <div id="flowDiagram" > <div id="button"> <span ...

  8. easyUI和bootstrap的混搭

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  9. SQL中部分语法整理

    1.SELECT DISTINCT 语句 关键词DISTINCT用于返回唯一不同的值. 语法: SELECT DISTINCT 列名称 FROM 表名称 2.SELECT INTO语句 SELECT ...

  10. XTREE随笔

    1.XTREE简介: XTREE是一个基于AJAX实现的树形菜单.它的原理就是每次都只加载当前结点下的所有结点,而对开发人员来说,就是只需要按一定的格式,生成一段XML代码.XTREE可以自己定制每个 ...