一緒に書く習慣をつけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して4日目です。クリックしてイベントの詳細をご覧ください。
みなさん、こんにちは。私はフロントエンドのスイカの兄弟です。今日は、ずっと前にバイトのインタビューをしたときに出会ったCSSインタビューの質問について話します。
次のHTMLスタイルとCSSスタイルがありますが、2つのオレンジ色の領域の幅と高さはどれくらいですか？
<style>
.box {
width: 10px;
height: 10px;
border: 1px solid #000;
padding: 2px;
margin: 2px;
background-color: orange;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
</style>
<div class="box content-box"></div>
<div class="box padding-box"></div>
复制代码この質問では、CSSボックスモデルを調べます。
CSSボックスモデル
CSSボックスは、内側から外側までの4つの領域で構成されています。
- コンテンツボックス：コンテンツボックスはコンテンツ（innerHTML）を表示するために使用され、幅と高さはデフォルトで幅と高さによって制御されます。ただし、box-sizingプロパティがcontent-box以外の値に設定されている場合、適用されるルールは変更されます。
- パディングボックス：パディングボックス、paddingプロパティを使用して、パディングサイズを設定できます。
- 境界線ボックス：境界線ボックス、境界線のサイズ、およびスタイルは、borderプロパティを介して設定できます。
- マージンボックス：マージンボックス。marginプロパティを使用してマージンサイズを設定します。
マージンはボックスの実際のサイズにはカウントされないことに注意することが重要です。たとえば、ボックスの背景色は余白の範囲をカバーしません。マージンは、ボックス間の距離を制御するために使用される、複数のボックス間の空気壁と考えることができます。
ボックスのサイズ設定によって、幅と高さを適用するボックスを制御できます。これについては、以下で説明します。
標準ボックスモデル（コンテンツボックス）
最新のブラウザの場合、要素はデフォルトで標準のボックスモデルを使用します。もちろん、以下のように明示的に設定することもできます。
.box {
box-sizing: content-box;
}
复制代码標準のボックスモデルでは、幅と高さのプロパティを使用してコンテンツボックスを設定します。
トピックに戻り、最初に最初のオレンジ色のブロックの幅と高さを見てみましょう。
.box {
width: 10px;
height: 10px;
border: 1px solid #000;
padding: 2px;
margin: 2px;
background-color: orange;
}
.content-box {
box-sizing: content-box;
}
复制代码<div class="box content-box"></div>
复制代码コンテンツの幅は10pxです。
padding 为 2px，这个 padding 是 padding-left、padding-right、padding-bottom、padding-left 的简写属性。盒子的宽需要将 padding-left 和 padding-right 都计算在内。
然后是左右两个 border 条。margin 不计算在盒模型中。
所以对于盒模型来说，宽度就是 16px（10 + 2 * 2 + 1 * 2），高度同理，也是 16px。
这个就是答案了吗？
并不是，因为我们要找到的橙色块的宽高，其实就是 Padding box 的宽高，这个块并不包括黑色的 border 边框线。所以我们的第一个橙色块宽高为 14px。
我们再深挖一下，如果我们给 border 颜色设置为透明，比如 border: 1px solid rgb(0, 0, 0, 0)，你觉得橙色块宽高为多少？
答案是 16px。背景色会先填充整个盒子，然后再在其上添加 border。如果 border 变成透明了，就会将它原本覆盖的部分橙色区域显现出来。
怪异盒模型（border-box）
怪异盒模型，也叫 IE 模型。
IE 浏览器的早期版本没有遵循 CSS 标准，width 和 height 是用来设置 Border box 的宽高，而不是 Content box 的宽高，导致不同浏览器的表现不同，毫无疑问是个浏览器 bug。
后来 CSS3 引入了 box-sizing，让开发者可以选择使用哪种盒模型，提供更好的灵活性。通过下面的设置，我们可以将元素的盒模型设置为怪异盒模型。
.box {
box-sizing: border-box;
}
复制代码怪异盒模型中，width 和 height 属性用于设置 Border box 盒子。即我们直接给元素对应的盒子设置了宽高，再通过 padding 和 border，才能计算出 Content box。
我们看看题目中第二个橙色块的宽高如何计算。
.box {
width: 10px;
height: 10px;
border: 1px solid #000;
padding: 2px;
margin: 2px;
background-color: orange;
}
.border-box {
box-sizing: border-box;
}
复制代码<div class="box border-box">
复制代码ボックスモデルの幅は10pxから境界線の2px（左右に2つの1px境界線）を引いたもので、計算された境界線ボックスの幅は8pxです。高さの計算は同じです。
したがって、この質問に対する答えは次のとおりです。最初のオレンジ色のブロックの幅と高さは14ピクセルで、2番目のオレンジ色のブロックの幅と高さは8ピクセルです。
終わり
DOM要素の場合、2つのボックスモデルがあります。
box-sizing: content-box：幅と高さがコンテンツボックスに反映される標準のボックスモデルは、デフォルトのボックスモデルです。box-sizing: border-box：ボーダーボックスの幅と高さが機能する奇妙なボックスモデル。
さらに、ボックスサイズ設定は上記の2つの値のみをサポートし、パディングボックスのようなボックスモデルはありません。あまり考えないでください。
私はフロントエンドの技術を共有するのが好きなプログラマーであるフロントエンドのスイカの兄弟です。私の公開アカウント「フロントエンドのスイカの兄弟」へようこそ。