zoukankan      html  css  js  c++  java
  • 浅谈display:none;visibility:hidden;opacity:0;的区别

    写着篇随笔的原因是,这几天在面试的过程中碰到了这个题目,主要的是我在WEB响应式设计一书中看到display:none;设置的内容浏览器依然会加载的。而在百度上看到的博文确实不会被加载。

    来图一发:

    是不是?而且这篇文章还不止在一个地方被转载了!!!。。。。。。

    display:none;把一个元素隐藏,同时去除了宽高,也就是在文档流中没有了元素的位置,但是会被加载的哦;

    visibility:hidden;把一个元素隐藏,但不同的是该元素在文档流中依然占有原来的位置,同样是被加载的哦;

    opacity:0;设置一个元素的透明度,当一个元素彻底透明了,也就是隐身啦,不用说也会占有其文档流的位置啦,也会加载的,哈哈!

    其实这个验证也是很容易的,写一个页面,只加载一张图片,当然这个图片的大小一定要大,对图片所在的DIV设置display:none;看浏览器的反应时间。对比试验就是设置成display:block;再看一下反应时间。原理很简单,这里就不在贴代码啦~~欢迎感兴趣的同学去试试啊!

    其实这里知识还是很多的,想了解的请猛点:

    详细介绍

  • 相关阅读:
    RDD(弹性分布式数据集)的分析
    Spark 开发环境搭建
    本地yum仓库的配置安装
    Java使用PDFBox操作PDF文件获取页码、文章内容、缩略图
    利用bdb实现持久化队列
    SQL查询重复记录
    SQL删除某个时间段的数据
    JAVA文件读取和解析
    多线程
    DOC解析xml
  • 原文地址:https://www.cnblogs.com/happycloud/p/3070310.html
Copyright © 2011-2022 走看看