CSSでの表示の使い方-CSSチュートリアル-php.cn

CSSでの表示の使い方

清浅

リリース： 2018-11-21 14:13:56

オリジナル

10975 人が閲覧しました

一般的に使用される属性値の表示は、ブロックレベルのブロック、行レベルのインライン、行ブロックレベルのインラインブロック、なしであり、行レベルまたはブロックレベルのラベルは変換できます。

# この記事では、特定の参照値を持つ CSS の表示属性について説明します。

通常、値ブロック、なしを使用します。 CSS レイアウトを作成するときに、表示属性に、inline、および inline を追加します。 -block そこで、今日はそれらの使用方法を学習します。

表示属性

表示属性には、複数の値がありますが、一般的に使用される値は次のとおりです

none: この要素は表示されません。

block: この要素は、この要素の前後に改行を入れて、ブロックレベルの要素として表示されます。

inline: この要素は、要素の前後に改行を入れずに、インライン要素として表示されます。

inline-block: ブロックレベルの属性と行レベルの属性の両方を持つインラインブロック要素。

そこで、この記事では、一般的に使用される属性値である block、inline、inline-block、none について詳しく紹介します。

display: block

特徴: 単独で 1 行を占め、幅と高さは CSS を通じて変更可能

##一般的に使用されるブロックレベル要素: div、p、ul、li、ol、form、address

display :inline

特徴: コンテンツによってサイズが決まり、幅と高さは CSS を通じて変更できません

よく使用される行レベルの要素:span、strong , em, a, del

<style>
	div{
		background-color: pink;
	}
	span{
		background-color: yellow;
	}
	</style>
</head>
<body>		
	<div>123</div>//块级元素
 <p><span class="span">hello</span>world</p>//行级元素

ログイン後にコピー

上の図のように、ブロック要素が線幅全体を占めていることがわかります。width:100%と考えると、次の内容になります。新しい行で始めてください。

また、行レベル要素はそれ自体の部分のみを表示します。コンテンツは行を占有しません。

レンダリング

Image 13.jpg

行ブロックレベル要素の変換

(1) ブロックレベル要素を行レベル要素に変換

ブロックレベル要素の表示をインラインに設定します

結果は次のようになります

##(2) 行レベル要素をブロックレベルに変換します Image 15.jpg

行レベル要素にdisplay:blockを設定します

結果は次のとおりです。

Image 16.jpg display:inline-block

一般的なインラインブロック要素: img、 input

特徴: コンテンツによってサイズが決まり、幅と高さは変更可能

<style>
	span{
		background-color: yellow;
		display:inline-block;//设置行块级元素
		width:100px;
		height:30px;
	}
	</style>
</head>
<body>		
 <p><span class="span">hello</span>world</p>

ログイン後にコピー

レンダリング

display: none と Visibility: hidden の違い

#display: none は要素を非表示にするために使用されます。これは、表示されないだけでなく、サイズも占有しません。 ##visibility: hidden を使用して要素を非表示にすることもできますが、要素は表示されなくても存在し、空のスペースが残ります。例

display:none

 .span{
   background-color: aquamarine;
  display:none;}
	</style>
</head>
<body>		
 <p><span class="span">hello</span>world</p>

ログイン後にコピー

レンダリング

hello は非表示になりますが、スペースは残りません

visibility: hidden

Image 12.jpg

<style>
 .span{
  background-color: pink;
   visibility: hidden;}
</style>
</head>
<body>
 <p><span class="span">hello</span>world</p>

ログイン後にコピー

効果画像

hello は非表示になっていますが、まだ空席があります

要約: 以上がこの記事の全内容です。皆様のお役に立てれば幸いです。ヘルプ

Image 11.jpg

以上がCSSでの表示の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。