box-sizing:border-box 向内挤压内容的空间, 保证盒子的显示大小不变
box-shadow: 1 如果想要实现四个边都有阴影, 可以把 X,Y 的偏移设成 0. 同时把模糊程度设大一些
2 如果想要实现内阴影, 需要添加一个 inset. 内阴影的方向和外阴影相反
transition : 动画
1.transition-property: 对哪个属性生效
2.transition-duration: 执行时长
3.transition-timing-function: 动画执行效果
linear : 匀速
ease: 先快再慢 (默认值)
ease-in: 加速
ease-in-out: 先快再慢 (幅度大)
steps: 分步执行
4.transiton-delay: 延迟执行时间
5. 如果所有的动画参数一致可以写成 all
渐变
1 线性渐变 (一个方向发生改变)
background:linear-gradient(to right, orange, oranged)
2 径向渐变 (从圆心向四周发散)
background:radial-gradient(100px at center, orange,oranged)
transform 的总结:
1 transform 就是变换, 元素在 2d 平面所发生的平移 旋转 缩放 拉伸
- translate(x,y)
- rotate(43deg)
- scale(0.5)
- skew(45deg)
transform-origin: 原始参考点
特点: 不会影响到其它元素的布局
3d 变换和 2d 变换一样, 都是改变 transform 的属性
3d 变换相对于 2d 变换 多了 z 轴移动 绕着 x 轴旋转 绕着 y 轴旋转
如果想要给某个元素添加 3d 效果
给元素开启 3d 效果 transfor-style:preserve-3d
给该元素父元素设置视距 perspective: 500px
如果要改变旋转轴的位置 可以改变 transform-orgin:left/top bottom center,middle
弹性布局
元素的排列方式: flex-direction:column 纵向排列垂直方向是主轴 水平方向是侧轴 默认 (row 横行排列水平方向是主轴 垂直方向是侧轴)
a : 元素横向排列: display:flex
b : 如果父盒子的空间不够子盒子, 子盒子会等比例缩小来适应父盒子的空间
c : 子元素可以分配一个固定的宽度 flex-basis:400 排序 也可以给份数 flex:1 来分配 (先减掉固定的宽度) 获得多少份
d : 弹性布局可以让子元素宽高保持不变的前提下 换行显示 给父盒子添加一个 flex-wrap:wrap
e : 元素在水平反向的对齐方式: 给父盒子设置一个 justify-content:
- space-around
- space-between
- center
- flex-start
- tlex-end
f : 元素在每一行的区间内部 (垂直方向的对齐方式)align-items:
- center
- flex-start
- flex-end
g :align-self:center 子元素自己在垂直方向的对齐方式
来源: https://www.2cto.com/kf/201806/753964.html