CSS-display(显示)与visibility(可见性)
来源:互联网 发布:一斩必杀·村雨淘宝 编辑:程序博客网 时间:2024/06/05 23:54
display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
<style>h1.hidden {visibility:hidden;}</style>
display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
<style>h1.hidden {display:none;}</style>
CSS Display - 块和内联元素
块元素是一个元素,占用了全部宽度,在前后都是换行符。
块元素的例子:
<h1>
<p>
<div>
内联元素只需要必要的宽度,不强制换行。
内联元素的例子:
<span>
<a>
可以更改内联元素和块元素,反之亦然,可以使页面看起来是以一种特定的方式组合,并仍然遵循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>
span元素作为块元素:
<style>span{display:block;}</style></head><body><h2>swxctx</h2><span>bfhsdghfsghfjf</span><span>sw:2016</span><h2>sw</h2><span>sdffgdgfgfdgg</span><span>xc:1995</span></body>
使用表的collapse属性(隐藏指定行或列):
<style>tr.collapse {visibility:collapse;}</style></head><body><table border="1"><tr><td>sw</td><td>xc</td></tr><tr class="collapse"><td>tx</td><td>xt</td></tr></table></body>
0 0
- 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
- 知识点:page 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的不同
- Unity3d获取重力感应使手机黑屏
- POJ - 2406 Power Strings
- 实现滑动的七种方法(Android群英传)
- 在ADO.NET中使用参数化SQL语句的大同小异
- Linked List->single linked list
- CSS-display(显示)与visibility(可见性)
- [Anaconda] 常用包的安装命令
- 2016.7.31
- gulp自动化构建工具快速入门和实战
- 图片上传预览
- spark内存分析模型(小于1.5版本)-无原文版本-原创翻译
- Mac上Mysql跳过密码和权限的方法
- fiddler抓包工具模拟post请求
- Swift基础语法-属性,存储属性,延迟存储属性,计算属性,属性观察器,类属性