CSS 박스 모델에 관한 6가지 인터뷰 질문을 공유하세요. 몇 개나 정답을 맞힐 수 있나요?

이 기사에서는 CSS 상자 모델에 관한 6가지 인터뷰 질문을 공유하고 이 6가지 인터뷰 질문 중 몇 가지를 정확하게 답할 수 있는지 확인하세요. 모두 맞힐 수 있나요?

프론트엔드 면접의 경우 CSS 박스 모델은 CSS의 초석이 되는 매우 중요한 내용이고, 그 밖에도 많은 내용이 있기 때문에 반드시 시험에서 출제해야 하는 프론트엔드 지식 포인트입니다. 관련 지식이 풍부하므로 일반적으로 인터뷰에서 다룹니다. 단계별로 어떻게 질문하나요? 아래를 살펴보겠습니다!

1. CSS 박스 모델에 대한 이해를 알려주세요.

Q&A

모든 HTML 요소는 상자로 처리될 수 있습니다. CSS에서는 디자인과 레이아웃을 말할 때 "박스 모델" 또는 "박스 모델"이라는 용어가 사용됩니다. CSS 상자 모델은 기본적으로 각 HTML 요소를 둘러싸는 상자입니다.

포함 내용:

• 바깥쪽 여백→여백
• 테두리→테두리
• 내부 여백→패딩
• 실제 내용→내용

두 가지 유형이 있습니다: 표준 모델과 IE 모델

지식 분석

박스모델, 영국박스모델.

• div든,span이든,a든 상자입니다.
• 그림과 양식 요소는 모두 텍스트로 간주됩니다. 그림 안에는 아무것도 넣을 수 없기 때문에 상자가 아니며 그 자체가 콘텐츠입니다.

상자 모델의 각 부분 설명:

• 여백(여백): 테두리 외부 영역을 지우고 여백은 투명합니다(음수일 수 있음).
• Border: 패딩과 콘텐츠 주변의 테두리입니다.
• 패딩: 콘텐츠 주변 영역을 지우고 패딩이 투명해집니다(음수 값은 허용되지 않음).
• 내용(content): 상자의 내용으로, 텍스트와 이미지가 표시됩니다.

2. 표준 모델과 IE 모델의 차이점은 무엇인가요?

질문에 대한 짧은 답변

표준 모델과 IE 모델의 차이점은 너비와 높이 계산의 차이입니다.

• 표준 모델 너비는 패딩과 테두리를 계산하지 않습니다.
• 즉 모델 너비는 패딩과 테두리를 계산합니다.

지식 분석

표준 상자 모델(W3C 상자 모델)

세트 너비와 높이 는 실제 콘텐츠의 너비와 높이 로 설정되며, 콘텐츠 주변의 테두리와 패딩은

따로 설정됩니다. 즉, 요소의 실제 너비와 높이는 다음과 같습니다.

너비[높이] = 내용 설정 너비[높이] + 패딩 + 테두리 + 여백

은 예를 통해 이해할 수 있습니다. div를 작성하고 너비, 높이, 테두리, 내부 여백, 외부 여백을 동시에 설정합니다. time;

//注：如果下面示例未写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;

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-box

IE 박스 모델(이상한 박스 모델)

폭과 높이 설정은 <코드>실제 내용 + 패딩 + 패딩 + border 너비와 높이가 설정됩니다. 즉, 요소의 실제 너비와 높이는 다음과 같습니다.

너비(높이) = 너비(높이) + 여백 설정위와 동일한 예 사용 , 그러나 box-sizing:border-box;를 설정하여 IE 상자 모델로 전환하면

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

효과와 Chrome 개발자 도구에 표시되는 상자 모델은 다음과 같습니다.

분명히 알 수 있듯이 정사각형과 상단은 /image/847/808/932/162746672847353CSS 박스 모델에 관한 6가지 인터뷰 질문을 공유하세요. 몇 개나 정답을 맞힐 수 있나요?" title="162746672847353CSS 박스 모델에 관한 6가지 인터뷰 질문을 공유하세요. 몇 개나 정답을 맞힐 수 있나요?" alt="CSS 박스 모델에 관한 6가지 인터뷰 질문을 공유하세요. 몇 개나 정답을 맞힐 수 있나요?"/>

