1.显示效果
display:none; #没有任何显示效果
消失的时候在页面中不占位,显示的时候在页面中占位
2.盒子透明度
opacity:0;#所在区域留白
消失显示在页面中都占位
只要盒子在页面中占位就会影响其他盒子布局,所以显隐的盒子都需要做定位处理
opacity可以动画处理,display不能动画处理(是否存在渐变过程)
overflow属性
解决:超出盒子规定的显示区域的内容进行处理:
将超出规定区域的内容隐藏,隐藏掉的内容无法直接查看
overflow:hidden;
对于超出的区域自动进行滚动处理;
overflow:auto;
一直以滚动方式处理规定区域的内容:
overflow:scroll;
伪类设计边框:
设计边框=>在页面中占位=>让其定位处理=>脱离文档流=>不占位=>层级结构复杂
设计一个不占位的边框==>伪类:before|after
.div{
npx;
height:npx;
background-color:yellow;
position:relative;
}
.div:before|ater{
content:"";
/*上下边框*/
180;
height:1px;
background-color:green;
/*控制边框位置*/
position:absolute;
bottom:0px;
left:10px;
}
通过一个盒子最多只能设置两个边框
盒子阴影:
盒子阴影是一个独立的显示图层,永远出现在背景层之下(即使背景层透明,也会被覆盖遮挡)
盒子可以绑定多套阴影图层
阴影图层永远相对于显示图层偏移
语法:
box-shadow:x轴偏移 y轴偏移 虚化层度 阴影宽度 阴影颜色,...;
2d形变
形变参考点:(盒子左上角点?):
transform-origin:x轴坐标 y轴坐标;(移动形变参照的坐标原点)
形变属性;
transform:rotate())translate() scale();
旋转角度(deg) 偏移距离(px) 缩放比例(无单位)
形变多个效果要同时赋值给transform属性
transform:rotate(1080deg) translateX(-300px);
属性值的先后顺序不同,往往导致过程也不相同
transform:translate(-300px) rotate(1080deg);