CSS ボックス モデルに関する面接の質問を 6 つシェアします。何問正しく答えることができますか?

この記事では、CSS ボックス モデルに関する 6 つの面接の質問を紹介します。不足しているものがないか確認して埋めてください。これら 6 つの面接の質問のうち、何問正しく答えることができますか?全部正解できますか？

フロントエンドのインタビューでは、CSS ボックス モデルは、CSS の基礎となる非常に重要な内容であるため、間違いなく尋ねられるべきフロントエンドの知識ポイントです。 、それに関連する知識もたくさんありますが、面接では通常どのように段階的に質問しますか？以下を見てみましょう！

1. CSS ボックス モデルについての理解について話してください。

質問に対する簡単な答え

すべての HTML 要素はボックスとして扱うことができます。 CSS では、デザインとレイアウトについて話すときに「ボックス モデル」または「ボックス モデル」という用語が使用されます。 CSS ボックス モデルは基本的に、各 HTML 要素を囲むボックスです。

これには以下が含まれます:

• 外マージン→マージン
• 境界線→ボーダー
• パディング→パディング
• 実際のコンテンツ→コンテンツ

標準モデルと IE モデルの 2 種類があります。

ナレッジ分析

ボックス モデル、英語ボックスモデル。

• div、span、a のいずれであっても、それはボックスです。
• 画像とフォーム要素はすべてテキストとみなされますが、画像内には何も配置できず、それ自体が独自のコンテンツであるため、ボックスではありません。

ボックス モデルの各部分の説明:

• マージン (マージン): 境界線の外側の領域をクリアします。マージンは透明です (負の値にすることもできます)。
• ボーダー (ボーダー): パディングとコンテンツを囲むボーダー。
• Padding (パディング): コンテンツの周囲の領域をクリアし、パディングは透明になります (負の値は許可されません)。
• コンテンツ (コンテンツ): ボックスのコンテンツ。テキストと画像が表示されます。

2. 標準モデルと IE モデルの違いは何ですか?

#質問に対する簡単な答え

標準モデルと IE モデルの違いは、幅と高さの計算です。

標準モデルの幅はパディングとボーダーを計算しません。
• つまり、モデルの幅はパディングとボーダーを計算します。

ナレッジ分析

標準ボックス モデル (W3C ボックス モデル)

設定された幅と高さは正しい

実際のコンテンツ content の 幅と高さ が設定され、コンテンツの周囲の境界線とパディングも追加で設定されます。つまり、実際のコンテンツの幅と高さは、要素は次のとおりです:

width[height] = セット内容のパディング境界マージンの幅[高さ]

は例を通して理解できます: div を記述して set幅、高さ、境界線、内側のエッジを同時に指定 間隔、マージン;

//注：如果下面示例未写html和css,说明与此处相同
.box {
    width: 100px;
    height: 100px;
    border: 10px solid #CC9966;
    padding: 30px;
    margin: 40px;
    background: #66FFFF;
}
<div class="box">Axjy</div>

Chrome のデベロッパー ツールに表示される効果とボックス モデルは次のとおりです:

コンテンツ部分は 100×100 で、コンテンツは追加の設定で囲まれていることがわかります。width=40 10 30 100 30 10 40=180

;

IE ボックス モデル (変なボックス モデル)

設定された幅と高さは、## の幅と高さの合計です。 #実際のコンテンツ、パディング、およびボーダー。設定;

は、要素の実際の幅と高さを意味します:

width (高さ) = 幅 (高さ) マージンの設定

上記と同じ例を使用しますが、

box-sizing:border-box;;

.box {
    width: 100px;
    height: 100px;
    border: 10px solid #CC9966;
    padding: 30px;
    margin: 40px;
    background: #66FFFF;
    box-sizing: border-box;//注意
}
<div class="box">Axjy</div>

効果と Chrome の開発者を設定して、IE ボックス モデルに設定します。表示されたボックス モデルは次のとおりです。

正方形が上記のものよりも小さいことが明らかにわかります。

width=40 10 30 20 30 10 40 =100

