Share 6 interview questions about the CSS box model. How many can you answer correctly?

This article will share with you 6 interview questions about the CSS box model. Check for any gaps and fill them in. How many of these six interview questions can you answer correctly? Can you get them all correct?

For front-end interviews, the css box model is definitely a front-end knowledge point that must be asked, because it is a very important content in the cornerstone of CSS, and it is related to There is also a lot of knowledge, so how do you usually ask questions step by step in interviews? Let’s take a look below!

1. Talk about your understanding of the CSS box model?

Short answer to the question

All HTML elements can be treated as boxes. In CSS, the term "box model" or "box model" is used when talking about design and layout. The CSS box model is essentially a box surrounding each HTML element.

It includes:

• Outer margin→ margin
• Border→ border
• Padding→ padding
• actual Content → content

It has two types: standard model and IE model;

Knowledge analysis

Box model , English box model.

• Whether it is div, span, or a, it is a box.
• Pictures and form elements are all regarded as text. They are not boxes, because nothing can be placed inside a picture, it itself is its own content.

Description of each part of the box model:

• Margin (margin): clear the area outside the border, the margin is transparent (can be negative).
• Border (border): The border surrounding the padding and content.
• Padding (Padding): Clear the area around the content, and the padding is transparent (negative values ​​are not allowed).
• Content (content): The content of the box, showing text and images.

2. What is the difference between the standard model and the IE model?

Short answer to the question

The difference between the standard model and the ie model is the calculation of width and height.

• The standard model width does not calculate padding and border;
• ie model width calculates padding and border;

Knowledge Analysis

Standard box model (W3C box model)

The set width and height are correctThe width and height of the actual content content are set, and the border and padding around the content are additionally set;

That is, the actual width and height of the element is:

width[height] = the width [height] of the set content padding border margin

can be understood through examples: write a div and set the width, height, border, and inner edge at the same time Spacing, margins;

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

The effect and the box model displayed in Chrome's developer tools are as follows:

You can see that the content part is 100× 100, the content is surrounded by additional settings,

width=40 10 30 100 30 10 40=180;

IE Box model (weird box model)

The width and height set are the width and height of the sum of

actual content, padding, and border. The setting; means the actual width and height of the element is:

width (height) = set width (height) margin

Use the same example as above, but set it to IE box model by setting

box-sizing:border-box;

; <pre class="brush:html;toolbar:false;">.box { width: 100px; height: 100px; border: 10px solid #CC9966; padding: 30px; margin: 40px; background: #66FFFF; box-sizing: border-box;//注意 } &lt;div class=&quot;box&quot;&gt;Axjy&lt;/div&gt;</pre> effect and Chrome's developer tools The displayed box model is as follows:

It can be clearly seen that the square is smaller than the one above,

width=40 10 30 20 30 10 40 =100

;

3. How to set these two models with CSS?

Short answer to the questionThe above example has actually used this setting

css setting Standard model: Box-sizing:context-box (also the default box model of the browser);

• css setting Ie model:
box-sizing:border-box
• ;

4. How does JS set/get the width and height corresponding to the box model?

Short answers to questions

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

Knowledge analysis

1, dom.style.width/height Obtained through the style style of the dom node, only the width and height of the inline style can be obtained, and the style tag is neutralized The style of the link external link cannot be obtained

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

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

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

When using the class to set the width and height

The obtained width and height are empty

在行内设置宽高时

获取的是行内设置的宽高

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 specification describes this in detail:

• Floated elements and absolutely positioned elements, blocks of non-block-level boxes level containers (such as inline-blocks, table-cells, and table-captions), and the overflow value is not Visiable's block-level boxes will create new BFCs (block-level format contexts) for their contents.

• In BFC, boxes are arranged vertically one after another starting from the top. The vertical spacing between two boxes is determined by their margin value. In a BFC, the vertical margins of two adjacent block-level boxes will collapse.

• In BFC, the left outer edge of each box touches the left edge of the container, or the right edge for right-to-left formats. This is true even within floats (although a box's line boxes will shrink due to floats), unless a new BFC is created inside the box (in which case the box itself will shrink due to floats) Will become narrower)

BFC’s layout rules (principle/rendering rules)

1. Calculation When the BFC height is used, the floating element will also participate in the calculation (clear the float)
2. The BFC area will not overlap with the box of the floating element. (Prevent floating text from wrapping)
3. BFC is an independent container on the page, and internal and external elements do not affect each other. (Solving the problem of overlapping margins)
4. The vertical distance of the Box is determined by margin. The margins of two adjacent boxes belonging to the same BFC will overlap.

The following usage scenarios will use these rules to deal with some practical problems.

How to create a BFC

There are some side effects in the brackets

• Floating element: float:left | float:right; [It will cause the width of the parent element to be lost, and it will also cause the lower element to move up]
• Positioning element: position:absolute | position:fixed;
• Some values ​​of display: display:inline-block [Converting to inline block will cause width loss] | display:flex | display:table | table -cell, table-caption, inline-table, inline-flex, grid, inline-grid;
• overflow value is not visible: overflow:hidden;[overflow will be cut off Elements] | overflow:auto, overflow:scroll;
• display:flow-root[New attribute, new way to create BFC, no side effects, please pay attention to browser compatibility]

『Note』

display: The reason why table can also generate BFC is that Table will generate an anonymous table-cell by default, and it is this anonymous table-cell that generates it. The BFC.

Not any element can be regarded as a BFC. Only when this element meets any of the above conditions, this element will be regarded as a BFC

BFC usage scenarios

1. Clear floating elements

Floating elements will be separated from the ordinary document The flow, as shown below, leaves the parent container with only 2px of margin height.

Use overflow: hiddenAfter creating a BFC for the parent

and above Methods can achieve clear floating, but it is still recommended to use pseudo-classes.

Why do we need to clear the float? Float collapse, when the containing block does not have a height set or is adaptive, the containing block cannot be propped up and becomes collapsed. .

2. Prevent floating text from wrapping

has the following text wrapping effect:

brother-box is partially covered by floating elements (text information will not be covered by floating elements). If you want to avoid elements being covered, you can use the method of creating BFC, such as adding overflow to brother-box: hidden, you can get the following effect

『Reason』 Rule 2 above: The BFC area will not overlap with the box of the floating element

This method can be used to implement a two-column adaptive layout. The width on the left is fixed and the content on the right has an adaptive width.

3. Use BFC to solve the problem of margin overlap

According to the previous margin overlap conditions, if you want to solve the margin overlap, you only need to destroy one of the trigger conditions, such as creating a BFC.

According to the definition of BFC, vertical margin overlap is possible only if two elements are within the same BFC, including adjacent elements and nested elements.

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

To solve the margin overlapping problem, just Just make sure they are not in the same BFC.

• For adjacent elements, just add a BFC shell to them so that their margins do not overlap;
• For nested elements, just Let the parent element trigger BFC (for example, add overflow: hidden to the parent), so that the parent margin and the margin of the current element do not overlap.

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

If there is no new BFC When, the margins overlap, margin-bottom margin-top, should be equal to 20

After creating a new BFC

In the above example, in order to prevent the margins of the two squares from overlapping, a container is wrapped in one of the divs to trigger BFC.

Note: The problem of margin folding can be solved with BFC, but triggering BFC is not a sufficient condition to solve the problem of margin folding, and it must be used reasonably

Original address: https://juejin.cn/post/6988877671606272031

Author: Axjy

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of Share 6 interview questions about the CSS box model. How many can you answer correctly?. For more information, please follow other related articles on the PHP Chinese website!