Partagez 6 questions d'entretien sur le modèle de boîte CSS. À combien pouvez-vous répondre correctement ?

Cet article partagera avec vous 6 questions d'entretien sur le modèle de boîte CSS. Découvrez et comblez les lacunes. Voyez à combien de ces six questions d'entretien vous pouvez répondre correctement ? Pouvez-vous les obtenir tous correctement ?

Pour les entretiens front-end, le modèle CSS Box est définitivement un point de connaissance front-end qui doit être demandé lors de l'examen, car c'est un contenu très important dans la pierre angulaire du CSS, et il y a aussi beaucoup des connaissances qui y sont associées, elles sont donc généralement abordées lors des entretiens. Comment poser les questions étape par étape ? Jetons un coup d'œil ci-dessous !

1. Parlez-moi de votre compréhension du modèle de boîte CSS ?

Q&A

Tous les éléments HTML peuvent être traités comme des boîtes. En CSS, le terme « modèle de boîte » ou « modèle de boîte » est utilisé pour parler de conception et de mise en page. Le modèle de boîte CSS est essentiellement une boîte entourant chaque élément HTML.

Il comprend :

• marge extérieure→ marge
• bordure→ bordure
• marge intérieure→ rembourrage
• contenu réel→ contenu

Il a deux types : modèle standard et modèle IE

analyse des connaissances  ;

modèle box, modèle box anglaise.

• Que ce soit div, span ou a, c'est une boîte.
• Les images et les éléments de formulaire sont tous considérés comme du texte. Ce ne sont pas des boîtes, car rien ne peut être placé à l'intérieur d'une image, elle est elle-même son propre contenu.

Explication de chaque partie du modèle de boîte :

• Marge (marge) : dégage la zone en dehors de la bordure, la marge est transparente (peut être négative).
• Border : la bordure autour du remplissage et du contenu.
• Padding : effacez la zone autour du contenu et le remplissage est transparent (les valeurs négatives ne sont pas autorisées).
• Contenu (contenu) : Le contenu de la boîte, affichant le texte et les images.

2. Quelle est la différence entre le modèle standard et le modèle IE ?

Réponse courte à la question

La différence entre le modèle standard et le modèle ie est la différence dans le calcul de la largeur et de la hauteur.

• La largeur du modèle standard ne calcule pas le rembourrage et la bordure ;
• la largeur du modèle calcule le rembourrage et la bordure

Analyse des connaissances

Modèle de boîte standard (modèle de boîte W3C)

ensemble La largeur et la hauteur sont définies pour la largeur et hauteur du contenu réel

, et la bordure et le remplissage autour du contenu sont définis séparément

c'est-à-dire que la largeur et la hauteur réelles de l'élément sont :

 ; width [height] = set content La largeur [height] + padding + border + margin

peut être comprise à travers des exemples : écrivez un div et définissez simultanément la largeur, la hauteur, la bordure, la marge intérieure et la marge extérieure. time;

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

effet et outils de développement de Chrome Le modèle de boîte présenté est le suivant :

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-boxVous pouvez voir que la partie contenu est de 100×100 et que le contenu est entouré d'autres paramètres, width= 40+10+30+100+30+10+40= 180;

Modèle de boîte IE (modèle de boîte étrange)

La largeur et la hauteur définies sont la somme du contenu réel + rembourrage + la largeur et la hauteur de la bordure sont définies ;

C'est-à-dire que la largeur et la hauteur réelles de l'élément sont :

largeur (hauteur) = largeur (hauteur) définie + marge

En utilisant le même exemple que ci-dessus , mais en définissant box-sizing:border-box;, transformez-le en modèle de boîte IE ; l'effet

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

et le modèle de boîte affiché dans les outils de développement de Chrome sont les suivants :

Vous pouvez clairement voir cela le carré et le haut sont légèrement plus petits que /image/847/808/932/162746672847353Partagez 6 questions dentretien sur le modèle de boîte CSS. À combien pouvez-vous répondre correctement ?" title="162746672847353Partagez 6 questions dentretien sur le modèle de boîte CSS. À combien pouvez-vous répondre correctement ?" alt="Partagez 6 questions dentretien sur le modèle de boîte CSS. À combien pouvez-vous répondre correctement ?"/>

