-盒子显隐
显隐的盒子尽量不影响其他盒子的布局
display:none; 消失的时候不占位置，显示的时候占位
opacity:0-1; 盒子透明度
overflow: hidden; 超出部分隐藏
background-color:rgba( 0 0 0 0 ) 背景色，透明色
显隐方式（1） 消失的时候不占位置，显示的时候占位（不可以动画处理）
display:none; 消失的时候不占位置，显示的时候占位（不可以动画处理）
display:block; 盒子显示
显隐方式（2） 无论是否消失，始终占位置
opacity:0-1; 盒子透明度，（可以动画处理）
无论是否消失，始终占位置
显隐方式（3） 超出部分隐藏
overflow:hidden | auto | scroll
overflow: hidden; 超出部分隐藏
overflow: auto; 超出部分隐藏,不超出正常，超出滚动显示
overflow: scroll; 超出部分隐藏，不管超不超出，都是滚动显示
-伪类边框
.box:before | .box:after
.box {
给伪类边框提供参考系
position: relative; 相对定位
}
文本之前
.box:before {
content:"";
position:absolute; 绝对定位，脱离文档流不位置
bottom:0;
left:0;
}
-盒子阴影
盒子是一个独立的显示图层
可以写多套图层
box-shadow: x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色，…… （可以写多套阴影图层）
box-shadow: 0 0 0 0 red;
box-shadow: 0 2px 15px -8px black;
text-shadow: 文本阴影（了解）
-2d平面形变（了解）
属性值之间的先后顺序往往也会导致过程的不同
transform:translateX( -300px ) rotate( 1080deg ) scale( x,y )
位移距离 旋转角度 deg 形变
位移距离 translate
transform:translateX( -300px ) x轴位移
transform:translateY( -300px ) Y轴位移
形变 scale
transform:scale( 20px ) x轴y轴一起拉扯
transform:scaleX( 20px ) x轴拉扯
transform:scaleY( 20px ) Y轴拉扯
旋转角度 rotate( )
transform: rotateY( 1080deg ) Y轴旋转
transform: rotateX( 1080deg ) X轴旋转
transform: rotateZ( 1080deg ) Z轴旋转
形变参考点
transform-origin: x轴坐标 y轴坐标 （原点为左上角）