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不同 */