CSSの表示属性で共通する4つの属性値の使い方を詳しく解説（コード例）-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSの表示属性で共通する4つの属性値の使い方を詳しく解説（コード例）

青灯夜游

Sep 07, 2018 pm 02:00 PM

Web フロントエンドを開発する場合、Web サイトをより視覚的に美しく、効果を豊かにするために、CSS の強力なプロパティは当然ながら不可欠な役割を果たします。そこでここでは、Web フロントエンドを開発するときによく使用する属性、css 表示属性について説明します。すべての主要なブラウザは、display 属性をサポートしています。次に、表示属性が要素が生成するボックスのタイプを指定することは誰もが知っています。これは CSS 表示属性でよく使用され、最も一般的な属性値でもあります: none、block、inline、inline-blockt。

次に、具体的なコード例を使用して、css の表示属性で最も一般的な属性値の使用方法を 1 つずつ説明します。

One: display: none、設定要素は表示されません

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>css display:none</title>
		<style>
			* {
				padding: 0;
				margin: 0;
				list-style: none;
			}
			.demo{
				width: 200px;
				height: 200px;
				margin:50px auto;
			}
			
			ul li {
				float: left;
			}
			
			span {
				width: 30px;
				height: 30px;
				color: #fff;
				background: red;
				margin: 5px;
				text-align: center;
				line-height: 30px;
			}
			.a1{
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<p>数字2不会显示出来</p>
			<ul>
				<li>
					<span>1</span>
				</li>
				<li>
					<span class="a1">2</span>
				</li>
				<li>
					<span>3</span>
				</li>
				<li>
					<span>4</span>
				</li>
				<li>
					<span>5</span>
				</li>
			</ul>
		</div>
	</body>

</html>

上記のコードのレンダリングは次のとおりです:

CSSの表示属性で共通する4つの属性値の使い方を詳しく解説（コード例）

display: none、設定要素は表示されず、スペース要素をリアルにするものは表示されませんので、そのままにしておきます。しかし、もう 1 つの可視性があります。hidden です。これは、要素のスペースを保持します。詳細については、CSS 可視性プロパティを参照してください。

2 つ: display:block、要素をブロックレベルの要素として表示します。

要素の前後に改行を入れて、要素をブロックレベルの要素として表示します。ブロックに設定した後、要素は幅と高さを設定できます。要素は独自の行を占めます。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>css display:block</title>
		<style>
			* {
				padding: 0;
				margin: 0;
				list-style: none;
			}
			.demo{
				width: 500px;
				height: 200px;
				margin:50px auto;
			}
			
			ul li {
				float: left;
			}
			
			span {
				display:block; 
				width: 30px;
				height: 30px;
				color: #fff;
				background: red;
				margin: 5px;
				text-align: center;
				line-height: 30px;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<p>span元素定义了宽与高，宽与高都显示为30px</p>
			<ul>
				<li>
					<span>1</span>
				</li>
				<li>
					<span>2</span>
				</li>
				<li>
					<span>3</span>
				</li>
				<li>
					<span>4</span>
				</li>
				<li>
					<span>5</span>
				</li>
			</ul>
		</div>
	</body>

</html>

上記のコードのレンダリングは次のとおりです:

CSSの表示属性で共通する4つの属性値の使い方を詳しく解説（コード例）

Span タグの幅と高さは両方とも 30px で表示されます。コード内の display:block を削除すると、表示されるレンダリングは次のようになります:

CSSの表示属性で共通する4つの属性値の使い方を詳しく解説（コード例）

明らかに、display:block を削除すると、スパンの高さと幅を設定できません。

spanタグはインライン要素です。要素の高さ、幅、上下左右のマージン、パディング、マージンは設定できません。ただし、spanタグにdisplay:blockが設定されている場合は、インライン要素が設定されます。はブロック要素に変換できるため、要素の高さ、幅、上下左右のマージン、パディング、マージンを設定できます。

3: display:inline、要素をインライン要素

display のデフォルト属性として表示します。要素を前後に改行を入れずにインライン要素として表示します。インライン要素の幅と高さは設定できないことがわかっているため、要素の表示属性がインラインに設定されると、属性の高さと幅を設定しても意味がありません。このとき、影響を受ける高さは一般に内部要素の高さ(font-size)とパディングです。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>css display:block</title>
		<style>
			* {
				padding: 0;
				margin: 0;
				list-style: none;
			}
			.demo{
				width: 1000px;
				height: 200px;
				margin:50px auto;
			}
			.demo p{
				display:inline ;
				color: #0081EF;
			}
			.demo div{
				display:inline ;
				color: #70DBDB;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<p>p标签和div标签同为块状元素，本应无法在同一行显示;</p>
			<div>此时全为内联元素，不换行，在同一行显示。</div>
		</div>
	</body>

</html>

上記のコードのレンダリングは次のとおりです:

CSSの表示属性で共通する4つの属性値の使い方を詳しく解説（コード例）