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. 比如：width:calc(100% - 50px)

4、媒体查询

1. 问题：
   ○ 如何使用媒体查询实现：视口宽度大于320px小于640px时，div元素宽度变成30%？
2. 回答：

@media screen and(min-width : 320px) and (max-width:640px){div{width:30px;}
}

5、过渡和动画

5.1、CSS3中transition和animation的属性分别有哪些

1. transition过渡动画：
   a. transition-property：指定过渡的 CSS 属性
   b. transition-duration：指定过渡所需的完成时间
   c. transition-timing-function：指定过渡函数
   d. transition-delay：指定过渡的延迟时间
2. animation关键帧动画：
   a. animation-name：指定要绑定到选择器的关键帧的名称
   b. animation-duration：动画指定需要多少秒或毫秒完成
   c. animation-timing-function：设置动画将如何完成一个周期
   d. animation-delay：设置动画在启动前的延迟间隔
   e. animation-iteration-count：定义动画的播放次数
   f. animation-direction：指定是否应该轮流反向播放动画
   g. animation-fi-mode：规定动画不播放时(当动画完成时，或当动画有一个延迟未开始播放时)，要应用到元素的样式
   h. animation-play-state：指定动画是否正在运行或已暂停

5.2、CSS动画如何实现?

1. transition方式，实现简单动画
   a. 定义过渡属性ransition-property：指定需要动画的CSS属性（如宽度、颜色）
   b. 设置过渡时间transition-duration：定义过渡的持续时间
   c. 设置速度曲线transition-timing-function：定义过渡的速度变化（如线性、缓出、缓入）
   d. 设置延迟时间transition-delay：定义过渡的开始延迟时间
2. animation方式，实现复杂动画
   a. 定义关键帧@keyframes：使用规则指定动画的关键帧，描述动画过程中不同时间点的状态。
   b. 指定动画名称animation-name：将 @keyframes 定义的动画应用到元素上。
   c. 设置持续时间animation-duration：定义整个动画的运行时间。
   d. 设置速度曲线animation-timing-function：定义动画的速度变化。
   e. 设置延迟时间animation-delay：定义动画开始前的延迟时间。
   f. 定义播放次数animation-iteration-count：指定动画播放的次数（如一次、无限次）。
   g. 设置播放方向animation-direction：定义动画播放的方向（正向、反向、交替）。
   h. 设置填充模式animation-fill-mode：定义动画结束后元素的状态（如保持最后状态）。

6、简述CSS3中的变形(translate)如何使用?

补充——还有一些重要的变形属性，例如：

• transform：它所对应的属性值就是一系列的变形函数，如：transform:scale(1.5)
• transform-origin：用于设置元素的中心点位置
• transform-style：指定嵌套元素如何在3D空间中呈现
• perspective：用于设置查看者的位置，简单理解，就是视距，用来设置用户和元素 3D 空间Z平面之间的距离，越小，用户与3D空间Z平面距离越近，值越大，用户与3D空间Z平面距离越远，视觉效果就很小
• perspective-origin：设置视距的角度，从left/center/right/length/%等
• backface-visibility：用于：设置元素旋转背面是否可见

1. 在CSS3中的变形整体分为：2D变形和3D变形
2. 整体可以划分出以下几类：
   • 2D变形
     ■ 基本用法：translate 用于在平面上移动元素的位置。
     ■ translateX：沿X轴水平移动元素。
     ■ translateY：沿Y轴垂直移动元素。
     ■ translate：同时沿X轴和Y轴移动元素，接受两个参数。
   • 3D变形
     ■ translateZ：沿Z轴移动元素，影响深度感，使元素看起来向前或向后移动
     ● 需要配合transform-style: preserve-3d
     ■ translate3d：同时沿X轴、Y轴和Z轴移动元素，接受三个参数。
   • 百分比单位
     ■ 在translate中使用百分比时，相对于元素的自身尺寸进行移动。
   • 组合变形
     ■ translate可以与其他变形函数，如：rotate、scale一起使用，创建复杂的变形效果

