在讨论着两个属性之前我们先来看看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. effective-java学习笔记---使用实例属性替代序数35

    永远不要从枚举的序号中得出与它相关的值; 请将其保存在实例属性中: public enum Ensemble { SOLO(1), DUET(2), TRIO(3), QUARTET(4), QUIN ...

  2. OpenCV-Python 姿态估计 | 五十

    目标 在本章中 我们将学习利用calib3d模块在图像中创建一些3D效果. 基础 这将是一小部分.在上一次相机校准的会话中,你发现了相机矩阵,失真系数等.给定图案图像,我们可以利用以上信息来计算其姿势 ...

  3. MNIST数据集介绍

    大多数示例使用手写数字的MNIST数据集[^1].该数据集包含60,000个用于训练的示例和10,000个用于测试的示例.这些数字已经过尺寸标准化并位于图像中心,图像是固定大小(28x28像素),其值 ...

  4. FileReader 和Blob File文件对象(附formData初始化方法);

    一.FileReader为读取文件对象 . api  地址   相关demo 现在只讨论  readAsArrayBuffer,readAsBinaryString,readAsDataURL,rea ...

  5. 如何有效的阅读JDK源码

    阅读Java源码的前提条件: 1.技术基础 在阅读源码之前,我们要有一定程度的技术基础的支持. 假如你从来都没有学过Java,也没有其它编程语言的基础,上来就啃<Core Java>,那样 ...

  6. 怎么获取WebAPI项目中图片在服务端的路径

    1.这是我的项目结构. 2.路径格式为:[http://服务器域名/文件夹/文件.扩展名] 测试:假如我要获取到[logo_icon.jpg]这张图.在浏览器的地址栏中输入上面那个格式的路径. 3.可 ...

  7. ionic中select下拉框点击无反应解决办法

    两种解决办法: 1.在select外的div加入属性 data-tap-disabled=”true” 2.找到ionic.bundle.js文件 的下面这个函数,添加如图两行代码  

  8. POJ 3273Monthly Expense(二分答案)

    题目链接 思路如下 题意:这一题让我们在一个 n 个数的序列,分成连续的的 m个子串(一个数也可是一个子串),是在所有子串中 和最大的子串 的和最小. 思路:我们可以用 二分法 来一个一个枚举答案,二 ...

  9. JavaScript中数组的两种排序方法详解(冒泡排序和选择排序)

    一.冒泡排序的原理(从小到大) 相邻两个数进行比较,如果前一个数大于后一个数,那么就交换,否则不交换 原理剖析 比如有一组含有6个数字的数:5.3.7.2.1.6一共6个数字,做5次循环,每次循环相邻 ...

  10. 分享一下,PHP实现第四方QQ微信扫码登陆,不接入qq互联以及微信开发者平台就可以实现用户对接鹅厂,phpQQ微信扫码登陆

    自己抓的QQ包以及整合了网上一些已经封装好了的代码具体如下:QQ: <?php class QQ extends Curl_Api { //获取登录验证码 public function QRc ...