CSS Display(显示)与Visibility(可见性)

最新推荐文章于 2024-10-04 13:52:58 发布

原创最新推荐文章于 2024-10-04 13:52:58 发布 · 560 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #Display #visibility

CSS 专栏收录该内容

53 篇文章

订阅专栏

本文介绍了CSS中display和visibility属性的使用方法，展示了如何通过这些属性控制网页元素的显示方式，包括隐藏元素、调整块级与内联元素以及使用collapse属性控制表格行的可见性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

隐藏元素--display:none或visibility：hidden

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

visibility：hidden可以因此某个元素，但隐藏的元素仍需占用与隐藏之前一样的空间。也就是会所，该元素虽然被隐藏了，但仍然会印象布局。

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.com)</title>  
	<style>
		h1.hidden {visibility:hidden;}
	</style>
</head>  
<body > 
	<h1>这是一个可见标题</h1>
	<h1 class="hidden">这是一个隐藏标题</h1>
	<p>注意，实例中的隐藏标题仍然占用空间。</p>
</body>  
</html>

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.com)</title>  
	<style>
		h1.hidden {display:none;}
	</style>
</head>  
<body > 
	<h1>这是一个可见标题</h1>
	<h1 class="hidden">这是一个隐藏标题</h1>
	<p>注意，实例中的隐藏标题不占用空间。</p>
</body>  
</html>

CSS Display -- 块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：

<h1>
<p>
<div>

内联元素只需要必要的宽度，不强制换行。

内联元素的例子：

<span>
<a>

如何改变一个元素显示

可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。

下面的示例把列表项显示为内联元素：

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.com)</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>

下面的示例把span元素作为块元素：

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.com)</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>

实例

如何显示元素的内联元素

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.com)</title>  
	<style>
		p {display:inline;}
	</style>
</head>  
<body > 
	<p>display 属性的值为 "inline"的结果</p>
	<p>两个元素显示在同一水平线上。</p>
</body>  
</html>

如何显示元素的块元素

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.com)</title>  
	<style>
		span
		{
			display:block;
		}
	</style>
</head>  
<body > 
	<span>display 属性值为 "block" 的结果</span> <span>这两个元素之间的换行符。</span>
</body>  
</html>

如何使用一个表的collapse属性

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.com)</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>

笔记

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

块级元素主要有：

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有：

a , abbr , acronym , b , bdo , 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

可变元素(根据上下文关系确定该元素是块元素还是内联元素)：