Teilen Sie 6 Interviewfragen zum CSS-Box-Modell. Wie viele können Sie richtig beantworten?

In diesem Artikel werden 6 Interviewfragen zum CSS-Box-Modell vorgestellt. Finden Sie heraus, wie viele dieser sechs Interviewfragen Sie richtig beantworten können. Können Sie sie alle richtig verstehen?

Für Front-End-Interviews ist das CSS-Box-Modell definitiv ein Front-End-Wissenspunkt, der in der Prüfung abgefragt werden muss, da es ein sehr wichtiger Inhalt im Eckpfeiler von CSS ist und es auch viele gibt damit verbundenes Wissen, daher wird es in der Regel in Interviews behandelt. Wie stellt man Fragen Schritt für Schritt? Werfen wir einen Blick nach unten!

1. Erzählen Sie mir von Ihrem Verständnis des CSS-Box-Modells?

Q&A

Alle HTML-Elemente können als Boxen behandelt werden. In CSS wird der Begriff „Box-Modell“ oder „Box-Modell“ verwendet, wenn es um Design und Layout geht. Das CSS-Box-Modell ist im Wesentlichen eine Box, die jedes HTML-Element umgibt.

Es umfasst:

• äußerer Rand→ Rand
• Rand→ Rand
• innerer Rand→ Polsterung
• eigentlicher Inhalt→ Inhalt

Es gibt zwei Arten: Standardmodell und IE-Modell;

Wissensanalyse

Box-Modell, englisches Box-Modell.

• Ob div, span oder a, es ist eine Box.
• Bilder und Formularelemente werden alle als Text betrachtet. Sie sind keine Kästchen, da nichts in ein Bild eingefügt werden kann, es selbst ist sein eigener Inhalt.

Erklärung jedes Teils des Boxmodells:

• Marge (Rand): Löschen Sie den Bereich außerhalb des Randes, der Rand ist transparent (kann negativ sein).
• Rand: Der Rand um die Polsterung und den Inhalt.
• Padding: Löschen Sie den Bereich um den Inhalt, und der Padding ist transparent (negative Werte sind nicht zulässig).
• Inhalt (Inhalt): Der Inhalt der Box mit Text und Bildern.

2. Was ist der Unterschied zwischen dem Standardmodell und dem IE-Modell?

Kurze Antwort auf die Frage

Der Unterschied zwischen dem Standardmodell und dem IE-Modell besteht in der Berechnung von Breite und Höhe.

• Die Standardmodellbreite berechnet keine Polsterung und Rand;
Die Breite und Höhe
• werden für die
Breite und Höhe

des

tatsächlichen Inhalts festgelegt, und der Rahmen und der Abstand um den Inhalt werden separat festgelegt das heißt, die tatsächliche Breite und Höhe des Elements beträgt:

width [height] = Inhalt festlegen Die Breite [height] + padding + border + margin kann anhand von Beispielen verstanden werden: Schreiben Sie ein div und legen Sie gleichzeitig Breite, Höhe, Rand, inneren Rand und äußeren Rand fest Zeit;

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

-Effekt und Chrome-Entwicklertools Das in gezeigte Boxmodell sieht wie folgt aus:

Sie können sehen, dass der Inhaltsteil 100 × 100 groß ist und der Inhalt von anderen Einstellungen umgeben ist, width= 40+10+30+100+30+10+40= 180;

IE-Box-Modell (seltsames Box-Modell)

Die eingestellte Breite und Höhe sind die Summe aus tatsächlichem Inhalt + Polsterung + border Breite und Höhe werden festgelegt;

Das heißt, die tatsächliche Breite und Höhe des Elements ist:

Breite (Höhe) = eingestellte Breite (Höhe) + Rand

width=40+10+30+100+30+10+40=180；

IE盒子模型（怪异盒模型）

设置的宽高是对实际内容content + 内边距（padding）+边框（border）之和的width和height进行设置的;

即元素实际占位的宽高为：

width（height）= 设置的width（height）+外边距margin

