display:none与visibility:hidden有一个共同的作用是隐藏要显示的内容isplay:none 隐藏,但是不占空间 “看不见摸不到” 加载

display:none 隐藏,但是不占空间 看不见摸不到
不产生任何框,对布局没有影响,浏览器不显示其包括其后代元素,更不会占位

visibility:hidden 保留元素空间重绘,看不见 摸得到,相当于 留白 加载进来,因为他的空间是一直存在的,会生成元素框,只是元素不可视

针对他们的加载 现在有两种讨论,主要是针对于display:none的加载,visibility:hidden是页面加载时直接加载进来的,而对于display:none,到底是当其属性值从none改为block时才会加载还是一开始就加载进去不显示不占位,针对这个问题,有一个帖子也吵得挺厉害,具体是什么样不太清楚,个人感觉是一次性加载进去。

 

display:none与visibility:hidden区别的更多相关文章

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

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

  2. CSS样式“display:none”与“visibility:hidden”区别

    CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏,但是具体的效果是有差别的!下面通过两个小实验来说明这种差异. 实验代码: <!DOCTYP ...

  3. display:none和visibility:hidden区别

    <!-- display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: --> <!-- display:none 不为被隐藏的对象保留其物理空 ...

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

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

  5. 个人收集(转载)CSS中 display:none和visibility:hidden的区别

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

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

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

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

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

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

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

  9. display:none和visibility:hidden v-show和v-if的区别

    隐藏元素display:none 和 visibility:hidden的区别visibility:hidden可以隐藏某个元素,但是隐藏的元素仍要占据空间,仍要影响布局display:none不会占 ...

  10. CSS魔法堂:display:none与visibility:hidden的恩怨情仇

    前言  还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而visibilit ...

随机推荐

  1. 基于bootstrap样式的tree,

    <!doctype html><html lang="zh"><head> <meta charset="UTF-8" ...

  2. 【开源】玩的就是开源 - DevFw

    http://www.cnblogs.com/newmin/ 最近真的爱上开源了,将自己7年积累下来的部分代码,发布成为一个项目:DevFw 项目如下: 项目名称 描述 仓库 AtNet.DevFw. ...

  3. TypeScript学习笔记(四):函数

    这篇笔记我们来看看TypeScript中的函数. 函数类型 在JavaScript中存在两种定义函数的方法,如下: //命名函数 function add(x, y) { return x+y; } ...

  4. jquery的ajax和原始的ajax这两种方式的使用方法

    jquery的ajax是对原始的ajax进行的封装,方便用户的使用.下面用代码分别举例各自的使用方式. jquery的ajax发送和接收xml数据格式. $.ajax({ type: "PU ...

  5. JavaScript闭包函数的写法

    <script type="text/javascript"> //通过js内置的函数构造器创建函数 var func=new Function('a','b','re ...

  6. SignalR系列教程:在MVC5中使用SignalR

    本章主要内容: 1:向MVC5添加SignaIr 2: 什么是集线器,如何创建集线器 3: 客户端通过jqery调用集线器 本文还是延续“SignaIR快速入门”中聊天室的例子进行讲解.首先我们通过V ...

  7. OFTP说明

    OFTP (TheOdette File Transfer Protocol,RFC 2204)作为两个商业伙伴中建立EDI连接的一种协议.它由Odette-Organization于1986年创建. ...

  8. Python简单爬虫记录

    为了避免自己忘了Python的爬虫相关知识和流程,下面简单的记录一下爬虫的基本要求和编程问题!! 简单了解了一下,爬虫的方法很多,我简单的使用了已经做好的库requests来获取网页信息和Beauti ...

  9. 【转】高精度GPS测量中框架基准的统一

    一.地面基准点的坐标基准转换 一般情况下,我们可以从IERS或IGS等机构获取最新的站坐标和速度场,这些站坐标和速度场是在某一特定基准框架和历元下的坐标值,若要提供高精度GPS网的分析使用,还需要作框 ...

  10. ios7内购、Game Center 实现 in-App Purchases &amp; Game Center

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2D开发网–Cocos2Dev.com,谢谢! 原文地址: http://www.cocos2dev.com/?p=514 昨天使用ios7SDK b ...