1、BFC
1.1、介绍BFC及其应用
补充——触发BFC的方式,常见的有:
- 设置
浮动
overflow
设置为:auto、scroll、hiddenpositon
设置为:absolute、fixed
- 介绍:
○ 所谓BFC
,指的是:一个独立的布局环境,BFC内部的元素布局与外部互不影响 - 常见的BFC应用有:
a. 解决:浮动元素令父元素高度坍塌的问题
b. 解决:非浮动元素被浮动元素覆盖问题
c. 解决:外边距垂直方向重合的问题
2.2、介绍BFC/IFC/GFC/FFC
BFC
:块级格式化上下文,指的是:一个独立的布局环境,BFC内部的元素布局与外部互不影响IFC
:行内格式化上下文,将一块区域以行内元素的形式来格式化。GFC
:网格布局格式化上下文,将一块区域以grid网格的形式来格式化FFC
:弹性格式化上下文,将一块区域以弹性盒的形式来格式化
2、css中属性的计算(实现)过程是怎样的?
注意:
- 每个属性都是有默认值的,即使只设置一个属性,其它的属性的值也是存在的(默认值)
- 总的来讲,属性值的计算方法有下面4种,这也是属性值的计算顺序:
确定声明值
:
○ 参考样式表中如果没有冲突的声明,则作为CSS属性值,也就是:我们自己写的样式层叠冲突
:
○ 对样式表有冲突的声明使用层叠规则,确定CSS属性值,也就是:根据权重来设置样式使用继承
:
○ 对仍然没有值的属性,若可以继承则继承父元素的值,也就是:根据是否有继承关系来设置使用默认值
:
○ 对仍然没有值的属性,全部使用默认属性值,也就是:以上都不存在,则使用默认值
3、css中的计算属性是什么
- 即
calc()函数
,主要用于:指定元素的长度,支持所有CSS长度单位
,运算符前/后都要保留一个空格 - 比如:width:calc(100% - 50px)
4、媒体查询
问题
:
○ 如何使用媒体查询实现:视口宽度大于320px小于640px时,div元素宽度变成30%?回答
:
@media screen and(min-width : 320px) and (max-width:640px){div{width:30px;}
}
5、过渡和动画
5.1、CSS3中transition和animation的属性分别有哪些
transition过渡动画
:
a. transition-property:指定过渡的 CSS 属性
b. transition-duration:指定过渡所需的完成时间
c. transition-timing-function:指定过渡函数
d. transition-delay:指定过渡的延迟时间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动画如何实现?
transition方式
,实现简单动画
a. 定义过渡属性ransition-property:指定需要动画的CSS属性(如宽度、颜色)
b. 设置过渡时间transition-duration:定义过渡的持续时间
c. 设置速度曲线transition-timing-function:定义过渡的速度变化(如线性、缓出、缓入)
d. 设置延迟时间transition-delay:定义过渡的开始延迟时间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:用于:设置元素旋转背面是否可见
- 在CSS3中的变形整体分为:
2D变形
和3D变形
- 整体可以划分出以下几类:
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、渐进式渲染
- 渐进式渲染,也称为
惰性渲染
,是指:为了提高用户感知的加载速度,以尽快的速度来呈现页面的技术。 - 但是,这并不是某一项技术的特指,而是一系列技术的集合。
- 例如:
a.骨架屏
:其实就是一个转圈圈的loding动画之类的,让用户感觉快加载完了
b.图片懒加载
:先加载部分图片,其它等需要的时候在进行加载
c.图片占位符
:还未请求回数据时,临时找个图片代替占位,请求完了之后在替换
d.资源拆分
:将内容分块拆分
8、总结如何提升/优化CSS的渲染性能
CSS渲染性能的优化来自方方面面,这里列举一些常见的方式:
- 使用id选择器,因为id是唯一的
- 避免深层次的
选择器嵌套
- 尽量避免使用
属性选择器
,因为匹配速度慢 - 使用渐进增强的方案
- 遵守
CSSLint规则
——书写css的编码规范 - 不要使用
@import
- 避免过分使用(少用)重排(Reflow)——浏览器重新计算布局位置与大小
- 依赖继承——有些属性可以继承,就没有必要再写一遍
- 值缩写—属性值可以缩写就缩写
- 避免耗性能的属性
- 背景图优化合并
- 文件压缩
9、层叠上下文
补充:层叠上下文触发条件
- HTML中的根元素HTML本身就具有层叠上下文,称为
“根层叠上下文”
- 普通元素设置
position属性
为:非static值,并设置z-index属性
为具体数值,产生层叠上下- CSS3中的新属性也可以产生层叠上下文
9.1、什么是层叠上下文
- 层叠上下文是CSS中的一个概念,用于确定元素在页面上的显示顺序,它决定了哪些元素在其他元素的上方或下方显示
- 层叠上下文是一个
容器
,它里面的元素会按一定顺序堆叠
,如:z-index、文档流中的顺序,影响元素的重叠关系
9.2、什么是层叠等级
- 如果两个元素在同一个层叠上下文中,那么层叠等级越大的元素,就越靠前。
- 层叠等级是一个概念,层叠等级的大小可以根据层叠顺序来进行判断。
9.3、什么是层叠顺序
层叠顺序
表示:元素发生层叠时按照特定的顺序规则在Z轴上垂直显示。- 说简单一点就是:当元素处于同一层叠上下文内时如何进行层叠判断。
a. 查看父级是否有设置定位+z-index
b. 父级没有的话,就找到根层叠上下文html
10、补充CSS3遮罩及遮罩属性介绍——了解即可
介绍
:
○ CSS3遮罩(mask)允许通过定义图像或渐变来部分或全部隐藏HTML元素的特定部分,从而实现复杂的视觉效果属性
:
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
:用于定义多个遮罩层之间的组合方式,决定它们如何彼此叠加和混合- 示例代码
- 效果展示