盒子显隐、阴影、形变

1.盒子显隐

1.显示效果

display:none；# 没有任何显示效果
/*消失的时候在页面不占位置，显示的时候在页面占位置*/

2.盒子透明度

opacity:0; # 所在区域留白
/*消失显示在页面中都占位*/

总结：只要盒子在页面中有占位，就会影响其他盒子布局，所以显隐的盒子都需要做定位布局处理。

opacity可以做动画处理，display不能做动画处理。

overflow属性

overflow属性解决的问题：超出盒子规定的显示区域外的内容的处理方式
/*将超出规定区域的内容隐藏，隐藏掉的内容无法直接查看*/
overflow:hidden；

/*不超出正常，超出滚动，两种不同的处理方式来处理超出规定区域的内容*/
overflow:auto;

/*一直以滚动的方式处理超出规定区域的内容*/
overflow:scroll;

伪类设计边框

伪类设计的边框不占位，伪类 :before |  :after

.box {
    width: 200px;
    height: 200px;
    background-color: red;
    /*给伪类边框提供定位参考系*/
    position: relative;
}
.box:before {
    content: "";
    
    /*上下边框*/
    width: 180px;
    height: 1px;
    background-color: green;
    
    /*控制边框位置*/
    position: absolute;
    bottom:0px;
    left: 10px;
    
}

2.盒子阴影

/*语法：
box-shadow: x轴偏移 y轴偏移 虚化程度 阴影宽度阴影颜色，...;
注：
1.盒子阴影是一个独立的显示图层，永远出现在背景层之下（即使背景层透明，也会被覆盖遮挡）
2.盒子可以绑定多套阴影图层
3.阴影图层永远相对于显示层进行偏移
*/

3.2d形变

/*
形变参考点（盒子左上角原点）
transform-origin:x轴坐标 y轴坐标;

形变属性
transform:rotate() translate() scale();
旋转角度（deg）偏移距离（px）缩放比例（无单位）

总结：
1.形变多个效果要同时赋值给transform属性
transform:rotate(1080deg) translateX(-300px); # 1

2.属性值之间的先后顺序往往也会导致过程的不同
tranform:translateX(-300px) rotate(1080deg); # 2过程的运动效果与1不同
*/