インライン要素とブロックレベル要素は、フロントエンドにとって非常に重要な概念です。 CSS では、ブロック レベルの要素のみが物理属性を持ち、要素には 3 つの形式があります:
1. ブロック レベルの要素: 物理属性があり、幅と高さの書き込み値が機能し、1 行を占有する必要があります。
2. インライン要素: 物理属性はありません。ただし、マージンとパディングの値は便利です。これは行を占有せず、その後に兄弟要素を続けることができます。
3. ブロックとラインは両方とも兄弟要素に基づいて決定されます。
一般的に、インライン要素とブロックレベル要素を変換する場合は、表示属性を追加します。インライン→ブロックレベル、表示:ブロック; ブロックレベル→インライン、表示:インライン
これも誰もがよく知っている方法です。そして今日は、float を使用してインライン要素をブロックレベル要素に変換するのを見ました。出来ますか？やるだけやってみよう。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="charset=utf-8"/> 5 <title></title> 6 <style type="text/css"> 7 p{ 8 background-color:yellow; 9 }10 a{ 11 background-color: silver;12 }13 </style>14 </head>15 <body>16 <p>test_1</p>17 <p>test_2</p>18 <p>test_3</p>19 <a href="#">我是链接</a>20 </body>21 </html>p は一般的に使用されるブロックレベル要素であり、a は一般的に使用されるインライン要素です。黄色はドキュメント フローの 1 行を占め、銀はコンテンツのその領域のみを占めます。
それらに物理的属性を追加しましょう。
<style type="text/css"> p{ background-color:yellow; width: 100px; height: 100px; } a{ background-color: silver; width: 100px; height: 100px; }</style>1-1
ブロックレベルの要素
は影響を受けますが、 は影響を受けないことがわかります。
<style type="text/css"> p{ background-color:yellow; width: 100px; height: 100px; } a{ background-color: silver; float: left; width: 100px; height: 100px; }</style>1-2
要素に float 属性を追加すると、最初に設定した幅と高さが有効になっていることがわかります。 要素の後に を追加すると、次のようになります。
1-3
結論: float はインライン要素を暗黙的にブロック要素に変換し、内部的に物理プロパティを持ちます。外部的には、これは依然として inline 要素の属性であり、行を占有しません。
float はインラインでブロックレベルに変換できるため。では、ポジションを利用することは可能でしょうか？
<style type="text/css"> p{ background-color:yellow; width: 100px; height: 100px; } a{ background-color: silver; position: absolute; width: 100px; height: 100px; }</style>ポジション使用後の効果は「1-2」と同じであることが分かりました。つまり、position はインライン要素をブロックレベルの要素に変換することもできます。絶対的な使用に関して。これは、absolute では要素が文書構造から外れてしまうためであり、float と同じです。さらに、ここで 2 つの 要素が設定されている場合、最初の は 2 番目の 要素によってカバーされます。複数ある場合は、「後から順」の原則に従います。
つまり、float であれ、position であれ、それらを使用すると、インライン要素を暗黙的なブロックレベルの要素に変換できますが、兄弟要素に影響を与えるという欠点があります。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