7、渐进式渲染

1. 渐进式渲染，也称为惰性渲染，是指：为了提高用户感知的加载速度，以尽快的速度来呈现页面的技术。
2. 但是，这并不是某一项技术的特指，而是一系列技术的集合。
3. 例如：
   a. 骨架屏：其实就是一个转圈圈的loding动画之类的，让用户感觉快加载完了
   b. 图片懒加载：先加载部分图片，其它等需要的时候在进行加载
   c. 图片占位符：还未请求回数据时，临时找个图片代替占位，请求完了之后在替换
   d. 资源拆分：将内容分块拆分

8、总结如何提升/优化CSS的渲染性能

CSS渲染性能的优化来自方方面面，这里列举一些常见的方式：

1. 使用id选择器，因为id是唯一的
2. 避免深层次的选择器嵌套
3. 尽量避免使用属性选择器，因为匹配速度慢
4. 使用渐进增强的方案
5. 遵守CSSLint规则——书写css的编码规范
6. 不要使用@import
7. 避免过分使用(少用)重排(Reflow)——浏览器重新计算布局位置与大小
8. 依赖继承——有些属性可以继承，就没有必要再写一遍
9. 值缩写—属性值可以缩写就缩写
10. 避免耗性能的属性
11. 背景图优化合并
12. 文件压缩

9、层叠上下文

补充：层叠上下文触发条件

1. HTML中的根元素HTML本身就具有层叠上下文，称为“根层叠上下文”
2. 普通元素设置position属性为：非static值，并设置z-index属性为具体数值，产生层叠上下
3. CSS3中的新属性也可以产生层叠上下文

9.1、什么是层叠上下文

1. 层叠上下文是CSS中的一个概念，用于确定元素在页面上的显示顺序，它决定了哪些元素在其他元素的上方或下方显示
2. 层叠上下文是一个容器，它里面的元素会按一定顺序堆叠，如：z-index、文档流中的顺序，影响元素的重叠关系

9.2、什么是层叠等级

1. 如果两个元素在同一个层叠上下文中，那么层叠等级越大的元素，就越靠前。
2. 层叠等级是一个概念，层叠等级的大小可以根据层叠顺序来进行判断。

9.3、什么是层叠顺序

1. 层叠顺序表示：元素发生层叠时按照特定的顺序规则在Z轴上垂直显示。
2. 说简单一点就是：当元素处于同一层叠上下文内时如何进行层叠判断。
   a. 查看父级是否有设置定位+z-index
   b. 父级没有的话，就找到根层叠上下文html

10、补充CSS3遮罩及遮罩属性介绍——了解即可

1. 介绍：
   ○ CSS3遮罩(mask)允许通过定义图像或渐变来部分或全部隐藏HTML元素的特定部分，从而实现复杂的视觉效果
2. 属性：
   a. mask-image：设置遮罩图片，根据图片来显示对应的遮罩效果
   b. mask-mode：用于指定遮罩图像的混合模式，决定遮罩图像与背景如何组合显示
   c. mask-repeat：表示遮罩层是否允许重复，选值和background-repeat相同
   d. mask-position：设置遮罩层的位置，选值和background-position相同
   e. mask-clip：用于定义遮罩图像的可见区域，决定遮罩图像在哪些部分被裁剪或显示
   f. mask-origin：用于指定遮罩图像的位置区域，可以是边框框、填充框或内容框，以控制遮罩图像的应用范围
   g. mask-size：设置遮罩层的大小
   h. mask-type：用于指定遮罩是使用亮度（luminance）还是透明度（alpha）来确定遮罩区域的显示
   i. mask-composite：用于定义多个遮罩层之间的组合方式，决定它们如何彼此叠加和混合
3. 示例代码
   
4. 效果展示