css: ブロック要素、インライン要素、インラインブロック要素と 3 つの要素間の変換

1. 3つの要素の紹介

1. ブロック要素

块元素的特点

1. 1 行のみ、つまり自動的に折り返されます
2. 高さ、幅、外側の余白、内側の余白を設定できます
3. 幅のデフォルトは親要素の幅です。
   常见块元素
<h1></h1>---<h6></h6> <div> <p> <ul> <li> <ol>

2. インライン要素

行内元素的特点

1. ワードラップなし
2. 幅と高さの設定が無効です
3. マージンの設定は左右には有効ですが、上下には無効です。パディングは無効です。
4. デフォルトの高さはコンテンツの高さです
   常见行内元素
<span> <a> <i> <em> <strong>

3. インラインブロック要素

行内元素的特点

1. ワードラップなし
2. デフォルトの高さはコンテンツの高さです
3. 幅、高さ、外側マージン、内側マージンを設定できます
   常见行内块元素
<img> <td> <input>

第二に、3 つの要素間の変換

dispaly：block;转换为块元素
dispaly：inline;转换为行内元素
dispaly：inline-block;转换为行内块元素