1. インライン要素とブロックレベル要素とは何ですか? 違いは何ですか？
- インライン要素: スパン強い em など。
領域を独占的に占有するのではなく、構造をサポートするために独自のフォント サイズまたは画像サイズに依存します。
通常、幅と高さは設定できません。
- インライン要素の特徴:
- 隣接するインライン要素を含む単一行上
- 幅と高さは設定できませんが、水平方向のパディングとマージンのプロパティは設定でき、垂直方向は無効です
- デフォルトの幅は独自の幅です
- インライン要素はプレーン テキストまたはその他のインライン要素 (タグを除く) のみを保持できます。
- ブロックレベル要素: h1~h6 p div ul ol li など。
各ブロックレベルの要素は 1 つ以上の行を占め、その幅と高さは個別に設定できます。
- ブロックレベル要素の特徴:
- 会独占一行
- 幅、高さ、マージン、パディングはすべて個別に設定できます
- デフォルトの幅はコンテナの 100% です。
- インライン要素およびその他のブロックレベル要素に対応可能
- インラインブロック要素: input img td など。
幅や高さなどを設定できます。
- インラインブロック要素の特徴:
- 隣接するインライン要素と同じ行にありますが、間には空白が入ります。
- デフォルトの幅はコンテンツ自体の幅です
- 高さ、行の高さ、パディング、マージンはすべて設定可能
- インライン要素とブロックレベル要素間の相互変換:
- ブロックレベル要素 = "インライン要素:表示: インライン;
- インライン要素 = "ブロックレベル要素:表示: ブロック;
- ブロックレベル/インライン要素 = "インラインブロック:表示:インラインブロック
2. ボックスモデルについて理解していますか?
css3 には 2 種類のボックス モデルがあります。
スタンダードボックスモデル、IEボックスモデル
同じ点:
マージン、ボーダー、パディング、コンテンツの4 つの部分があります。
相違点:
標準ボックス モデル、幅と高さにはコンテンツのみが含まれます。
IE ボックス モデル、幅と高さには境界線、パディング、コンテンツが含まれます。
ボックス モデルは、box-sizing プロパティを設定することで変更できます。
box-sizing: content-box は標準のボックス モデルを意味します
box-sizing: border-box は IE ボックス モデルを意味します
3. ページにスタイルをインポートする場合、リンクと @import の使用の違いは何ですか?
同じ点:
-
これらはすべてCSS スタイルを参照するために使用されます
違い：
-
リンクは同時読み込みです。@import はシリアル読み込みです。ブロックされます。読み込みを開始する前に、Web サイトが読み込まれるまで待つ必要があります。
-
@import は CSS の上位バージョンで提案されており、古いブラウザとの互換性があまりありません
-
import は css のみをロードできます、link は css をロードできます、他のものは css をロードすることもできます