3. Comment paramétrer ces deux modèles avec CSS ?

Réponse courte à la question🎜🎜🎜🎜L'exemple ci-dessus a en fait utilisé ce paramètre🎜🎜🎜modèle standard de paramètre CSS : Box-sizing:context-box (également le modèle de boîte par défaut du navigateur 🎜🎜paramètre CSS) ; C'est-à-dire le modèle : box-sizing:border-box;🎜🎜🎜🎜4. Comment JS définit/obtient-il la largeur et la hauteur correspondantes du modèle de boîte ? 🎜🎜🎜🎜🎜Réponse courte à la question🎜🎜🎜

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

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

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

🎜🎜🎜L'analyse des connaissances🎜🎜🎜🎜🎜🎜1. , et seul le style en ligne peut être obtenu. La largeur et la hauteur, le style dans la balise de style et le lien externe du lien ne peuvent pas être obtenus🎜

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

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

🎜🎜Lorsque vous utilisez la classe pour définir la largeur et la hauteur🎜🎜🎜la largeur et la hauteur obtenues sont vides. 🎜

在行内设置宽高时

获取的是行内设置的宽高

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

La spécification W3C décrit cela en détail :

• Éléments flottants et éléments positionnés de manière absolue, conteneurs de niveau bloc qui ne sont pas des boîtes de niveau bloc (tels que inline-blocks, cellules de tableau et légendes de tableau), et les boîtes de niveau bloc dont la valeur de débordement n'est pas visiable auront leur Le contenu crée un nouveau BFC (contexte de formatage au niveau du bloc). 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

Dans BFC, les cases sont disposées verticalement les unes après les autres en partant du haut. L'espacement vertical entre deux cases est déterminé par leur valeur de marge. Dans le même BFC, les marges verticales. de deux boîtes adjacentes au niveau d’un bloc s’effondreront.

