CSS Display(显示) 与 Visibility(可见性)
来源:互联网 发布:flothermal软件下载 编辑:程序博客网 时间:2024/05/18 03:26
1、隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
<!DOCTYPE html><html><head><style>h1.hidden {visibility:hidden;}</style></head><body><h1>This is a visible heading</h1><h1 class="hidden">This is a hidden heading</h1><p>Notice that the hidden heading still takes up space.</p></body></html>
display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
<!DOCTYPE html><html><head><style>h1.hidden {display:none;}</style></head><body><h1>This is a visible heading</h1><h1 class="hidden">This is a hidden heading</h1><p>Notice that the hidden heading does not take up space.</p></body></html>
2、CSS Display - 块和内联元素
块元素是一个元素,占用了全部宽度,在前后都是换行符。块元素的例子:<h1>、<p>、<div>
内联元素只需要必要的宽度,不强制换行。内联元素的例子:<span>、<a>
块元素(block element)
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易,也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
* noscript - )可选脚本内容(对于不支持script的浏览器显示此内容)
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
内联元素(inline element)
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器,定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
3、如何改变一个元素显示
可以更改内联元素和块元素,反之亦然,可以使页面看起来是以一种特定的方式组合,并仍然遵循web标准。下面的示例把列表项显示为内联元素:
<!DOCTYPE html><html><head><style>li{display:inline;}</style></head><body><p>Display this link list as a horizontal menu:</p><ul><li><a href="/html/" target="_blank">HTML</a></li><li><a href="/css/" target="_blank">CSS</a></li><li><a href="/js/" target="_blank">JavaScript</a></li><li><a href="/xml/" target="_blank">XML</a></li></ul></body></html>
<!DOCTYPE html><html><head><style>span{display:block;}</style></head><body><h2>Nirvana</h2><span>Record: MTV Unplugged in New York</span><span>Year: 1993</span><h2>Radiohead</h2><span>Record: OK Computer</span><span>Year: 1997</span></body></html>
- CSS-display(显示)与visibility(可见性)
- CSS Display(显示) 与 Visibility(可见性)
- CSS Display(显示) 与 Visibility(可见性)
- CSS Display(显示) 与 Visibility(可见性)
- CSS Display(显示)和visibility(可见性)
- CSS 可见性 display overflow visibility
- CSS之display与visibility
- CSS属性中Display与Visibility的不同 (键人岐)
- CSS属性中Display与Visibility
- CSS属性Display与Visibility不同(转)
- CSS属性Display与Visibility的不同
- CSS属性Display与Visibility的不同
- css中visibility与display的区别
- css中display与visibility的不同
- CSS里display与visibility地区别
- CSS中visibility与display的区别
- CSS属性,Display与Visibility的不同
- {{CSS}}visibility与display的区别
- Java的基本注解
- 2-1输出内容(document.write)
- leetcode_354 Russian Doll Envelopes
- -source 1.5 中不支持 diamond 运算符
- 技术小黑屋
- CSS Display(显示) 与 Visibility(可见性)
- 关于idea中怎么选择maven项目的profiles
- 广东海洋大学 电子1151 孔yanfei python语言程序设计 第四周
- 一. Windows程序内部运行机制--Windows编程课程学习笔记
- Openstack liberty 创建实例快照源码分析1
- Java Bean、POJO、 Entity、 VO 、PO、DAO
- 关于android Error:Execution failed for task ':app:transformClassesWithJarMergingForDebug'. > com.的解决方法
- Espresso 测试SwipeRefreshLayout 组件,下拉问题记录
- SVN e155004 locked