ホームページ > 記事 > ウェブフロントエンド > CSS ブロックレベルのタグ、インライン タグ、およびインライン ブロック タグの変換 (2)
CSS ブロックレベルのタグ、インライン タグ、およびインライン ブロック タグの変換 (2)
- 高洛峰オリジナル
- 2017-02-22 13:34:521638ブラウズ
HTMLタグの分類
タグの分類について話すとき、初心者として、初めてタグを使用するとき、幅、高さ、水平方向の中央揃えなど、一部の属性が一部のタグで機能しないことに気づくでしょう。実際、この属性の使用は、ブロックレベルのタグで使用された場合にのみ機能します。個人的に初心者が見落としやすい点だと思うので書いてみました！
まず、HTMLタグは、表示に応じてブロックレベルタグ、インラインタグ、インラインブロックタグに分けて紹介します。
ブロックレベルタグ
特徴：は専用の行を占有し、高さ、幅、行の高さ、上下の余白を設定できる属性値幅が指定されていない場合は、ブロック レベルの要素がデフォルトでブラウザの幅 (100%) に設定されます。一般的なブロック レベルのタグは次のとおりです:
、h シリーズ、
、
インラインラベル
特徴: 複数のラベルが存在可能インライン ラベルの高さ、幅、行を直接設定することはできません。高さと上下の余白は、幅と高さをサポートするコンテンツに完全に依存します。 典型的なインライン タグは次のとおりです: 、、、、、、、
インラインブロックタグ:
特徴: インラインレベルとブロックレベルの利点を組み合わせることで、幅と高さの属性値に影響を与えるだけでなく、複数のラベルを 1 行に表示することもできます。 典型的なインラインタグには以下が含まれます: 、
1. ブロックレベルのラベルをインラインラベルに変換します: 2.ブロックレベルのタグ：display:block;
3. インラインブロックタグに変換：display:inline-block; 対応するタグのdisplay属性を使用し、対応する値を取得する限り、次のように表示できます。モードを相互に変換します。以下の例を参照してください:
1: インラインタグをブロックレベルのタグに変換します
<!DOCTYPE html>
<html>
<head>
<title>行内标签转块级标签</title>
<style type="text/css">
a{
width: 200px;
height: 200px;
background-color: red;
display: block;
}
</style>
</head>
<body> <!--正常情况a标签作为一个行内标签你设置长和宽是没有效果的-->
<a href="https://www.baidu.com">百度</a>
</body> <!--而当你用display: block;代表行内标签转为块级标签-->
</html> 実行結果は次のとおりです。赤い部分をクリックすると Baidu にジャンプします。リンク範囲の拡大を実現できます。
2:
インラインタグをインラインブロックタグに変換します
インラインブロックレベルタグとブロックレベルタグの違いは上で述べましたが、もう一度強調します: ブロックレベルタグインライン ブロック レベル タグ 長さと幅は設定できますが、ブロック レベル タグを設定すると、自動的に折り返されます。この行には他に何も配置できません。インライン ブロック レベル タグは複数配置できます。同じ行のインラインタグについて、具体的に説明します。
<html>
<head>
<title>块级和行内块级</title>
<style type="text/css">
a{
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
p{
width:100px;
height:100px;
background-color: red;
margin-top:10px; /* margin-top是来设置上下两个块的上下间距，关于盒子下一节我单独来讲*/
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a> <!--通过 display: inline-block;就可以将行内标签转为行内块级标签-->
<a href="https://www.baidu.com">百度一下</a>
<p>我是p1</p> <!--这个是一般的块级标签，会上下分行-->
<p>我是p2</p>
</body>
</html>実行結果:
3. ブロックレベルのタグをインラインタグに変換します
1 nbsp;html> 2 3 4 <title>块级标签转行内标签</title> 5 <style> 6 p{ 7 width: 100px; 8 height: 100px; 9 background-color: red;10 display: inline;11 }12 </style>13 14 15 <p>谷歌</p> <!--按道理p是块级可以设置长和宽当通过display: inline;它已经是行内标签了，所以长和宽失效-->16 <p>http://www.php.cn</p>17 18
最初に、ブロックレベルのタグ、インラインタグ、インラインブロックレベルのタグについて書きます。読んだ後、皆さんにさらにアドバイスをいただければ幸いです。
CSS ブロック レベル タグ、インライン タグ、およびインライン ブロック タグ変換 (2) の詳細については、PHP 中国語 Web サイトの関連記事に注目してください。