和上面使用同样的例子，但是通过设置box-sizing:border-box;，把它变为IE盒模型；

.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的开发者工具中显示的盒模型如下：

可以很明显的看到，正方形和上面的比小了一圈，width=40+10+30+20+30+10+40=100;

3、CSS如何设置这两种模型？

问题简答

上面的示例其实已经用到了这个设置

• css设置标准模型：Box-sizing:context-box (也是浏览器默认的盒模型)；
• css设置Ie模型：box-sizing:border-boxUnter Verwendung des gleichen Beispiels wie oben , aber indem Sie box-sizing:border-box; festlegen, verwandeln Sie es in ein IE-Boxmodell. Der

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【常用】

-Effekt und das in den Entwicklertools von Chrome angezeigte Boxmodell sind wie folgt:

Das sieht man deutlich Das Quadrat und die Oberseite sind etwas kleiner als /image/847/808/932/162746672847353Teilen Sie 6 Interviewfragen zum CSS-Box-Modell. Wie viele können Sie richtig beantworten?" title="162746672847353Teilen Sie 6 Interviewfragen zum CSS-Box-Modell. Wie viele können Sie richtig beantworten?" alt="Teilen Sie 6 Interviewfragen zum CSS-Box-Modell. Wie viele können Sie richtig beantworten?"/>

3. So stellen Sie diese beiden Modelle zusammen CSS?

Kurze Antwort auf die Frage

Das obige Beispiel hat tatsächlich diese Einstellung verwendet

CSS-Einstellung Standardmodell: Box-sizing:context-box (auch das Standard-Boxmodell des Browsers); CSS-Einstellung Dh model: box-sizing:border-box;

4. Wie legt/erhält JS die entsprechende Breite und Höhe des Boxmodells?

Kurze Antwort auf die Frage🎜🎜🎜

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

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

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

🎜🎜🎜Wissensanalyse🎜🎜🎜🎜🎜🎜1. dom.style.width/height🎜🎜🎜🎜 wird durch den Stilstil des Dom-Knotens erhalten , und Nur der Inline-Stil kann abgerufen werden. Der Stil im Style-Tag und der Link zum externen Link können nicht abgerufen werden 🎜

在行内设置宽高时

获取的是行内设置的宽高

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是一个名词，就是一个有特定规则的区域。我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。

Die

W3C-Spezifikation beschreibt dies im Detail:

• Floatierte Elemente und absolut positionierte Elemente, Container auf Blockebene, die keine Boxen auf Blockebene sind (z. B. inline-blocks, table-cells und table-captions) und Boxen auf Blockebene, deren overflow-Wert nicht visiable ist, haben ihre Der Inhalt erstellt einen neuen BFC (Block-Level-Format-Kontext). inline-blocks, table-cells, 和 table-captions），以及 overflow 值不为visiable 的块级盒子，都会为他们的内容创建新的 BFC（块级格式上下文）。

• 在 BFC 中，盒子从顶端开始垂直的一个接一个排列，两个盒子之间的垂直间距由他们的 margin 值决定，在同一个 BFC 中，两个相邻块级盒子的垂直外边距会产生折叠。

• 在 BFC 中，每一个盒子的左外边缘会触碰到容器的左边缘，对于从右到左的格式来说，则触碰到右边缘。即使在浮动里也是这样的（尽管一个盒子的 line boxes 会因为浮动而收缩），除非这个盒子的内部创建了一个新的 BFC（由于浮动，在这种情况下盒子本身将会变得更窄）

BFC的布局规则（原理/渲染规则）

1. 计算BFC高度时，浮动元素也会参与计算（清除浮动）
2. BFC的区域不会与浮动元素的box重叠。（防止浮动文字环绕）
3. BFC在页面上是一个独立的容器，内外元素不相互影响。（解决外边距重叠问题）
4. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

下面的使用场景会通过这些规则来处理一些实际的问题。

如何创建BFC

括号里面是一些副作用

