今天我们来讨论一下display和visibility两个CSS属性。
在讨论着两个属性之前我们先来看看HTML标签的全局属性。就是可以直接在HTML标签上直接写的属性。
以下是菜鸟教程的截图:

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


2.dir规定文本的方向;
(方向只有两个左到右,右到左)

3.建议绑定自定义属性的时候用data-*来进行绑定;
4.hidden可以用来隐藏标签。
5.不常用的属性tabindex(值为number)。按table键可以进行测试;
接下来正式进入主题;我们来讨论下display和visibility两个属性;
只讨论这两个属性相对于jquery中的show()和hide()属性;我们知道用jquery来控制元素的显示很隐藏很方便,但是这会导致一些性能渲染的问题;
在这里先链接一下张鑫旭大神的博客,如果不想看我的博客,可以直接跳出去看张大神的博客;
http://www.zhangxinxu.com/wordpress/2013/01/absolute-display-visibility-reflow/
一般来说我们会使用display:none;来隐藏元素,但是经过张大神做完实现发现这种方式会产生渲染回流,消耗浏览器性能;渲染时间比较长。所以当父级有position属性且值不是默认值,则可以将子元素的定位设置为绝对定位;可以用visibility:hidden;来隐藏元素,从而避免渲染回流;【菜鸟一个,如果有问题以后肯定会更正博客的。】
今天我们来讨论一下display和visibility两个CSS属性。的更多相关文章
- display和visibility的区别
一.display和visibility的相同与不同点 1.相同点:display和visibility都有讲元素隐藏的意思 2.不同点:display是元素隐藏,隐藏的元素不占文档流 而visibi ...
- 控制HTML元素的显示与隐藏——display和visibility
有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...
- display 与 visibility
项目开发中经常会遇到需要显示和隐藏DOM元素.常用的两个是display,visibility属性,高级点的会用到angularJS的ng-show,ng-if指令. W3标准对这个两个属性的解释如下 ...
- CSS display和visibility的用法和区别
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt408 大多数人很容易将CSS属性display和visibility混淆,它 ...
- display、visibility、visible区别
标签的隐藏可以有三种:display.visibility.服务器控件的visible. 显然,这三者都能起到隐藏与显示的效果,但是用途确完全不一样,请看用法与区别: <div style=&q ...
- 基础总结(04)-- display:none;&&visibility:hidden;区别
display:none 1.使元素隐藏,不再占据空间. 2.动态操作时会引起页面回流和重绘,影响性能. 3.子元素也会被隐藏并且添加display:block/visibility:visible无 ...
- 前端学习 -- Css -- display和Visibility
display 将一个内联元素变成块元素,通过display样式可以修改元素的类型.可选值: 1 inline:可以将一个元素作为内联元素显示. 2 block: 可以将一个元素设置块元素显示. 3 ...
- DIV中display和visibility属性差别
DIV中display和visibility属性差别 DIV中display和visibility属性差别还是挺大的,虽然Visibility和Display属性都可以达到隐藏页面元素的目的,但它们的 ...
- 【总结整理】display、visibility、overflow的隐藏问题
display.visibility.overflow的隐藏问题 http://blog.sina.com.cn/s/blog_85e7c239010151r4.html display:bloc ...
随机推荐
- tpyboard v202 测试tcp通讯,i2c的oled程序,呼吸灯源码,希望对大家有所帮助
1.下载到板子里的main.py代码如果需要驱动oled的,可以参考我上面那篇文章import time, mathimport machineimport network# from ssd1306 ...
- 动态规划(Dynamic Programming)算法与LC实例的理解
动态规划(Dynamic Programming)算法与LC实例的理解 希望通过写下来自己学习历程的方式帮助自己加深对知识的理解,也帮助其他人更好地学习,少走弯路.也欢迎大家来给我的Github的Le ...
- vue - Babel之babel-polyfill、babel-runtime、transform-runtime
引言 babel默认只转换新的 JavaScript 语法,比如箭头函数.扩展运算(spread). 不转换新的 API,例如Iterator.Generator.Set.Maps.Proxy.Ref ...
- 热点 | 近期Github热点项目库总结
整理 | Walker 介绍:你有没有想过你会成为一个艺术家,但无奈你不知道如何画画?得益于计算机视觉技术,你可以在ML社区轻松实现这个梦想.更棒的是,Github上ML社区的代码都是开源的! 这就是 ...
- Python学习-第四节:常用模块-logging,re,time
1:logging模块 import logging logging.debug('This is debug message') logging.info('This is info message ...
- JSP+SSH+Mysql+C3P0实现的传智播客网上商城
项目简介 项目来源于:https://gitee.com/2121/shop 本系统是传智播客授课时的开发案例,基于JSP+SSH+Mysql的简单网上商城.在当代开发中,SSH的使用已经逐渐被SSM ...
- stm32:简单按键输入实现
开发环境keil4,芯片STM32F103C8T6 1.main.c //串口实验 #include "sys.h" #include "delay.h" #i ...
- Git创建本地仓库&把pycharm项目添加GitHub仓库上
一.创建本地仓库 1.1.下载Git地址:https://git-scm.com/downloads 下载完,一路next就可以 1.2.打开Git Bash输入: #创建一个learngit目录 $ ...
- Light of future-冲刺Day 4
目录 1.SCRUM部分: 每个成员进度 SCRUM 会议的照片 签入记录 代码运行截图 用户浏览界面 管理员浏览界面 2.PM 报告: 时间表 燃尽图 任务总量变化曲线 每名成员的贡献比 归属班级 ...
- Java学习笔记--Arrays
Arrays(数组工具类)常用方法 Arrays.toString(int[] a)方法 -------> 返回类型为String,可以用来产生数组的可打印表示,避免了用循环依次读取数组值进 ...