起点低怕什么，大不了加倍努力。人生就像一场马拉松比赛，拼的不是起点，而是坚持的耐力和成长的速度。只要努力不止，进步也会不止。

一、谈谈你对 BFC 的理解及作用。

BFC 是 Block Formatting Context 格式化上下文的缩写，就是页面上一个隔离的独立容器，容器内的子元素不会影响到外面的元素。有一个独立的块级渲染区域，该区域有一套渲染规则来约束盒子的布局，与外部的区域没有关系。

1.1、如何创建 BFC

• float 的值不为 none
• position 的值为 absolute 或 fixed
• overflow 的值不为 visible
• display 的值不为 inline-block 、flex、inline-flex

1.2、BFC的特性

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

1.3、BFC 的作用

• 取消盒子的 margin 塌陷
• 清除内部浮动，不会影响外面元素，可以阻止元素被浮动元素覆盖。

二、两栏布局，有几种实现方式？

常见的有 5 种方式，分别为：

• flex 布局
• grid 布局
• 圣杯布局
• 双飞翼布局
• 系统的浮动布局

2.1、使用 flex 布局

使用 flex 布局，是目前主流的方式。

实现方式：父容器设置 display:flex，定宽元素设置 width，自适应的子元素设置 flex:1 或 flex-grow:1。

2.2、使用 grid 布局

实现方式：父级元素设置 display:grid ，使用 grid-template-columns 和 grid-template-rows 设置格子，子项设置 grid-column 和 grid-row 设置在格子中的位置。IE 不支持这种，如果项目需要兼容 IE 浏览器，就不能选它了。

2.3、圣杯布局

实现方式：定宽元素和自适应元素都设置左浮，自适应元素设置宽度 100% ,定宽元素设置固定宽度，定宽元素因为 DOM 位置靠后被挤下去，给定宽元素设置 margin-left:-100% 此时定宽元素和自适应元素左侧重叠，给容器设置 padding-left 的值为定宽元素宽度，给定宽元素设置定位和固定宽度。

圣杯布局本质上利用了浮动和负 margin 的特性，同时也有一个要求，自适应元素的宽度最小不能小于固定宽度侧边栏的宽度，否则会出现错乱。

2.4、双飞翼布局

解决了圣杯布局自适应元素宽度小于固定宽度侧边栏时出现错乱的问题。

实现方式：给自适应元素内再多加一层 div ，定宽元素和自适应元素都设置左浮，自适应元素宽度 100% ,定宽元素设置宽度，margin-left:-100% ，此时定宽元素和自适应元素左侧重叠，给自适应元素内的 div 加 margin 来规避重叠。

2.5、系统的浮动布局

实现方式：定宽元素左浮或右浮，自适应的元素设置 margin 预留空间，为避免父元素高度塌陷，需要给父级元素加清除浮动。

该方式对 DOM 的结构顺序有一定的要求，布局方式较老，现在基本都不用了。

三、什么是 css reset ？

它的全称就是 reset.css ，是一个 css 文件，用来重置浏览器默认的 css 样式。

reset 被大厂基本都给抛弃了，什么原因呢？

性能差，使用 resst.css 文件，会把使用到和使用不到的样式文件都加载进来，出现代码冗余，所以被一起企业已经抛弃了。

normalize 与 reset.css 一样，是一个样式的重置库。主要是为了增强跨浏览器渲染的一致性。

四、网页中应该使用奇数还是偶数的字体？为什么呢？

答案是：偶数。

原因：

• 偶数让文字在浏览器上更好看。
• ui 给前端的设计图一般都是偶数，这样不管布局也好，转换 px 也好，会方便一些。

感兴趣了，大家找一个左右对称的文字，比如”中”、“十”设置一个偶数一个奇数，观察下。

五、css 优先级算法，如何计算？

总结性地回答：

选中且设置 !important 的