• 浮动元素：float:left | float:right;【会导致父元素的宽度丢失,也会导致下边的元素上移】
• 定位元素：position:absolute | position:fixed；
• display的一些值：display:inline-block【转为行内块会导致宽度丢失】 | display:flex | display:table | table-cell、table-caption、inline-table、inline-flex、grid、inline-grid；
• overflow值不为visible：overflow:hidden;【将会剪切掉溢出的元素】 | overflow:auto、overflow:scroll;
• display:flow-root【新属性，BFC创建新方式，没有任何副作用，注意浏览器兼容】

『注意』

display:table也可以生成BFC的原因在于Table会默认生成一个匿名的table-cell，是这个匿名的table-cell生成了BFC。

并不是任意一个元素都可以被当做BFC，只有当这个元素满足以上任意一个条件的时候，这个元素才会被当做一个BFC

BFC的使用场景

1、清除浮动

浮动的元素会脱离普通文档流，如下,父级容器只剩下2px的边距高度。

利用overflow: hidden给父级创建BFC之后

以上方法可以实现清楚浮动，但是还是推荐使用伪类的方式。

为什么要清除浮动? 浮动塌陷,包含块没有设置高度或者是自适应的时候、包含块就不能撑起来，变成塌陷的状态。

2、防止浮动文字环绕

有如下文字环绕效果：

brother-box有部分被浮动元素所覆盖（文本信息不回被浮动元素覆盖），如果想避免元素被覆盖，可利用创建BFC的方法，如给brother-box加overflow: hidden

In BFC werden die Boxen vertikal nacheinander angeordnet, beginnend von oben. Der vertikale Abstand zwischen zwei Boxen wird durch ihren Rand-Wert bestimmt von zwei benachbarten Boxen auf Blockebene kollabieren.

Bei BFC berührt die linke Außenkante jeder Box die linke Kante des Containers bzw. die rechte Kante bei Rechts-nach-Links-Formaten. Dies gilt sogar innerhalb von Floats (obwohl die Linienboxen einer Box aufgrund von Floats kleiner werden), es sei denn, innerhalb der Box wird ein neuer BFC erstellt (aufgrund von Floats, in diesem Fall wird die Box selbst schmaler)

BFC-Layoutregeln (Prinzip/Rendering-Regeln)

Berechnen Sie BFC, wenn die Höhe festgelegt ist, das schwebende Element nimmt auch an der Berechnung teil (löscht den Float)

Der BFC-Bereich überlappt nicht mit der Box des Floating-Elements. (Verhindern Sie das Umbrechen von schwebendem Text.)BFC ist ein unabhängiger Container auf der Seite und interne und externe Elemente beeinflussen sich nicht gegenseitig. (Lösen Sie das Problem überlappender Ränder)Der vertikale Abstand der Box wird durch den Rand bestimmt. Die Ränder zweier benachbarter Boxen, die zum selben BFC gehören, überlappen sich.