;

3. これら 2 つのモデルを CSS で設定するにはどうすればよいですか?

質問に対する簡単な答え

上記の例では実際にこの設定を使用していますcss標準モデルの設定: Box-sizing:context-box (ブラウザのデフォルトのボックス モデルでもあります);

css 設定 Ie モデル:

box-sizing:border-box

;
• 4. JS はボックス モデルに対応する幅と高さをどのように設定/取得しますか?

#質問への簡単な回答

1) dom.style.width/height【只能取到内联元素】
2) dom.currentStyle.width/height【只有IE支持】
3) document.getComputedStyle(dom,null).width/height  
4) dom.getBoundingClientRect().width/height 
5) dom.offsetWidth/offsetHeight【常用】

#知識分析

1, dom.style.width/height

dom ノードの style スタイルを通じて取得され、インライン スタイルの幅と高さのみが取得できます。リンク外部リンクのスタイルが取得できません

.box{...}
----------------------------

let targetDom = document.querySelector('.box');
let width = targetDom.style.width;
let height = targetDom.style.height;

console.log("width",width)
console.log("height",height)

幅と高さをクラスで設定する場合

取得した幅と高さが空です

在行内设置宽高时

获取的是行内设置的宽高

element.style.xxx 这种只能取得内嵌样式的属性，获取样式能读能写

2、dom.currentStyle.width/height

取到的是最终渲染后的宽和高，如果有设置宽高，则不论哪种盒模型获取到的都是设置的宽高,只有IE兼容

.box {...同上}
----------------------------

let targetDom = document.querySelector('.box');
let width = targetDom.currentStyle.width;
let height = targetDom.currentStyle.height;

element.currentStyle[xxx] 可以取得内部和外部样式，但是只兼容ie浏览器，获取的样式只能读

3、document.getComputedStyle(dom,null).width/height

取到的是最终渲染后的宽和高，如果有设置宽高，则不论哪种盒模型获取到的都是设置的宽高，和currentStyle相同，但是兼容性更好，IE9 以上支持。

getComputedStyle()方法,

• 第一个参数：取得计算样式的元素；
• 第二个参数：一个伪元素字符串（例如“:after”），如果不需要伪元素信息，默认为null；

.box {...同上}
----------------------------

let targetDom = document.querySelector('.box');
let width =  window.getComputedStyle(targetDom).width
let height = window.getComputedStyle(targetDom).height

console.log("width",width)
console.log("height",height)

『小扩展』

如果box类不设置宽高，而是由内容自动撑开；

则标准盒模型通过getComputedStyle获取到的宽高是content的值；

IE盒模型通过getComputedStyle获取到的宽高 = border + padding + content，不包括外边距；

4、dom.getBoundingClientRect().width/height

得到渲染后的宽和高，大多浏览器支持。IE9以上支持。

.box {...同上}
----------------------------
let targetDom = document.querySelector('.box');
let width = targetDom.getBoundingClientRect().width;
let height = targetDom.getBoundingClientRect().height
console.log('width',width)
console.log('height',height)

标准模型，宽高设置为100的结果，额外包括了padding和border的值；

IE模型，宽高设置为100的结果；

『小扩展』

如果box类不设置宽高，而是由内容自动撑开；

不论是哪种模型，获取到的都是（border + padding + content)，不包括外边距；

getBoundingClientRect还可以取到相对于视窗的上下左右的距离（用于获取某个元素相对于视窗的位置集合）。

5、dom.offsetWidth/offsetHeight（常用）

包括高度（宽度）、内边距和边框，不包括外边距。最常用，兼容性最好。

.box {...同上}
----------------------------
let targetDom = document.querySelector('.box');
let width = targetDom.offsetWidth;
let height = targetDom.offsetHeight;
console.log('width',width)
console.log('height',height)

标准模型，宽高设置为100的结果；

IE模型，宽高设置为100的结果；

小扩展

如果box类不设置宽高，而是由内容自动撑开；

不论是哪种模型，获取到的都是（border + padding + content)，不包括margin；

