其他分享
首页 > 其他分享> > 显示：display和visibility

显示：display和visibility

作者：互联网

Display和Visibility

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

1、隐藏效果练习


visibility

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>visibility练习</title> 
<style>
h1.hidden {visibility:hidden;}
</style>
</head>

<body>
<h1>这是一个可见标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意, 实例中的隐藏标题仍然占用空间。</p>
</body>
</html>


display

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>display练习</title> 
<style>
h1.hidden {display:none;}
</style>
</head>
<body>
	
<h1>这是一个可见标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意, 实例中的隐藏标题不占用空间。</p>
	
</body>
</html>

2、如何改变一个元素显示


CSS中块级、内联元素的应用：

利用CSS我们可以摆脱HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

例如我们常将所有

  • 元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

    • 下边我们用两个例子来演示如何改变元素显示

    2.1 列表项改内联元素

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>块级转内联</title> 
<style>
li{display:inline;}
</style>
</head>
<body>

<p>链接列表水平显示：</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>

    2.2 span元素改块元素

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>span元素改块元素</title> 
<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>

    3、如何使用一个表格的collapse属性

    visibility : callapse;

    代码练习

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>表格collapse属性的使用</title> 
<style>
table, th, td {
    border: 1px solid black;
}

tr.collapse {
    visibility: collapse;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr class="collapse">
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

<p><b>注意:</b> IE8 及其更早版本需要通过指定 !DOCTYPE 才可以支持 visibility:collapse。</p>

</body>
</html>

    生成页面效果

    知识点回顾

    表格的定义和用法

    HTML 表单中有两种类型的单元格：

    • 表头单元格 - 包含表头信息（由 th 元素创建）

    • 标准单元格 - 包含数据（由 td 元素创建）

    th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。

    标签：显示,元素,visibility,隐藏,hidden,display,属性
    来源： https://www.cnblogs.com/xypersonal/p/16192138.html