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 子元素自己在垂直方向的对齐方式