CSS ボックスモデルの関連知識ポイントを包括的に確認する-CSSチュートリアル-php.cn

CSS ボックスモデルの関連知識ポイントを包括的に確認する

青灯夜游

リリース： 2023-04-12 18:05:21

転載

1503 人が閲覧しました

CSS ボックスモデルは CSS の基礎の中でも重要かつ難しいポイントであるため、面接官が候補者のフロントエンドの基礎の習得度を調べるためによく使用されます。この記事では CSS ボックスの知識ポイントを包括的に整理します。モデル。

CSS ボックスモデルの関連知識ポイントを包括的に確認する

まず例を見てみましょう: 以下の div 要素の合計幅はいくらですか?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
    <title>CSS 盒模型(https://github.com/webharry/fe-interview)</title>
<style>
div {
    background-color: lightgrey;
    width: 200px;
    border: 10px solid yellow;
    padding: 10px;
    margin: 20px;
}
</style>
</head>
<body>
    <div>这里是盒子内的实际内容。有 10px 内间距，20px 外间距、10px 黄色边框。</div>
</body>
</html>

ログイン後にコピー

この質問に答えるには、まず CSS ボックスモデルを理解する必要があります。

CSS ボックスモデルとは何ですか?

各 HTML 要素は、ボックスモデルと呼ばれる長方形のフレーム (ボックス) で構成されます。 CSS ボックスモデルは、HTML 要素の寸法とマージンを定義します。

ボックスモデルの各部分

CSS でボックスを形成するには、次のものが必要です:

コンテンツボックス :この領域はコンテンツを表示するために使用され、サイズは width と height で設定できます。
パディングボックス: コンテンツ領域の外側に囲まれた空白領域。サイズは padding 関連プロパティによって設定されます。
境界ボックス: 境界ボックスはコンテンツとパディングを包みます。サイズは、border 関連プロパティを通じて設定されます。
マージンボックス: これは最も外側の領域であり、ボックスと他の要素の間の空白スペースです。サイズは、margin 関連プロパティを通じて設定されます。

図に示すように、

CSS 盒模型各个部分

CSS には、標準ボックスモデルと IE ボックスモデルの 2 つのボックスモデルがあります。

標準ボックスモデル: 要素の幅と高さには、パディング、境界線、マージンを除くコンテンツのみが含まれます。
IE ボックスモデル: 要素の幅と高さには、コンテンツ、パディング、境界線が含まれますが、マージンは含まれません。

2 つのボックスモデルの違いは何ですか?

2 つのボックスモデルの違いは、要素の幅と高さを計算する方法と、要素のパディング、境界線、およびマージンを処理する方法です。

標準のボックスモデルでは、要素の幅と高さにはコンテンツのみが含まれるため、幅と高さを設定するときは、パディング、境界線、およびマージンの影響を考慮する必要があります。。
- 図に示すように:
IE ボックスモデルでは、要素の幅と高さにはパディングとボーダーが含まれるため、幅と境界線を設定します。パディングとボーダーの影響を考慮する必要があります。
- 図に示すように: