1. はじめに
Web ページの「ブロック」を除くすべての要素は「フロー」であり、「フロー」は「ブロック」の中に含まれます（最も外側のボディが「ブロック」です）。このシリーズの冒頭で「ブラウザのデフォルト スタイル」について話したとき、ブラウザのデフォルト スタイルがどの HTML 要素が「ブロック」に属するかを規定していることも誰もが理解しました (残りは「フロー」)。この部分の知識は非常に重要かつ基本的なものであるため、すべてのフロントエンド面接の質問で、どの要素が「ブロック」でどの要素が「フロー」であるかを尋ねられます。
実はこの部分の知識は表示形式の設定に含まれています。インターネットで表示のプロパティをすべて検索すると、たくさんのプロパティがあることがわかりますが、そのすべてが一般的に使用されているわけではなく、ほとんどのプロパティを使用したことがない場合もあります。学んだことは、必要ないなら学ばなくても大丈夫です。いつそれを詳しく学ぶのですか？そういうものがあるということを知っていないと始まらないということです。
上の写真を見てください。よく使用される属性は none、block、inline、inline-block、Inherit は親要素を継承するスタイルであることは言うまでもありません。その他については後で詳しく説明します。その他は一般的には使用されませんが、実際には「ブラウザのデフォルト スタイル」セクションで説明されているものもあります。詳細については、「ブラウザのデフォルト スタイル」セクションを参照してください。 。
一般的に使用されるインラインはテキストと画像です。実際、インラインについては何も言うことはありません。それは「流れ」であり、サイズや形状はありません。その幅は親コンテナの幅によって異なります。
したがって、インラインタグの場合、設定した幅と高さは無効です。監視を通じて、要素の実際の幅と高さが、設定した値ではなく自動であることがわかります。
非常に基本的な質問: インライン要素を「ブロック」要素に変換するにはどうすればよいですか?ほとんどの人の答えは「display:block」だと思いますが、これが唯一の答えではないことを知っておく必要があります。少なくとも、display:table を設定することはできますよね? (知らない場合は) さらに 2 つのケースを理解する必要があります:
まず、Float を設定します
効果を見てびっくり。表示効果と監視結果から判断すると、span要素は「ブロック」されています。前のセクションで float について説明し終えたところです。float の「破壊性」と「ラッピング特性」がここでも適用されることを忘れないでください。
2 番目に、inline
要素に Position:absolute/fixed
を設定します。今回は、デモンストレーション用に、span 要素に、absolute/fixed を追加します。効果があり、float を追加すると同じ効果があります。絶対/固定の特徴については、次のポジション紹介時に触れます。
3. ブロック
このシリーズには「ボックスモデル」に焦点を当てたセクションがあります。見たことがあるのか、すでにボックスモデルをよく知っているのかわかりません。 🎜 🎜 実際、ブロックに関しては「ボックスモデル」だと思います。要素をブロックに設定したら、ボックス モデルのルールに従う必要があります。したがって、ここでは詳しく書きません。ボックスモデルセクションにアクセスして詳しく見てください。 🎜 4. inline-block 🎜 このトピックは「ブラウザのデフォルト スタイル」セクションから開始する必要があります。ブラウザのデフォルトのスタイルでは、いくつかの HTML 要素が display:inline-block であることが規定されています。見てみましょう。 🎜 🎜 🎜 🎜 初心者はインラインブロックに慣れていないかもしれませんが、大丈夫です、ステップバイステップで従ってください。まず、インラインがどのようなものであるか、つまり一般的なテキストと画像であることを理解する必要があります。次に、ブロックがどのようなものであるか、つまり一般的な div であることを理解する必要があります。インラインとブロックの特性については、通常のボタンや入力がどのように見えるかを考えることができます。 🎜 🎜 あのボタンは一例です。ページにいくつかの
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
