在讨论着两个属性之前我们先来看看HTML标签的全局属性。就是可以直接在HTML标签上直接写的属性。

以下是菜鸟教程的截图:

1.看以下第一个快捷键的属性accesskey;设置的就不多说了。主要就是26个字母绑定就可以了。至于想用F1-F12来绑定的我是没有尝试成功。用法。

2.dir规定文本的方向;

(方向只有两个左到右,右到左)

3.建议绑定自定义属性的时候用data-*来进行绑定;

4.hidden可以用来隐藏标签。

5.不常用的属性tabindex(值为number)。按table键可以进行测试;

接下来正式进入主题;我们来讨论下displayvisibility两个属性;

只讨论这两个属性相对于jquery中的show()和hide()属性;我们知道用jquery来控制元素的显示很隐藏很方便,但是这会导致一些性能渲染的问题;

在这里先链接一下张鑫旭大神的博客,如果不想看我的博客,可以直接跳出去看张大神的博客;

http://www.zhangxinxu.com/wordpress/2013/01/absolute-display-visibility-reflow/

一般来说我们会使用display:none;来隐藏元素,但是经过张大神做完实现发现这种方式会产生渲染回流,消耗浏览器性能;渲染时间比较长。所以当父级有position属性且值不是默认值,则可以将子元素的定位设置为绝对定位;可以用visibility:hidden;来隐藏元素,从而避免渲染回流;【菜鸟一个,如果有问题以后肯定会更正博客的。】

今天我们来讨论一下display和visibility两个CSS属性。的更多相关文章

  1. display和visibility的区别

    一.display和visibility的相同与不同点 1.相同点:display和visibility都有讲元素隐藏的意思 2.不同点:display是元素隐藏,隐藏的元素不占文档流 而visibi ...

  2. 控制HTML元素的显示与隐藏——display和visibility

    有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...

  3. display 与 visibility

    项目开发中经常会遇到需要显示和隐藏DOM元素.常用的两个是display,visibility属性,高级点的会用到angularJS的ng-show,ng-if指令. W3标准对这个两个属性的解释如下 ...

  4. CSS display和visibility的用法和区别

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt408 大多数人很容易将CSS属性display和visibility混淆,它 ...

  5. display、visibility、visible区别

    标签的隐藏可以有三种:display.visibility.服务器控件的visible. 显然,这三者都能起到隐藏与显示的效果,但是用途确完全不一样,请看用法与区别: <div style=&q ...

  6. 基础总结(04)-- display:none;&&visibility:hidden;区别

    display:none 1.使元素隐藏,不再占据空间. 2.动态操作时会引起页面回流和重绘,影响性能. 3.子元素也会被隐藏并且添加display:block/visibility:visible无 ...

  7. 前端学习 -- Css -- display和Visibility

    display 将一个内联元素变成块元素,通过display样式可以修改元素的类型.可选值: 1 inline:可以将一个元素作为内联元素显示. 2 block: 可以将一个元素设置块元素显示. 3 ...

  8. DIV中display和visibility属性差别

    DIV中display和visibility属性差别 DIV中display和visibility属性差别还是挺大的,虽然Visibility和Display属性都可以达到隐藏页面元素的目的,但它们的 ...

  9. 【总结整理】display、visibility、overflow的隐藏问题

    display.visibility.overflow的隐藏问题 http://blog.sina.com.cn/s/blog_85e7c239010151r4.html   display:bloc ...

随机推荐

  1. Django HttpResponse

    HttpResponse 概述:给浏览器返回数据 HttpRequest对象是由django创建的,HttpResponse对象由程序员创建 用法 1:不调用模板,直接返回数据. 例: def get ...

  2. ML Lecture 0-1: Introduction of Machine Learning

    本博客是针对李宏毅教授在Youtube上上传的课程视频<ML Lecture 0-1: Introduction of Machine Learning>的学习笔记.在Github上也po ...

  3. Python第六章-函数02-函数的作用域

    函数 三.作用域规则 有了函数之后,我们必须要面对一个作用域的问题. 比如:你现在访问一个变量,那么 python 解析器是怎么查找到这个变量,并读取到这个变量的值的呢? 依靠的就是作用域规则! 3. ...

  4. GitLab → 搭建中常遇的问题与日常维护

    开心一刻 隔壁有一个80多岁的老大爷,昨天在小区的一棵树下发现一条黑色的蛇,冻僵了,大爷善心大发,就把蛇揣在了怀里,想给它一点温暖. 今天一大早看到大爷在树上挂了一个牌子,写到:不准随地大小便! 搭建 ...

  5. js数组的常用方法(10种)

    数组的常用方法 数组在JavaScript中经常使用,如何对数组进行增删改非常重要,下面为数组的常用方法: 在数组末尾插入元素 arr.push(value),在数组的末尾添加一个或多个元素,并返回数 ...

  6. 7.Metasploit后渗透

    Metasploit 高阶之后渗透 01信息收集 应用场景: 后渗透的第一步,更多地了解靶机信息,为后续攻击做准备. 02进程迁移 应用场景: 如果反弹的meterpreter会话是对方打开了一个你预 ...

  7. lly的数列询问(最小生成树 + 思维)

    lly的数列询问 Description 这个问题很简单,lly lly lly给你一些提示,让你试着确定长度为n n n的数列A [1] A [2] ... A [n]的值,但是他想尽一切办法为大家 ...

  8. vue中的js引入图片,使用require相关问题

    vue中的js引入图片,必须require进来 或者引用网络地址 <template> <div class="home"> <img alt=&qu ...

  9. pywinauto之PC端windows自动化测试

    pywinauto是一个用纯Python编写的GUI自动化库,并为Windows GUI精心开发.最简单的是,它允许您将鼠标和键盘操作发送到Windows和Linux上的对话框和控件,而到目前为止,仅 ...

  10. 百度找不到,但高手都知道(感觉他们都知道)的一个小细节--BUG调试报告

    语言 Batch 前言 以前我一直不明白为什么那么多应用程序在读取"文件路径"作为参数时为什么总是在正式的"文件路径"前要加上个"-f".& ...