差异:

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. 对于ssh服务的简单配置,似的自己的服务器更加安全

    对于一台服务器,最大的问题莫过于安全.没有安全性的服务器即使再牛*,性能再好,作用再大,也是分分钟被人搞定,而且还是揉虐性的...当然万事没有绝对的安全,我们只是将危险降低而已.本文只针对于ssh服务 ...

  2. js复选框实现全选、全不选、反选

    复选框为checkbox对象 通过input就可以将一个简单的复选框呈现在页面上 <input type="checkbox" /> 要实现的大概就是这样一个页面 思路 ...

  3. MongoDB in Action (MongoDB 实战).pdf

    http://www.open-open.com/doc/view/691d4d2232ce4b30b14c6b218fff4be8

  4. ElementTree

    http://effbot.org/zone/element-index.htm#installation http://effbot.org/zone/element-xpath.htm

  5. openstack部署neutron

    controller 1.创建数据库并设置权限 mysql -u root -p0330 CREATE DATABASE neutron; GRANT ALL PRIVILEGES ON neutro ...

  6. MATLAB学习(一)数组、变量、表达式、常用简单运算

    >> x=[1 2 3;4 5 6;7 8 9] x = 1 2 3 4 5 6 7 8 9 >> y=[1,2,3] y = 1 2 3 >> y=[1,2,3 ...

  7. springboot-RequestMappingHandlerMapping

    作用:查看应用请求对应的ur和方法l情况 实例: RequestMappingHandlerMapping mapping =applicationContext.getBean("requ ...

  8. vue自定义过滤器的创建与使用

    原文地址 过滤器:生活中有很多例子,净水器 空气净化器 .过滤器的作用:实现数据的筛选.过滤.格式化. vue1.*版本是有内置的过滤器,但是在vue2.*所有的版本都已经没有自带的过滤器了. 1.过 ...

  9. vue-cli按需引入Element UI组件

    一.环境 使用vue-cli搭建的环境 二.安装 babel-plugin-component npm install babel-plugin-component -D 三.修改.babelrc文件 ...

  10. ubuntu 16.04主题美化

    目录 numix图标 Flatabulous主题 参考: Unity-tweak-tool插件 numix图标 sudo apt-add-repository ppa:numix/ppa sudo a ...