transform

transform是一个CSS属性.

对某一个元素进行某些形变,包括旋转,缩放,倾斜或平移

通常行内级元素不能进行形变

translate(x,y)

平移.

单位可以为px和百分比

百分比是参考自身宽度和高度的.

scale(x,y)

可改变元素的大小,缩放

transform:scale(0.8, 0.8);缩小

应用场景: 鼠标移动到特殊图片,里面的元素放大.

rotate(deg)

常用单位deg, radians,turns

90deg = 100 grad = 0.25 turn = 1.5708rad

整数位顺时针

复数为逆时针

transform-origin

改变当前元素的形变的原点位置

transform-origin: center top

transform-origin: 20px 30px

skew(deg, deg)

让元素倾斜,

transform:sket(15deg, 20deg)

transform简写

transform: translate(50px) scale(1.2) rotate(35deg)

如果分开写后面的会导致覆盖前面的

transition

控制css属性变化的速度,让这个变化成为持续一段时间的过程,而不是立刻生效.

哪些属性发生动画效果Property
何时开始delay
持续多久duration
如何动画 (均速? 还是先快后慢)

并非所有css属性可以执行动画,去mdn查

transition-property:

transition-duration:

transition-delay:

缺点

只能定义开始状态和结束状态,不能定义中间状态
transition无法重复执行,除非一再触发动画
需要在特定状态下才能执行

CSS animation

使用keyframes定义动画序列(每一帧如何执行)
配置动画执行的名称,持续时间,动画曲线,延迟,执行次数,方向等等

keyframes

关键帧使用percentage来指定动画发生的时间点
0%表示动画第一时刻(from),100%最终时刻(to)

水平居中和垂直居中方案

水平居中

1.行内级元素:

设置父元素的text-align:center

2.块级元素:

设置当前块级元素(宽度已设置)的margin:0 auto;

3.绝对定位

元素有宽度的情况下,left0 right0 margin: 0 auto;

4.flex

justify-content:center

垂直居中

1.绝对定位

元素有高度的情况下,top0/bottom0/margin:auto 0;

(弊端:1.绝对定位会让元素脱钩不占标准流位置了. 2.必须得设置height)

2.flex布局

align-items:center

3.top/translate

让元素先向下位移父元素50%,再向上位移自身的50%

position:relative;

top:50%;

transform:translate(0. -50%);

div包裹图片时,图片下方有空隙

原因:本质上是vertical-align默认是baseline基线对齐.

解决方案:

方案一:将图片设置为Block

方案二:vertical-align设置为top/middle/bottom都行

当inline-box中有文本时,它的基线不再是底部,基线编程了最后一行文本的基线

文本baseline是字母x的下方
inline-block默认的baseline是margin-bottom的底部
inline-block有文本时,baseline是最后一行文本x的下方

vertical-align是给行内级的元素上面设置

baseline:基线对齐
top:把行内级合作的顶部和行盒(抽象包裹内容的盒子,)对齐
middle行内级盒子的中心点与父盒基线加上x-height一半的线对齐
bottom把行内级盒子的底部跟行盒底部对齐

line-height就可以来设置包裹内容的行盒的高度

Alugg's Blog

Frontend-Day7——form