Dans BFC, le bord extérieur gauche de chaque boîte touche le bord gauche du conteneur, ou le bord droit pour les formats de droite à gauche. Cela est vrai même dans les flottants (bien que les lignes d'une boîte rétrécissent à cause du flottant), à moins qu'un nouveau BFC ne soit créé à l'intérieur de la boîte (à cause du flottant, auquel cas la boîte elle-même deviendra plus étroit)

Règles de disposition BFC (principe/règles de rendu)

Calculer BFC Lorsque la hauteur est définie, l'élément flottant participera également au calcul (effacer le flottant)

La zone BFC ne chevauchera pas la case de l'élément flottant. (Empêcher le retour à la ligne du texte flottant)BFC est un conteneur indépendant sur la page, et les éléments internes et externes ne s'affectent pas les uns les autres. (Résoudre le problème des marges qui se chevauchent)La distance verticale de la boîte est déterminée par la marge. Les marges de deux cases adjacentes appartenant au même BFC se chevaucheront.

Les scénarios d'utilisation suivants utiliseront ces règles pour résoudre certains problèmes pratiques. 🎜🎜🎜🎜Comment créer un BFC🎜🎜🎜🎜Il y a quelques effets secondaires entre parenthèses🎜🎜🎜🎜Éléments flottants🎜 : float :left | float: right; [entraînera la perte de la largeur de l'élément parent et fera également monter l'élément inférieur]🎜🎜Élément de positionnement🎜: position:absolute position:fixed;Quelques valeurs de 🎜🎜display🎜 : display:inline-block [La conversion en bloc inline entraînera une perte de largeur] | display:flex | display:table table-cell, table-caption, inline-table, inline -flex, grid, inline-grid; 🎜🎜la valeur de débordement n'est pas visible🎜 : overflow:hidden; [les éléments de débordement seront coupés] | overflow:auto, overflow:scroll;🎜🎜display :flow-root🎜[nouvel attribut, créé par BFC Nouvelle méthode, pas d'effets secondaires, veuillez faire attention à la compatibilité du navigateur]🎜🎜『Remarque』🎜🎜🎜affichage : La raison pour laquelle la table peut également générer BFC est que Table générera par défaut une cellule de tableau anonyme, qui est Cette cellule de tableau anonyme génère le BFC. 🎜🎜🎜Aucun élément ne peut être considéré comme un BFC. Ce n'est que lorsque cet élément remplit l'une des conditions ci-dessus qu'il sera considéré comme un BFC🎜🎜🎜🎜 Utilisation. scénarios de BFC🎜🎜🎜🎜🎜🎜1. Effacer les flotteurs🎜🎜🎜🎜Les éléments flottants se détacheront du flux de documents ordinaire, comme indiqué ci-dessous. Le conteneur parent n'a qu'une hauteur de marge de 2 pixels. 🎜🎜🎜🎜Utiliser débordement : cachéAprès avoir créé un BFC pour le parent🎜🎜🎜🎜La méthode ci-dessus peut obtenir un flottement clair, mais il est toujours recommandé d'utiliser des pseudo-classes. 🎜🎜🎜🎜Pourquoi devons-nous effacer les flotteurs ?🎜 Effondrement du flotteur. Lorsque le bloc conteneur n'a pas de hauteur définie ou est adaptatif, le bloc conteneur ne peut pas être soutenu et s'effondre. 🎜🎜🎜🎜🎜2. Empêcher l'habillage du texte flottant 🎜🎜🎜🎜 a l'effet d'habillage du texte suivant : 🎜🎜🎜🎜brother-box est partiellement recouverte par des éléments flottants (les informations textuelles ne seront pas couvertes par des éléments flottants). Si vous souhaitez éviter que des éléments soient couvert, vous pouvez utiliser la méthode de création de BFC, comme l'ajout de overflow: caché à brother-box, vous pouvez obtenir l'effet suivant🎜🎜🎜🎜🎜🎜『Raison』🎜La règle 2 ci-dessus : La zone BFC n'entrera pas en conflit avec l'élément flottant Les cases se chevauchent 🎜🎜🎜Cette méthode peut être utilisée pour implémenter une mise en page adaptative à deux colonnes, avec une largeur fixe à gauche et une largeur adaptative du contenu à droite. 🎜🎜🎜🎜🎜3. Utilisez BFC pour résoudre le problème de chevauchement des marges🎜🎜🎜

Selon les conditions de chevauchement de marge précédentes, si vous souhaitez résoudre le chevauchement de marge, il vous suffit de détruire l'une des conditions de déclenchement, comme la création d'un BFC.

Selon la définition de BFC, les marges verticales de deux éléments ne peuvent se chevaucher que si elles se trouvent à l'intérieur du même BFC, y compris les éléments adjacents et les éléments imbriqués.

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

Pour résoudre le problème de chevauchement des marges, faites-les simplement différemment BFC.

• Pour les éléments adjacents, ajoutez-leur simplement un shell BFC pour éviter que leurs marges ne se chevauchent.
Pour les éléments imbriqués, laissez simplement l'élément parent
• déclencher BFC (par exemple, ajoutez BFC au parent) overflow : caché. ), vous pouvez faire en sorte que la marge parent et la marge de l'élément actuel ne se chevauchent pas.

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

Quand il n'y a pas de nouveau BFC, les marges se chevauchent, marge- bottom + margin-top, doit être égal à 20

Après avoir créé un nouveau BFC

Dans l'exemple ci-dessus, afin d'éviter que les marges des deux carrés ne se chevauchent, enveloppez un conteneur dans l'un des les divs pour déclencher le BFC .

Remarque : Le problème du pliage des marges peut être résolu avec BFC, mais le déclenchement de BFC n'est pas une condition suffisante pour résoudre le problème du pliage des marges. Il doit être utilisé de manière raisonnable

Adresse originale : https://juejin. cn/ post/6988877671606272031

Auteur : Axjy

Pour plus de connaissances liées à la programmation, veuillez visiter :

Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!