3. 이 두 모델을 설정하는 방법 CSS?

질문에 대한 짧은 답변

🎜🎜위의 예에서는 실제로 이 설정을 사용했습니다🎜🎜🎜css 설정 표준 모델: Box-sizing:context-box (또한 브라우저의 기본 상자 모델) 🎜🎜css 설정 즉, 모델: box-sizing:border-box;🎜🎜🎜🎜4. JS는 상자 모델의 해당 너비와 높이를 어떻게 설정/가져오나요? 🎜🎜🎜🎜🎜질문에 대한 짧은 답변🎜🎜🎜

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

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

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

🎜🎜🎜지식 분석🎜🎜🎜🎜🎜🎜1 dom.style.width/height🎜🎜🎜🎜을 통해 얻습니다. 그리고 인라인 스타일만 얻을 수 있고 스타일 태그의 스타일과 링크 외부 링크는 얻을 수 없습니다🎜

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

let targetDom = document.querySelector('.box');
let width = targetDom.currentStyle.width;
let height = targetDom.currentStyle.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 사양에서는 이에 대해 자세히 설명합니다.

• 플로팅 요소 및 절대 위치 요소, 블록 수준 상자가 아닌 블록 수준 컨테이너(예: 인라인 블록, > table-cells 및 table-captions) 및 overflow 값이 표시 가능되지 않은 블록 수준 상자에는 콘텐츠는 새로운 BFC(Block Level Format Context)를 생성합니다. 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

BFC에서는 상자가 위에서부터 수직으로 하나씩 배열됩니다. 두 상자 사이의 수직 간격은 margin 값에 따라 결정됩니다. 두 개의 인접한 블록 수준 상자가 축소됩니다.

BFC에서는 각 상자의 왼쪽 외부 가장자리가 컨테이너의 왼쪽 가장자리에 닿거나 오른쪽에서 왼쪽 형식의 경우 오른쪽 가장자리에 닿습니다. 이는 부동 내에서도 마찬가지입니다(비록 부동 소수점으로 인해 상자의 라인 상자가 축소됨). 단, 상자 내부에 새 BFC가 생성되지 않는 한(부동 소수점으로 인해 상자 자체는 다음과 같이 됩니다.) 더 좁음)

BFC 레이아웃 규칙(원리/렌더링 규칙)

BFC 계산 높이가 설정되면, 플로팅 요소도 계산에 참여합니다(플로트 지우기)

BFC 영역은 플로팅 요소의 상자와 겹치지 않습니다. (플로팅 텍스트가 줄바꿈되는 것을 방지)BFC는 페이지의 독립 컨테이너이며 내부 요소와 외부 요소가 서로 영향을 미치지 않습니다. (여백이 겹치는 문제 해결)Box의 수직 거리는 여백에 따라 결정됩니다. 동일한 BFC에 속하는 인접한 두 상자의 여백이 겹칩니다.

