面试题之CSS

标签：无分类：未分类创建时间：2021-06-24 07:13:26 更新时间：2025-01-17 10:39:24

这篇也是一篇整理稿，大部分都是网上抄的。

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

BFC规定了内部的Block Box如何布局。定位方案：

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

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

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

参考文章:
1.50道CSS基础面试题（附答案）

2.stacking context(层叠上下文),布局规则

1.z 轴上的默认层叠顺序如下（从下到上）：(1)根元素的边界和背景。(2)常规流中的元素按照 html 中顺序。(3)浮动块。(4)positioned 元素按照 html 中出现顺序。
2.如何创建 stacking context：(1) 根元素。(2) z-index 不为 auto 的定位元素。(3)a flex item with a z-index value other than ‘auto’。(4)opacity 小于 1 的元素。(5)在移动端 webkit 和 chrome22+，z-index 为 auto，position: fixed 也将创建新的 stacking context。

往期推荐

文章目录

1. 1.对BFC规范(块级格式化上下文：block formatting context)的理解?
2. 2.stacking context(层叠上下文),布局规则

微信公众号

广告位

诚心邀请广大金主爸爸洽谈合作

每日一省

isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

每日二省

为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

每日三省

== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

每日英语

Happiness is time precipitation, smile is the lonely sad.

幸福是年华的沉淀，微笑是寂寞的悲伤。