CSS 显示

最新推荐文章于 2024-07-04 23:33:10 发布

冷月醉雪

最新推荐文章于 2024-07-04 23:33:10 发布

阅读量180

点赞数

分类专栏： CSS 实例 CSS 文章标签： CSS 显示实例

本文链接：https://blog.csdn.net/lengyuezuixue/article/details/81235165

版权

CSS 同时被 2 个专栏收录

53 篇文章 1 订阅

订阅专栏

CSS 实例

22 篇文章 0 订阅

订阅专栏

如何隐藏一个元素(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>

如何显示一个元素的内联元素

<!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>

参考：

https://www.yuque.com/docs/share/d1b8a505-ece6-4d0d-b2e6-77db88c5edfb