盒子显隐、阴影、形变、overflow、伪类边框
一 盒子的显隐
盒子的显隐操作控制盒子的显示状态。
盒子显隐的的两种方式如下:
1.display: none /*显示效果,display为none,消失的时候在页面中不占位,显示的时候在页面上占位*/ 2.opacity:0; /*盒子的透明度,0-1* /
opacity透明度盒子显隐的布局问题:
一旦盒子显示在页面中,那么便代表着盒子在页面中有占位,就会影响到其他盒子的布局,所以对于显隐的盒子都需要进行定位布局处理即属性display。使用opacity的盒子的显隐,会覆盖原来位置的盒子(根据两个盒子的大小进行覆盖)。
盒子显隐的动画处理:
盒子的显隐可以通过控制opacity进行动画处理,display不能进行图画处理。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子的显隐问题</title> <style> body{ margin: 0; } div{ width: 200px; height: 200px; background-color: orangered; margin-top: 10px; /*每个div之间都有一个间距,看起来清晰点*/ text-align: center; line-height: 200px; } .div2{ display: none; } .ctrl:hover~.div2{ display:block ; } </style> </head> <body> <div class="ctrl">控制</div> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子的显隐问题</title> <style> body{ margin: 0; } div{ width: 200px; height: 200px; background-color: orangered; margin-top: 10px; /*每个div之间都有一个间距,看起来清晰点*/ text-align: center; line-height: 200px; } .div2{ position: absolute; /*为显隐的盒子加上定位布局*/ opacity: 0; /*初始状态为隐藏*/ transition: 2s; /*过度动画*/ } .ctrl:hover~.div2{ opacity: 1; /*修改为显示状态,会覆盖原有位置的盒子(根据大小覆盖)*/ } </style> </head> <body> <div class="ctrl">控制</div> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </body> </html>
二 overflow属性
overflow是为了解决超出盒子规定的显示区域外的内容的显示方式的属性。一共有三个参数,分别为:hidden、auto、scroll。
/*将超出规定区域的内容隐藏, 隐藏掉的内容无法直接查看*/ /*overflow: hidden;*/ /*不超出正常,超出滚动 两种不同的处理方式来处理超出规定区域的内容*/ /*overflow: auto;*/ /*一直以滚动方式处理超出规定区域的内容*/ /*overflow: scroll;*/
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>overflow轮播图</title> <style> .wrapper{ width: 150px; height: 200px; margin: 20px auto; overflow: hidden; position: relative; } .big_img{ position: absolute; width: 450px; height: 200px; left: calc(-200px * 0); transition: 1s; } .big_img div{ float: left; width: 150px; height: 200px; } .img1{ background-color: red; } .img2{ background-color: green; } .img3{ background-color: blue; } .wrapper:hover .big_img{ left: calc(-150px * 2); } </style> </head> <body> <div class="wrapper"> <div class="big_img"> <div class="img1"></div> <div class="img2"></div> <div class="img3"></div> </div> </div> </body> </html>
三 伪类设计边框
在没有学习伪类设计边框之前,我们设置边框是利用border设置,但是这样设置的边框会有一个宽度,会影响整个布局,我们可以利用定位处理的方式,使其脱离文档流,实现边框在页面中不占位,但是这样走层级结构复杂,并且写起来也非常的不方便。如何设计一个不占位的边框就成为了一个问题,而伪类边框就是一个不占位的边框。
设计边框的两类伪类:before | after(两个伪类可以分别设计上下、左右边框。)
需要注意的是用此种方法设置的边框,一个盒子最多设置2条边框,上下一条,左右一条,如果一定要使用这种方法实现4条边框,可以利用两个重叠的盒子的方法,设置4条边框。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>伪类设计不占位的边框</title> <style> .box{ width: 200px; height: 200px; background-color: orange; position: relative; } .box_son{ width: 200px; height: 200px; position: relative; } /*before设计上边框*/ .box:before{ /*设置上边框*/ content: ""; width: 200px; height: 1px; background-color: black; /*控制边框的位置*/ position: absolute; /*父相子绝*/ top:0; } /*after设计左边框*/ .box:after{ /*设置左边框*/ content: ""; width: 1px; height: 200px; background-color: black; /*控制边框位置*/ position: absolute; top:0; } /*before设计下边框*/ .box_son:before{ /*设置下边框*/ content: ""; width: 200px; height: 1px; background-color: black; /*控制边框的位置*/ position: absolute; /*父相子绝*/ bottom:0; } /*after设计右边框*/ .box_son:after{ /*设置右边框*/ content: ""; width: 1px; height: 200px; background-color: black; /*控制边框位置*/ position: absolute; right: 0; } </style> </head> <body> <div class="box"> <div class="box_son"></div> </div> </body> </html>
四 盒子阴影
盒子阴影操作是显示出一个盒子的阴影图层,这个盒子阴影是一个独立的显示图层,永远出现在(盒子显示图层)背景图层之下(即使背景层透明,也会被覆盖遮挡)。一个盒子可以绑定多个阴影图层,阴影图层可以相对于盒子显示图层进行偏移。
语法:box-shadow: x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子阴影</title> <style> div{ width: 150px; height: 200px; background-color: orange; margin:20px auto; } .box2{ box-shadow:0 5px 20px 0 green ; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盒子阴影</title> <style> body { margin: 0; } .box { width: 200px; height: 200px; background-color: orange; /*position: relative;*/ /*top: 220px;*/ /*position: absolute;*/ /*top: 220px;*/ /*margin-top: 220px;*/ background-color: rgba(0,0,0,0); margin: 220px auto 0; /*x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色*/ box-shadow: 220px 0 0 20px red, 0 -220px 0 -20px blue, -220px 0 200px 100px yellow, -220px -220px 0 0 cyan, 220px -220px 0 0 cyan; } .wrap { width: 200px; height: 260px; background-color: orange; margin: 50px auto; } .wrap:hover { box-shadow: 0 5px 20px -5px #424242; } </style> </head> <body> <!--<div class="box"></div>--> <div class="wrap"></div> </body> </html>
五 2d形变
2d形变的作用:使运动起来!!!
''' # 形变参考点(盒子左上角原点) transform-origin: x轴坐标 y轴坐标; # 形变属性 transform: rotate() translate() scale(); # 旋转角度(deg) 偏移距离(px) 缩放比例(无单位) 1.形变多个效果要同时赋值给transform属性 transform: rotate(1080deg) translateX(-300px); # ① 2.属性值之间的先后顺序往往也会导致过程的不同 transform: translateX(-300px) rotate(1080deg); # ②过程的运动效果与①不同 '''
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>形变案例1</title> <style> div{ width: 100px; height: 100px; background-color: orange; margin: 10px auto; font-size: 12px; text-align: center; color: white; transition: 1s linear; /*设置动画,使我们观察清楚*/ } .box1:hover{ /*transition: 1s linear; !*将15行隐去,此时设置动画各自的形变将不会有反弹结果*!*/ transform: rotateX(1080deg); } .box2:hover{ transform: rotateY(1080deg); } .box3:hover{ transform: rotateZ(1080deg); } .box4:hover{ transform: translateX(-300px); } .box5:hover{ transform: translateY(200px); } .box6:hover{ transform: scaleX(2); } .box7:hover{ transform: scaleY(2); } .box8:hover{ transform: scale(0.5); /*设置一个值,xy均采取该值,设置两个值则一个对一个*/ } </style> </head> <body> <div class="box1">基于x轴的旋转</div> <div class="box2">基于y轴的旋转</div> <div class="box3">基于z轴的旋转</div> <div class="box4">基于x轴的偏移</div> <div class="box5">基于y轴的偏移</div> <div class="box6">基于x轴的缩放</div> <div class="box7">基于y轴的缩放</div> <div class="box8">基于x,y轴的缩放</div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>形变+阴影案例</title> <style> div{ width: 150px; height: 200px; background-color: orange; margin: 10px auto; font-size: 12px; text-align: center; } .div2:hover{ transform: translateY(-5px); box-shadow: 0 10px 20px 0 green; } </style> </head> <body> <div class="div1"></div> <div class="div2">鼠标悬浮此处,查看变化</div> <div class="div3"></div> </body> </html>