关于面试:面试题锦1-｜-你知道什么是BFC吗

从今天起，“小葵花妈妈课堂”啦！????

大家都晓得，面试犹如考试，在考试之前，老师个别都会先给咱们 理清常识脉络 ， 整顿温习纲要 ，依照纲要精准学习， 疾速达到应试状态 。所以，一本精炼的温习纲要对面试尤为重要。本 武林秘笈 从本周开始，每周会更新 3-5 个知识点，尽量的精简与提炼常识脉络，极为适宜利用碎片工夫来学习。心愿你和我一起，每周提高一点点～????

1. CSS 选择器及其优先级

选择器的优先级由高到低：

• !important
• 内联款式(style='xxx')（1000）
• ID 选择器(#example)（0100）
• 类选择器(.example)/ 属性选择器([type="radio"])/ 伪类选择器(:hover)（0010）
• 标签选择器(h1)/ 伪元素选择器(::before)(0001)
• 通配符选择器(*)/ 关系选择器(+,>,~,' ',||)/ 否定伪类（:not()）(0000)

注 ：通配选择器(*)、组合选择器(+,>,~,' ',||) 和否定伪类（:not()）不会影响优先级（然而，:not()外部申明的选择器会影响优先级）。

优先级是由 A、B、C、D 的值来决定的，其中它们的值计算规定如下：

1. 如果存在内联款式，那么 A = 1, 否则A = 0;
2. B 的值等于 ID 选择器 呈现的次数;
3. C 的值等于 类选择器 和 属性选择器 和 伪类 呈现的总次数;
4. D 的值等于 标签选择器 和 伪元素 呈现的总次数。

这么很形象，那么来个例子你就懂了：

#nav-global > ul > li > a.nav-link

套用下面的算法，顺次求出 A B C D 的值：

1. 因为没有内联款式，所以 A = 0;
2. ID 选择器总共呈现了 1 次，B = 1;

类选择器呈现了 1 次，属性选择器呈现了 0 次，伪类选择器呈现 0 次，所以 C = (1 + 0 + 0) = 1；
标签选择器呈现了 3 次，伪元素呈现了 0 次，所以 D = (3 + 0) = 3;

下面算出的A、B、C、D 能够简记作：(0, 1, 1, 3)。

拜访 MDN 来理解更多对于优先级的详细信息。

2. 伪类和伪元素的区别

伪元素：次要是用来创立一些不存在原有 dom 构造树种的元素，例如：用::before 和::after 在一些存在的元素前后增加文字款式等，这些被增加的内容会以具体的 UI 显示进去，被用户所看到的，这些内容不会扭转文档的内容，不会呈现在 DOM 中，不可复制，仅仅是在 CSS 渲染层退出。CSS3 中倡议应用:: 示意伪元素，如：div::before。

::before 和::after 这两个伪类下有特有的属性 content，必须有这个属性。

伪类：示意已存在的某个元素处于某种状态，然而通过 dom 树又无奈示意这种状态，就能够通过伪类来为其增加款式。例如 a 元素的:hover, :active 等。CSS3 中倡议应用: 示意伪元素，如：a:hover。

3. 你晓得什么是 BFC 么？

3-1. 什么是 BFC

块级格式化上下文，是一个独立的渲染区域，让处于 BFC 外部的元素与内部的元素互相隔离，使内外元素的定位不会相互影响。

IE 下为 Layout，可通过 zoom:1 触发

3-2. 触发 BFC 的条件

• 根元素
• float元素
• position: absolute/fixed
• display: inline-block / table
• ovevflow !== visible
• display: flow-root
• column-span: all

3-3. BFC 的束缚规定

• 属于同一个 BFC 的两个相邻 Box 垂直排列（能够看作 BFC 中有一个的惯例流）
• 属于同一个 BFC 的两个相邻 Box 的 margin 会产生重叠
• BFC 中子元素的 margin box 的右边，与蕴含块 (BFC) border box 的右边相接触 (子元素 absolute 除外)
• BFC 的区域不会与 float 的元素区域重叠
• 计算 BFC 的高度时，思考 BFC 所蕴含的所有元素，连浮动元素也参加计算
• 文字层不会被浮动层笼罩，盘绕于四周

3-4.BFC 能够解决的问题

• 阻止 margin 重叠
• 能够蕴含浮动元素 —— 革除外部浮动(革除浮动的原理是两个 div 都位于同一个 BFC 区域之中)
• 自实用两列布局（float + overflow）
• 能够阻止元素被浮动元素笼罩

4. 如何实现居中

4-1. 相对定位 + margin

优缺点：须要父级有具体宽高，且要晓得宽高的具体值

.parent {
  position: relative;
  height: 400px;
  width: 100%;
  border: 1px solid #000;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  background-color: aquamarine;
}

4-2. transform

优缺点：不须要父级有具体宽高，然而兼容性不是特地好

.parent {
  position: relative;
  height: 400px;
  width: 100%;
  border: 1px solid #000;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  background-color: aquamarine;
}

4-3. 相对定位

优缺点：须要父级有具体宽高，然而不须要晓得宽高的具体值

.parent {
  position: relative;
  height: 400px;
  width: 100%;
  border: 1px solid #000;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  background-color: aquamarine;
}

4-4.flex

优缺点：更简略了，然而也是兼容性不是特地好

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  width: 100%;
  border: 1px solid #000;
}

.child {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
}

4-5.table-cell

优缺点：要求父级有固定宽高，且不能应用百分比

.parent {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 400px;
  width: 400px;
  border: 1px solid #000;
}

.child {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: aquamarine;
}

4-6.javascript

<script>
  let html = document.documentElement
  winW = html.clientWidth
  winH = html.clientHeight
  boxW = box.offsetWidth
  boxH = box.offsetHeight
  box.style.position = 'absolute'
  box.style.left = (winW - boxW) / 2 + 'px'
  box.style.top = (winH - boxH) / 2 + 'px'
</script>

5. 盒模型

页面渲染时，dom 元素所采纳的 布局模型。可通过 box-sizing 进行设置。依据计算宽高的区域可分为：

• content-box (W3C 规范盒模型)
• border-box (IE 盒模型)
• padding-box (FireFox 已经反对)
• margin-box (浏览器未实现)

注：实践上是有下面 4 种盒子，但当初 w3c 与 mdn 标准中均只反对 content-box 与 border-box；

最初

既然曾经读到这里了，就在评论区打个卡吧！如果您感觉这篇内容对您有些许作用，请长按二维码关注我哦！您的关注是我保持的能源～