从上面可以看出，dom.getBoundingClientRect().width/height 和 dom.offsetWidth/offsetHeight 结果是一样的

5、根据盒模型解释边距重叠

问题简答

外边距重叠是指两个【垂直】 【相邻】的块级元素，当上下两个边距相遇时，其外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。（水平方向不会发生）

『原因』

根据W3C文档的说明，当符合以下条件时，就会触发外边距重合

• 都是普通流中的元素且属于同一个 BFC
• 没有被 padding、border、clear 或非空内容隔开
• 两个或两个以上垂直方向的「相邻元素」

相邻元素包括父子元素和兄弟元素

『重叠后的margin计算』

• 1、margin都是正值时取较大的margin值

• 2、margin都是负值时取绝对值较大的，然后负向位移。

• 3、margin有正有负，从负值中选绝对值最大的，从正值中选取绝对值最大的，然后相加

边距重叠详解及解决方案

1、嵌套块（父子）元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有padding-top及border，则父元素的margin-top会与子元素的margin-top发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

『解决办法』

• 1、为父元素定义1px的border-top或padding-top。
• 2、为父元素添加overflow:hidden。
• 3、子元素或父元素设置display:inline-block。
• 4、父元素加前置内容（::before）生成。（推荐）

『示例』

在页面放两个正方形

<div class="parent-box">
    <div class="child-box"></div>
</div>

父元素margin-top设为0，子元素设置20px;

.parent-box{
    width: 100px;
    height: 100px;
    margin-top: 0;
    background: #99CCFF;
}
.child-box{
    width: 50px;
    height: 50px;
    margin-top: 20px;
    background: #FF9933;
}

预期效果：应该是父级元素没有边距，子元素顶部和父元素顶部之间的距离为20

实际效果：父子盒子重叠，父级与外面的间隔变成了20（会取较大的值，因为父级为0，所以取的是子级的margin）

通过上面的解决办法处理之后

方法一、二、三

方法四

.parent-box::before {
    content : "";
    display :table;
}

达到的效果

2、相邻块（兄弟）元素垂直外边距的合并（外边距塌陷）

当上下相邻的两个块元素相遇时，如果

• 上面的元素有下外边距margin-bottom，
• 下面的元素有上外边距margin-top，

则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。

『解决办法』

1）为了达到想要的间距，最好在设置margin-top/bottom值时统一设置上或下；

2）或者用以下的BFC解决，下面有详解

6、谈谈BFC

BFC的基本概念

BFC全称为块格式化上下文 (Block Formatting Context) ，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

BFC的通俗理解：首先BFC是一个名词，就是一个有特定规则的区域。我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。

W3C 仕様 ではこれについて詳しく説明しています:

• 浮動要素と絶対配置要素、非ブロック レベルのボックス レベルのブロックコンテナ (inline-blocks、table-cells、table-captions など)、および overflow 値が ## ではありません# Visiable のブロック レベル ボックスは、その内容に対して新しい BFC (ブロック レベル フォーマット コンテキスト) を作成します。

• BFC では、ボックスは上から順番に垂直に配置されます。2 つのボックス間の垂直方向の間隔は、

  margin の値によって決まります。BFC では、 2 つの隣接するブロック レベル ボックスの垂直方向のマージンが崩れます。

• BFC では、各ボックスの左外端がコンテナの左端に接触するか、右から左への形式の場合は右端に接触します。これは、ボックス内に新しい BFC が作成されない限り (フロートによってボックス自体が縮小します)、フロート内であっても当てはまります (ただし、ボックスの

  line ボックス はフロートによって縮小します)。狭くなります)

BFCのレイアウトルール(原理・レンダリングルール)

BFC時の計算高さが使用されると、浮動要素も計算に参加します (浮動要素をクリアします)
1. BFC 領域は浮動要素のボックスと重なりません。 (フローティングテキストの折り返しを防止)
2. BFC はページ上の独立したコンテナであり、内部要素と外部要素は相互に影響しません。 (マージンが重なる問題の解決)
3. ボックスの垂直方向の距離はマージンによって決まります。
4. 同じ BFC に属する 2 つの隣接するボックスの余白は重なり合います。

