ホームページ > 記事 > ウェブフロントエンド > CSSでの表示の使い方
CSSでの表示の使い方
- 清浅オリジナル
- 2018-11-17 15:46:0510969ブラウズ
一般的に使用される属性値の表示は、ブロック レベルのブロック、行レベルのインライン、行ブロック レベルのインライン ブロック、なしであり、行レベルまたはブロック レベルのラベルは変換できます。
# この記事では、特定の参照値を持つ CSS の表示属性について説明します。通常、値ブロック、なしを使用します。 CSS レイアウトを作成するときに、表示属性に、inline、および inline を追加します。 -block そこで、今日はそれらの使用方法を学習します。表示属性
表示属性には、複数の値がありますが、一般的に使用される値は次のとおりです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%と考えると、次の内容になります。新しい行で始めてください。
また、行レベル要素はそれ自体の部分のみを表示します。コンテンツは行を占有しません。
レンダリング
(1) ブロックレベル要素を行レベル要素に変換
ブロックレベル要素の表示をインラインに設定します
結果は次のようになります
##(2) 行レベル要素をブロックレベルに変換します
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> レンダリング
<style>
.span{
background-color: pink;
visibility: hidden;}
</style>
</head>
<body>
<p><span class="span">hello</span>world</p>効果画像
以上がCSSでの表示の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。