In den folgenden Nutzungsszenarien werden diese Regeln verwendet, um einige praktische Probleme zu lösen. 🎜🎜🎜🎜So erstellen Sie einen BFC🎜🎜🎜🎜Es gibt einige Nebenwirkungen in den Klammern🎜🎜🎜🎜Floating-Elemente🎜: float :left |. float: right; [führt dazu, dass die Breite des übergeordneten Elements verloren geht und auch das untere Element nach oben verschoben wird]🎜🎜Positionierungselement🎜: position:fixed;Einige Werte von 🎜🎜display🎜: display:inline-block [Konvertierung in Inline-Block führt zu Breitenverlust] | -flex, grid, inline-grid; 🎜🎜Überlaufwert ist nicht sichtbar🎜: overflow:hidden; [overflow:auto, overflow:scroll;🎜🎜display :flow-root🎜[neues Attribut, erstellt von BFC Neue Methode, keine Nebenwirkungen, bitte achten Sie auf Browserkompatibilität]🎜🎜『Hinweis』🎜🎜🎜Anzeige: Der Grund, warum Tabelle kann auch BFC generieren bedeutet, dass die Tabelle standardmäßig eine anonyme Tabellenzelle generiert. Diese anonyme Tabellenzelle generiert den BFC. 🎜🎜🎜Kein Element kann als BFC betrachtet werden. Nur wenn dieses Element eine der oben genannten Bedingungen erfüllt, wird dieses Element als BFC betrachtet Szenarien von BFC🎜🎜🎜🎜🎜🎜1. Floats löschen🎜🎜🎜🎜Floating-Elemente lösen sich vom normalen Dokumentfluss, wie unten gezeigt. 🎜🎜🎜🎜Verwenden Überlauf: verstecktNach dem Erstellen eines BFC für das übergeordnete Element🎜🎜🎜🎜Die obige Methode kann ein klares Floating erreichen, es wird jedoch weiterhin empfohlen, Pseudoklassen zu verwenden. 🎜🎜🎜🎜Warum müssen wir Floats löschen?🎜 Float-Kollaps Wenn der umschließende Block keine Höhe hat oder adaptiv ist, kann der umschließende Block nicht abgestützt werden und wird zusammengebrochen. 🎜🎜🎜🎜🎜2. Verhindern Sie das Umbrechen von schwebendem Text 🎜🎜🎜🎜 hat den folgenden Textumbrucheffekt: 🎜🎜🎜🎜brother-box ist teilweise durch schwebende Elemente abgedeckt (Textinformationen werden nicht durch schwebende Elemente abgedeckt). Wenn Sie vermeiden möchten, dass Elemente vorhanden sind abgedeckt, können Sie die Methode zum Erstellen von BFC verwenden, z. B. das Hinzufügen von overflow: versteckt zur Brother-Box. Sie können den folgenden Effekt erzielen🎜🎜🎜🎜🎜🎜『Grund』🎜Die obige Regel 2: Der BFC-Bereich kollidiert nicht mit dem schwebenden Element. Die Boxen überlappen sich🎜🎜🎜Mit dieser Methode kann ein zweispaltiges adaptives Layout implementiert werden, mit einer festen Breite links und einer adaptiven Breite des Inhalts rechts. 🎜🎜🎜🎜🎜3. Verwenden Sie BFC, um das Problem der Margenüberlappung zu lösen🎜🎜🎜

Wenn Sie gemäß den vorherigen Randüberlappungsbedingungen die Randüberlappung lösen möchten, müssen Sie nur eine der Auslösebedingungen zerstören, z. B. das Erstellen eines BFC.

Gemäß der Definition von BFC können sich die vertikalen Ränder zweier Elemente nur dann überlappen, wenn sie sich innerhalb desselben BFC befinden, einschließlich benachbarter Elemente und verschachtelter Elemente.

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

Um das Problem der Randüberlappung zu lösen, machen Sie sie einfach nicht gleich BFC.

• Fügen Sie bei benachbarten Elementen einfach eine BFC-Shell hinzu, um zu verhindern, dass sich ihre Ränder überlappen.
Bei verschachtelten Elementen lassen Sie einfach das übergeordnete Element
• BFC auslösen (fügen Sie beispielsweise BFC zum übergeordneten Element hinzu). Überlauf: versteckt ) können Sie dafür sorgen, dass sich der übergeordnete Rand und der Rand des aktuellen Elements nicht überlappen.

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

Wenn es keinen neuen BFC gibt, überlappen sich die Ränder, Rand- unten + Rand oben, sollte gleich 20 sein die Divs, um den BFC auszulösen.

Hinweis: Das Problem der Randfaltung kann mit BFC gelöst werden, aber das Auslösen von BFC ist keine ausreichende Bedingung, um das Problem der Randfaltung zu lösen.

Ursprüngliche Adresse: https://juejin. cn/ post/6988877671606272031

Autor: Axjy

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonTeilen Sie 6 Interviewfragen zum CSS-Box-Modell. Wie viele können Sie richtig beantworten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!