次の使用シナリオでは、これらのルールを使用していくつかの実際的な問題に対処します。

#BFC の作成方法

括弧内には副作用がいくつかあります

Floating element
• : float:left | float:right; [親要素の幅が失われ、下の要素も上に移動します]
配置要素
• :position:absolute |position:fixed;
displayの一部の値
• :display:inline-block [インラインブロックへの変換]幅が失われる] | ディスプレイ:フレックス | ディスプレイ:テーブル | テーブル -セル、テーブル キャプション、インライン テーブル、インライン フレックス、グリッド、インライン グリッド;
オーバーフロー値は表示されません
• : overflow:hidden;[オーバーフローは要素から切り取られます] | overflow:auto, overflow:scroll;
display:flow-root
• [新しい属性、新しい作成方法] BFC、副作用はありません。ブラウザの互換性に注意してください]

『注意』

表示: テーブルでも BFC を生成できる理由は、テーブルデフォルトで匿名テーブルセルが生成され、それを生成するのはこの匿名テーブルセルです。

#どの要素も BFC と見なすことはできません。この要素が上記の条件のいずれかを満たしている場合にのみ、この要素は BFC

BFC 使用シナリオ

1. フローティング要素のクリア

フローティング要素は通常のドキュメントから分離されます。以下に示すフローでは、親コンテナーのマージンの高さは 2 ピクセルのみになります。

親の BFC を作成した後、overflow: hidden

を使用します

以上のメソッドは明確なフローティングを実現できますが、それでも擬似クラスを使用することをお勧めします。

なぜフロートをクリアする必要があるのですか?

フロートの崩壊。包含ブロックに高さが設定されていない場合、または適応型である場合、包含ブロックを支えられません。上がると潰れてしまいます。

2. フローティング テキストの折り返しを防止する

には次のテキスト折り返し効果があります:

brother-box の一部がフローティング要素で覆われています (テキスト情報はフローティング要素で覆われません)。要素が隠れるのを避けたい場合は、## を追加するなどの BFC 作成方法を使用できます。 #overflow to Brother-box: hidden、次の効果が得られます

『理由』 上記のルール 2: BFC 領域は、フローティング要素のボックスと重ならないようにします。

このメソッドは、2 列のアダプティブ レイアウトを実装するために使用できます。左側の幅は固定され、右側のコンテンツはアダプティブ幅になります。

3. BFC を使用してマージンの重複の問題を解決する

前のマージン オーバーラップ条件によると、マージン オーバーラップを解決したい場合は、BFC の作成など、トリガー条件の 1 つを破棄するだけで済みます。

BFC の定義によれば、垂直マージンのオーバーラップは、隣接する要素とネストされた要素を含め、2 つの要素が同じ BFC 内にある場合にのみ可能です。

================================

マージンの重複問題を解決するには、同じ BFC 内にないことを確認してください。

• 隣接する要素の場合は、余白が重ならないように BFC シェル を追加します。
• ネストされた要素の場合は、親要素 # をそのままにしておきます。 ## 親のマージンと現在の要素のマージンが重ならないように、BFC をトリガーします (たとえば、overflow: hidden を親に追加します)。

================================

もしあれば新しい BFC はありません 新しい BFC を作成した後、マージンが重なっている場合、margin-bottom margin-top は 20

に等しくなります。

上記の例では、2 つの正方形の余白が重ならないように、コンテナーをいずれかの div でラップして BFC をトリガーします。

注:

マージン折り畳みの問題は BFC で解決できますが、BFC のトリガーはマージン折り畳みの問題を解決するための十分な条件ではなく、合理的に使用する必要があります。

元のアドレス: https://juejin.cn/post/6988877671606272031著者: Axjy

プログラミング関連の知識の詳細については、次のサイトを参照してください:

プログラミング入門

! ！

以上がCSS ボックス モデルに関する面接の質問を 6 つシェアします。何問正しく答えることができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。