2019 CSS经典面试题

这些是我自己在学习过程中总结的一些知识点，本篇文章我将以面试题的形式分享给大家，希望对大家有所帮助，本文篇幅较长，您若认真看完，并且反复阅读，我相信对您的学习或者是面试，都会有一定帮助，同时希望大家批评指正！

1. 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

盒子模型就是 元素在网页中的实际占位，有两种：标准盒子模型和IE盒子模型

标准(W3C)盒子模型：内容content+填充padding+边框border+边界margin

宽高指的是 content 的宽高

低版本IE盒子模型：内容（content+padding+border）+ 边界margin，

宽高指的是 content+padding+border 部分的宽高

专题推荐：2020年CSS面试题汇总（最新）

问题的拓展：

CSS 如何设置这两种模型？

box-sizing : content-box   box-sizing : border-box复制代码

JS 如何设置获取盒模型对应的宽和高？

dom.style.width/height;//设置获取的是内联样式 dom.currentStyle.width/height;//只有IE支持 window.getComputedStyle(dom).width/height;//兼容性好 dom.getBoundingClientRect().width/height;//适用场所：计算一个元素的绝对位置复制代码

实例题（根据盒模型解释边距重叠）？

该例子是父子边距重叠，还有兄弟元素的边距重叠

<style>             html *{                     padding: 0;                     margin: 0;             }             #sec{                     background: #f00;                     overflow: hidden; //创建了一个BFC，块级格式化上下文        }             .child{                     height: 100px;                     margin-top: 10px;                     background: yellow;             }     </style> <section id="sec">             <article class="child"></article>     </section>复制代码

BFC（边距重叠解决方案）？

2. box-sizing属性？

用来控制元素的盒子模型的解析模式，默认为content-box
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是 content 部分的高/宽
border-box：IE 传统盒子模型。设置元素的 height/width 属性指的是 content + border + padding 部分的高/宽

3. 对 BFC 规范(块级格式化上下文：block formatting context)的理解？

（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）

一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。

不同类型的 Box，会参与不同的 Formatting Context（决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染，也就是说BFC内部的元素和外部的元素不会互相影响。

BFC 规定了内部的 Block Box 如何布局。

定位方案：

1. 内部的 Box 会在垂直方向上一个接一个放置。
2. Box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
3. 每个元素的 margin box 的左边，与包含块 border box 的左边相接触。
4. BFC 的区域不会与 float box 重叠。
5. BFC 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
6. 计算 BFC 的高度时，浮动元素也会参与计算。

满足下列条件之一就可触发 BFC

1. 根元素，即 html
2. float 的值不为none（默认）
3. overflow 的值不为 visible（默认）
4. display 的值为 inline-block、table-cell、table-caption
5. position 的值为 absolute 或 fixed