다음 사용 시나리오에서는 이러한 규칙을 사용하여 몇 가지 실제적인 문제를 처리합니다. 🎜🎜🎜🎜BFC 생성 방법🎜🎜🎜🎜괄호 안에 몇 가지 부작용이 있습니다🎜🎜🎜🎜플로팅 요소🎜: float :left | float: right; [상위 요소의 너비가 사라지고 하위 요소도 위로 이동하게 됩니다.]🎜🎜위치 지정 요소🎜: position:absolute | position:fixed;🎜🎜display🎜의 일부 값: display:inline-block [인라인 블록으로 변환하면 너비가 손실됨] | display:flex | display:table | -flex, Grid, inline-grid; 🎜🎜오버플로 값이 표시되지 않습니다🎜: Overflow:hidden; [오버플로 요소가 잘립니다.] | Overflow:auto, Overflow:scroll;🎜🎜display :flow-root🎜[BFC에서 생성된 새로운 속성 새로운 방법, 부작용 없음, 브라우저 호환성에 주의하세요]🎜🎜 『Note』🎜🎜🎜display: 테이블도 가능한 이유 BFC 생성은 테이블이 기본적으로 익명 테이블 셀을 생성한다는 것입니다. 이 익명 테이블 셀은 BFC를 생성합니다. 🎜🎜🎜어떤 요소도 BFC로 간주될 수 없습니다. 이 요소가 위의 조건 중 하나라도 충족하는 경우에만 이 요소는 BFC로 간주됩니다🎜🎜🎜🎜🎜🎜활용 오버플로: 숨김상위 항목에 대한 BFC 생성 후🎜🎜🎜🎜위의 방법으로 클리어 플로팅을 구현할 수 있지만 여전히 의사 클래스를 사용하는 것이 좋습니다. 🎜🎜🎜🎜플로트를 지워야 하는 이유🎜 플로트 축소. 포함 블록에 높이가 설정되지 않았거나 적응형인 경우 포함 블록을 지탱할 수 없으며 축소됩니다. 🎜🎜🎜🎜🎜2. 부동 텍스트 줄바꿈 방지 🎜🎜🎜🎜에는 다음과 같은 텍스트 줄 바꿈 효과가 있습니다. 🎜🎜🎜🎜brother-box는 플로팅 요소로 부분적으로 덮여 있습니다(텍스트 정보는 플로팅 요소로 덮이지 않습니다). 요소가 브라더박스에 overflow:hidden을 추가하는 등 BFC를 생성하는 방법을 사용하면 다음과 같은 효과를 얻을 수 있습니다🎜🎜🎜🎜🎜🎜 『이유』🎜위의 규칙 2: BFC 영역은 플로팅 요소와 충돌하지 않습니다. 상자가 겹칩니다. 🎜🎜🎜이 방법은 왼쪽에 고정 너비가 있고 오른쪽에 콘텐츠의 적응 너비가 있는 2열 적응형 레이아웃을 구현하는 데 사용할 수 있습니다. 🎜🎜🎜🎜🎜3. BFC를 사용하여 여백 겹침 문제 해결🎜🎜🎜

기존 마진 겹침 조건에 따르면 마진 겹침을 해결하려면 BFC 생성 등 트리거 조건 중 하나만 파괴하면 됩니다.

BFC 정의에 따르면 두 요소의 수직 여백은 인접한 요소와 중첩 요소를 포함하여 동일한 BFC 내에 있는 경우에만 겹칠 수 있습니다.

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

여백 겹침 문제를 해결하려면 서로 동일하지 않게 만드세요. BFC .

• 인접한 요소의 경우 여백이 겹치는 것을 방지하기 위해 BFC 셸을 추가하기만 하면 됩니다.
중첩된 요소의 경우 상위 요소가 BFC
• 를 트리거하도록 하세요(예: 상위 요소에 BFC 추가). 오버플로: 숨김 ), 상위 여백과 현재 요소의 여백이 겹치지 않도록 할 수 있습니다.
===============================

새 BFC가 없으면 여백이 겹쳐서 여백- Bottom + margin-top은 20

새 BFC를 만든 후

위의 예에서는 두 사각형의 여백이 겹치는 것을 방지하기 위해 컨테이너를 다음 중 하나로 포장합니다. BFC를 트리거하는 div입니다.

참고:

여백 접기 문제는 BFC로 해결할 수 있지만 BFC를 트리거하는 것은 여백 접기 문제를 해결하기 위한 충분 조건이 아닙니다. 합리적으로 사용해야 합니다

원본 주소: https://juejin. cn/ post/6988877671606272031

저자: Axjy

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 입문

을 방문하세요! !

위 내용은 CSS 박스 모델에 관한 6가지 인터뷰 질문을 공유하세요. 몇 개나 정답을 맞힐 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!