CSS个人学习面经2.pdf

CSS⾯经

●display属性

○

●float属性，脱离标准流

○假如某个div元素A是浮动的，如果A元素上⼀个元素也是浮动的，那么A元素会跟随在上⼀个元

素的后边(如果⼀⾏放不下这两个元素，那么A元素会被挤到下⼀⾏)；如果A元素上⼀个元素是

标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上⼀个元素的底部

对⻬。

○清除浮动clear，只对当前元素有效。⽐如设置在div上，不允许左边有浮动，该div向下换⾏。

●transition属性，CSS3

○CSS3中⽤于定义元素从⼀种样式状态平滑过渡到另⼀种样式状态的动画效果。当元素的指定样

式属性发⽣变化时，transition会⾃动为其添加⼀个过渡动画，⽽⾮⽴即跳变。

○属性

■property指定参与过渡动画的CSS属性。单属性名，或多个属性名组成的列表。

■duration定义过渡动画的持续时间，以秒（s）或毫秒（ms）为单位。

■timing-function决定了过渡过程中速度的变化模式，如匀速、加速、减速等。常⽤

的值包括：

●ease，慢快慢，默认

●linear，匀速

■delay，过渡动画开始前的等待时间，同样以秒（s）或毫秒（ms）为单位。

○触发⽅式

■样式改变时，通过JavaScript修改元素样式、⽤户交互（如:hover、:focus、:active）或媒

体查询等

●transform，CSS3

○通过css来改变元素的形状或位置，旋转、缩放、平移。

■变形不会影响到⻚⾯的布局(不会脱离⽂档流)，只影响绘制元素。

■平移元素，百分⽐是相对于⾃身计算的

○属性

■translate，translateX，translateY

●移动范围，值为正数，向右向下。

■scale，scaleX，scaleY，缩⼩2倍是0.2。

1

■rotate，顺时针旋转

■skew，倾斜

■transform-origin，变形中⼼

○场景

■图⽚展示

■按钮点击效果

■卡⽚翻转效果

■动画效果

■3D动画效果

●渐变gradient，CSS3

○三元素，渐变线及其起始点和结束点，颜⾊序列

○linear-gradient，线性渐变

■参数（⽅向toleft/right/top/bottom，颜⾊1，位置，颜⾊2，位置，...，结束颜⾊，位

置）

○radial-gradient，径向渐变

●滤镜属性filter，CSS3

○元素可视效果，⼀般为img，如模糊blur、饱和度、透明度opacity。

○百分⽐。

●animation，CSS3

○可以⾃动触发动态效果

○参数，动画名称，持续时间3秒，时间函数（线性，默认为ease），延迟时间，次数，反向播放

（alternate动画结束时反向回去），结束时状态（是否保留结束状态）。

■名称，和定义的关键帧名称相同进⾏关联

○transition和animation⽐较

■transition，过渡属性，需要触发事件才执⾏动画，⾯向样式变化中的过渡效果。设置开始

关键帧和结束关键帧。

■animation，动画属性，不需要触发事件，设置好参数后⾃动执⾏，可以循环，可以设置多

个关键帧。

●flex布局，CSS3

○任何容器都可以指定flex布局，包括⾏内元素。

■display：inline-flex/flex

■⼦元素⾃动成为容器成员item，其float、c