差异:

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. highcharts 代码都对,但是不显示图片

    $('#container').highcharts({ chart: { zoomType: 'xy' }, title: { text: 'Average Monthly Temperature ...

  2. webpack publicpath path

    一.publicpath 用绝对路径:如 /assets/ 会在支援路径前 加上 /assets/ devServer  publicpath 如果没有设置的话,取 publicpath 所以 一般要 ...

  3. usage memcache in linux

    set和add的区别 set可以重写存在的键值对, 也可以添加新的/ 而add不行, 如果存在已有的键名, 则add不会做更新该键值对, 不做任何事, 就是一次无效操作, 也就是, add可以防止重写 ...

  4. VBA读写XML文件

    'Write XML file Sub WriteXML(fpa$, fn$) Dim xmlfile As String xmlfile = ThisWorkbook.Path & &quo ...

  5. linux的dos开关机命令

    常用:halt.reboot CentOS关机命令: 重启命令 reboot shutdown -r now 立刻重启 shutdown -r 10 过10分钟自动重启 shutdown -r 20: ...

  6. vue 面试题(文章末尾还有其他链接)

    https://segmentfault.com/a/1190000016344599

  7. idea设置包的导入和提示重复代码下波浪线

    1.一般idea都不会导入包.即使按了(以下都是已eclipse设置idea的快捷键) alt+enter键也不能导入. 2.关闭重复代码提示(也就是重复代码有波浪线)

  8. Cell中实现多图展示

    实现的效果如下: 主要实现代码如下: // // DetailCell.m // Floral // // Created by 思 彭 on 16/9/21. // Copyright © 2016 ...

  9. jenkins打开空白页

    1.登录jenkins报错提示hudson.security.AccessDeniedException 解决: 修改Jenkins_home/config.xml文件里面的一段内容改成如下 < ...

  10. DevOps - DevOps工具链

    不要满足于使用世界上已存在的各种方法和技术,而应重点放在希望达到的效果上! 单单使用工具不难,困难的是在团队开发中熟练使用,并形成一套理想的工作流程,只有在团队中工具和思想才能发挥最大价值. 开源工具 ...