差异:

1。占用的空间不同。

可见性占用域空间,而显示不占用。

可见性和显示可以隐藏页面,例如:

将元素显示属性设置为block将在该元素后换行。

将元素显示属性设置为inline将消除元素换行。

将element display属性设置为none可隐藏元素内容而不占用域空间。

将“元素可见性”属性设置为“隐藏”,以隐藏元素内容,但占用域中的空间。

将“元素可见性”属性设置为“可见”,以显示元素内容。

2。对正常文档流的不同响应。

如果要隐藏某个元素,但在页面上为该元素留有空间,则应使用visibility:hidden。如果要在用空白填充其他内容时隐藏元素,则应使用display:none。

实际上,我发现人们更倾向于使用显示属性(我相信这也是大多数人的习惯)。当你决定隐藏一个显示元素:没有,你必须知道其他内容会填充那个元素留下的空白,从而改变页面的布局。

扩展数据

有时我们通过隐藏关键字来欺骗SEO,但不是使用可见性:隐藏和显示:无,我们应该设置关键字的颜色与背景色相同,或者关键字的大小非常小,这样访问者就找不到它们。

有些人担心可见性的使用:隐藏和显示:没有,因为他们害怕蜘蛛的排斥。实际上,通过元素可见性的转换,可以获得许多漂亮的效果。

搜索引擎也理解这种方法(事实上,搜索引擎往往忽略CSS),所以如果你的目标不是欺骗搜索引擎,你可以安全地使用可见性:隐藏和显示:无隐藏内容。

javascript中 visibility和display区别在哪的更多相关文章

  1. javascript中 visibility和display的区别

    visibility属性用来确定元素是显示还是隐藏的,这用visibility="visible|hidden"来表示(visible表示显示,hidden表示隐藏). 当visi ...

  2. 坑:JavaScript 中 操作符“==” 和“===” 的区别

    标题:JavaScript 中 操作符"==" 和"===" 的区别 记录一些很坑的区别: 1. '' == '0' // false 0 == '' // t ...

  3. js中 visibility和display的区别 js中 visibility和display的区别

    大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的. visibility属性用来确定元素是显示还是隐藏,这用visibility=&q ...

  4. visibility,display区别

    visibility:hidden,display:none 前者隐藏位置还在,后者隐藏位置消失

  5. javaScript中"=="和"==="运算符的区别

    相同点: 两个运算符均可用于比较两个值是否相等,可允许操作任意类型的操作数,如果操作数相等则返回true,否则返回false. 不同点: "==="运算符也称为严格相等运算符,它用 ...

  6. Javascript中valueOf与toString区别

    前言 基本上,所有JS数据类型都拥有这两个方法,null除外.它们俩解决JavaScript值运算与显示的问题,重写会加大它们调用的优化. 测试分析 先看一例:var aaa = {  i: 10,  ...

  7. javascript中in和hasOwnProperty区别

    in操作符只要通过对象能访问到属性就返回true.hasOwnProperty()只在属性存在于实例中时才返回true. function Person(){ } Person.prototype.n ...

  8. javascript 中 undefined 和 null 区别

    1.相同点 如果我们直接用 undefined == null  比较他们是相等的返回的将是 true. 2.区别 当我们用undefined === null 比较的时候最后返回的将是 false. ...

  9. javascript中apply,call,bind区别,bind兼容等问题总结

    1 三者的相似之处: (1).都是用来改变函数的this对象的指向的 (2).都是用第一个参数来做this对象的指向 (3).都可以传参数进去 那么,具体到它们有什么区别呢?请看下面的例子: 两个对象 ...

随机推荐

  1. 微pe安装原版win10怎么装|wepe安装原版win10 1803教程

    http://www.xitongcheng.com/jiaocheng/xtazjc_article_42199.html 怎么制作wepe启动盘?微pe是一款全新高效.多功能pe维护工具箱,同时支 ...

  2. IPv6 ping命令

    IPv6 ping命令 一.Linux操作系统 给一台 Linux 主机分配了一个 IPv6 的 IP地址,如何使用 ping命令 确定该 IP地址 能否 ping 通呢? 1.查看主机的 IPv6 ...

  3. Linux md5sum 命令

    Linux md5sum 命令 通过 Linux 的 md5sum 命令,可以对指定的文件,计算出唯一的一个MD5值(128bit). 通过比较文件前后的MD5值,可以判断文件是否发生变化(是否被修改 ...

  4. Dozer映射

    1.为什么要映射 一个映射的框架在一个分层的体系架构中非常有用,特别是你在创建一个抽象的分层去包装一些特殊数据的变化 vs 这些数据传输到其它层(外部服务的数据对象.领域的数据对象.数据传输对象.内部 ...

  5. Performance Analysis of Logs (PAL) Tool

    Performance Analysis of Logs (PAL) Tool 背景 在众多的独立项目中,我们如何快速了解数据库(SQL Server)服务器的性能,以及数据库的基线情况是怎样的,或者 ...

  6. JavaScript(9)—— CSS定位综合练习

    画布上画矩形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  7. 撸了一个简易的工具库: jeasy

    一年前,发现在工作的项目中存在大量使用monment的情况,但仅使用到最基础的format功能.monment的体积直接导致项目体积成倍增加,于是jeasy就诞生了. jeasy实现了monment最 ...

  8. 开发 --- IDE及小工具

    django-debug-toolbar 介绍: django-debug-toolbar 是Django调试工具条,提供了各种信息的获取,拥有极强的调试功能. 官网: https://django- ...

  9. Leetcode刷题6—不同路径

    一.要求 二.知识点 这道题属于动态规划,主要思路就是将大问题不断分解成小问题进行求解 三.解题思路 1.利用数学思路找规律 将m和n组合成一个m*n的矩阵,而且是一个对称阵 [[0],[1],[1] ...

  10. 移动端1px的边框

    我们知道,在移动端存在物理像素(physical pixel)和设备独立像素(density-independent pixel)的概念.物理像素也称为设备像素,它是显示设备中一个最微小的物理部件,每 ...