CSSで行要素をブロック要素に、ブロック要素を行要素に変換する方法-CSSチュートリアル-php.cn

CSSで行要素をブロック要素に、ブロック要素を行要素に変換する方法

青灯夜游

リリース： 2023-01-11 09:19:24

オリジナル

14277 人が閲覧しました

CSS では、display 属性を使用して行要素とブロック要素の間で変換できます。「display:block;」スタイルを行要素に追加してブロック要素に変換し、「display:inline」を追加します。 ;"をブロック要素に変換します。」スタイルでrow要素に変換できます。

CSSで行要素をブロック要素に、ブロック要素を行要素に変換する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

HTML では、タグは 2 つのレベルに分割されます:

インライン要素: 他のインライン要素と並べて表示します。幅と高さは設定できません。デフォルトの幅は次のとおりです。テキストの幅。
ブロックレベル要素: 1 行を占め、他の要素と並べることはできません。幅と高さを受け入れることができます。幅が設定されていない場合、幅はデフォルトで 100% になります。親。

##例:

タグはブロックレベル要素であり、タグはインライン要素です。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			p{
				background: paleturquoise;
			}
			span{
				background: paleturquoise;
			}
		</style>
	</head>
	<html>
		<body>
			<p>测试代码 p标签</p>
			<p>测试代码 p标签</p>
			<span>测试代码 span标签</span>
			<span>测试代码 span标签</span>
		</body>
	</html>

ログイン後にコピー

CSSで行要素をブロック要素に、ブロック要素を行要素に変換する方法

ただし要素の型は変換されますが、cssの表示属性を利用することで行要素とブロック要素の相互変換を実現できます。

表示属性は、要素が生成するボックスのタイプを指定します。

block この要素は、この要素の前後に改行を入れてブロックレベルの要素として表示されます。
インラインデフォルト。この要素は、要素の前後に改行のないインライン (インライン) 要素として表示されます。

ライン要素をブロック要素に変換

インライン要素に

display:block; を設定してインライン要素にします要素はブロックレベルの要素になります。

ブロック要素をライン要素に変換

ブロックレベル要素に

display:inline; を設定して、ブロックレベル要素をインライン要素にします。

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			p{
				background: paleturquoise;
				display: inline;
			}
			span{
				background: paleturquoise;
				display: block;
			}
		</style>
	</head>
	<html>
		<body>
			<p>测试代码 p标签</p>
			<p>测试代码 p标签</p>
			<span>测试代码 span标签</span>
			<span>测试代码 span标签</span>
		</body>
	</html>

ログイン後にコピー

CSSで行要素をブロック要素に、ブロック要素を行要素に変換する方法