前端第五天

Posted 2021-02-05 suncunxu

1.显示效果

display:none; #没有任何显示效果

消失的时候在页面中不占位,显示的时候在页面中占位

2.盒子透明度

opacity:0;#所在区域留白

消失显示在页面中都占位

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

opacity可以动画处理,display不能动画处理(是否存在渐变过程)

overflow属性

解决:超出盒子规定的显示区域的内容进行处理:

将超出规定区域的内容隐藏,隐藏掉的内容无法直接查看

overflow:hidden;

对于超出的区域自动进行滚动处理;

overflow:auto;

一直以滚动方式处理规定区域的内容:

overflow:scroll;

伪类设计边框:

设计边框=>在页面中占位=>让其定位处理=>脱离文档流=>不占位=>层级结构复杂

设计一个不占位的边框==>伪类:before|after 

.div{

width:npx;

height:npx;

background-color:yellow;

position:relative;

}

.div:before|ater{

content:"";

/*上下边框*/

width: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);