HTML及CSS面试题4

1、BFC

1.1、介绍BFC及其应用

补充——触发BFC的方式，常见的有：

• 设置浮动
• overflow设置为：auto、scroll、hidden
• positon设置为：absolute、fixed

1. 介绍：
   ○ 所谓BFC，指的是：一个独立的布局环境，BFC内部的元素布局与外部互不影响
2. 常见的BFC应用有：
   a. 解决：浮动元素令父元素高度坍塌的问题
   b. 解决：非浮动元素被浮动元素覆盖问题
   c. 解决：外边距垂直方向重合的问题

2.2、介绍BFC/IFC/GFC/FFC

1. BFC：块级格式化上下文，指的是：一个独立的布局环境，BFC内部的元素布局与外部互不影响
2. IFC：行内格式化上下文，将一块区域以行内元素的形式来格式化。
3. GFC：网格布局格式化上下文，将一块区域以grid网格的形式来格式化
4. FFC：弹性格式化上下文，将一块区域以弹性盒的形式来格式化

2、css中属性的计算(实现)过程是怎样的？

注意：

• 每个属性都是有默认值的，即使只设置一个属性，其它的属性的值也是存在的(默认值)
• 总的来讲，属性值的计算方法有下面4种，这也是属性值的计算顺序：

1. 确定声明值：
   ○ 参考样式表中如果没有冲突的声明，则作为CSS属性值，也就是：我们自己写的样式
2. 层叠冲突：
   ○ 对样式表有冲突的声明使用层叠规则，确定CSS属性值，也就是：根据权重来设置样式
3. 使用继承：
   ○ 对仍然没有值的属性，若可以继承则继承父元素的值，也就是：根据是否有继承关系来设置
4. 使用默认值：
   ○ 对仍然没有值的属性，全部使用默认属性值，也就是：以上都不存在，则使用默认值

3、css中的计算属性是什么

1. 即calc()函数，主要用于：指定元素的长度，支持所有CSS长度单位，运算符前/后都要保留一个空格
2. 比如：