一,z-index
脱离文档流标签,具有z-index属性的值,可以用来控制显示层次的优先级,值为任意整数(值越大优先级越高)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>z-index</title> <style> .box { position: relative; width: 400px; height: 400px; background: cyan; } div div { width: 200px; height: 200px; background: orange; /*绝对定位议案与相对定位结合使用,父级先使用相对定位,然后子级使用绝对定位的参考系是最近的使用相对定位的父级*/ position:absolute; } .b1 { background: tan; } .b2 { background: pink; left:100px; top:100px; /*只是改变现实的优先级,也可以改变body总的顺序改变*/ z-index:2; } .b3 { right:0; bottom:0; } </style> </head> <body> <!-- 需求1:d1,d2,d3均为box的一半大小 --> <!-- 需求2:d1左上角,d2居中,d3右下角 --> <!-- 需求3:d2区域在最上方(会覆盖d1,d3的重叠部分) --> <div class="box"> <div class="b1"></div> <div class="b2"></div> <div class="b3"></div> </div> </body> </html>
二,响应式布局
可以强加一些逻辑,窗口在规定的范围内,显示一定的样式,超出范围设定其他的样式
1,响应式布局内,css语法同样正常使用
2,响应式布局之间存在不同屏幕尺寸的限制,使用样式相互不影响(满足当前屏幕尺寸时,该样式块起作用,不满足时,则样式块失效)
3,当相应式布局中样式块起作用时,会与正常样式块协同布局,遵循选择器的有限级规则
原则:
1,采用响应式布局的页面,基本样式只做共性的样式设置,需要根据页面尺寸进行适应变化的样式均有相应式布局处理2,要根据县影视布局的页面要处理所有屏幕尺寸下的样式块
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>响应式布局</title> <style> html,body { margin: 0; } .it { height: 300px; background: #f30; text-align:center; float: left; border-radius: 50%; font: 500 50px/300px "微软雅黑"; color:white; } .box:after { content: ""; display: block; clear:both; } /*设置屏幕超出1200px范围*/ @media only screen and (min-width: 1200px) { .box { max-width: 1200px; width: 95%; margin: 0 auto; background-color: pink; } .it { width: 25%; } } @media only screen and (min-width: 600px) and (max-width:1200px) { .box { background-color: cyan; } .it { width: 30%; margin: 0 calc(10% / 6); } } @media only screen and (max-width: 600px) { .box { background-color: orange; } .it { width: 80%; margin-left: 10%; min-width: 300px; } } </style> </head> <body> <div class="box"> <div class="it">1</div> <div class="it">2</div> <div class="it">3</div> <div class="it">4</div> <div class="it">5</div> <div class="it">6</div> <div class="it">7</div> <div class="it">8</div> <div class="it">9</div> <div class="it">10</div> <div class="it">11</div> <div class="it">12</div> </div> </body> </html>
三,过渡
从一个状态以动画的方式编程另一种状态的这种变化过程就叫做过渡
属性:
1,transition-porperty:表示过渡样式属性 all(默认值) 还可以填多个值,之间用逗号隔开(表示过渡需要变得) 2,transition-duration:表示过渡持续的时间 3,transiton-delay:表示过渡延迟时间 4,transition-timing-function:表示过渡运动曲线 -- linear：匀速 -- ease：慢快慢(默认值) -- ease-in-out：慢快慢 -- easa-in：慢快 -- ease-out：快慢 -- cubic-bezier()：贝赛尔曲线函数 5,transition:上面四个属性整体赋值,按1234的顺序赋值<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>过渡</title> <style> .box { width: 200px; height: 200px; background: cyan; /*过渡样式属性(一般不设置.存在固定值)*/ transition-property: all; /*过渡持续时间(下面的0可以省略,直接.2s)*/ transition-duration: 0.2s; /*过渡延迟时间(一般会给用户造成电脑卡顿的感觉,也不设置)*/ transition-delay: 0.1s; /*过渡运动曲线(一半呢只使用默认值)*/ transition-timing-function: ease; /*可以复合赋值*/ /*transition: 0.3s ease;*/ } .hover { width: 200px; height: 200px; margin: 0 auto; } /*下面是制造第二状态处理方式,不会出现闪的状态*/ .hover:hover .box{ width: 200px; height: 200px; border-radius: 50%; background: pink; } </style> </head> <body> <!-- 过渡的效果通过hover产生,可以制作一个hover层,处理方式:与显示层同等区域大小 --> <div class="hover"> <div class="box"></div> </div> </body> </html>
四,felx布局
参考网址: http://www.runoob.com/w3cnote/flex-grammar.html
目的:之前学习的盒模型布局(display) float布局 position都不能很好的解决block垂直居中的问题,flex布局擅长
1,将父级display属性设置为flex,则父级成为container,子级成为item(默认子级在父级中沿主轴排列)
2,container设置item的排列方向flex-direction
3,iterm对于container的空间占比flex-grow
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>flex布局</title> <style> .container { width: 600px; height: 600px; border: 1px solid black; margin: 0 auto; } .item { /*width: 200px;*/ /*height: 200px;*/ border-radius: 50%; background-color: orange; font-size: 80px; } /*容器:规定容器为flex,则容器内的标签会成为该容器的项目(item)*/ .container { /*在父级中设置子级的显示方式:colum每个区域在自己的显示区域横竖颠倒,colum-reverse每个区域横竖颠倒之后上下换位置(row默认值什么什么卵用)*/ flex-direction: row; display: flex; } .item { /*默认只能一行排列,所有item总宽不允许超出container宽度*/ /*width: 300px;*/ /*默认情况下item可以不规定高度,高度会自适应父级*/ /*item没有设置宽度下,可以通过flex-grow决定对于父级的占比*/ } .it1, .it3 { flex-grow: 1; } .it2 { flex-grow: 3; background-color: pink } </style> </head> <body> <div class="container"> <div class="item it1">1</div> <div class="item it2">2</div> <div class="item it3">3</div> </div> </body> </html>
五,动画
1,animation-name:表示动画名(名字随意) 2,animation-duration:表示动画的持续时间 3,animation-delay:表示动画延迟时间 4,animation-timing-function:表示动画的运动曲线 -- linear：匀速 -- ease：慢快慢 -- ease-in-out：慢快慢 -- easa-in：慢快 -- ease-out：快慢 -- cubic-bezier()：贝赛尔曲线函数 5,animation-paly-state:表示动画状态 可以用于悬浮播放,离开暂停 -- running：运行 -- paused：暂停 6,animation-fill-mode:表示动画结束后的停留位置 -- forwards:终点 -- backwards:起点 7,animation-iteration-count:表示动画播放的次数 -- <count>：固定次数 -- infinite：无限次 8,animation-direction:表示运动方向 -- normal：原起点为第一次运动的起点，且永远从起点向终点运动 -- alternate：原起点为第一次运动的起点，且来回运动 -- alternate-reverse：原终点变为第一次运动的起点，且来回运动<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> 动画</title> <style> .box { width: 200px; height: 200px; background-color: red; } .box { /*绑定动画名*/ animation-name:xuan; /*持续时间*/ animation-duration:5s; /*延迟时间*/ /*animation-delay: .1s;*/ /*动画结束停留位置:backwards起点 forwards终点*/ /*animation-fill-mode: forwards;*/ /*运动次数 infinite无数次*/ animation-iteration-count: infinite; /*多次运动方向的规则*/ /*alternate:来回*/ /*alternate-reverse:终点开始来回*/ animation-direction: alternate-reverse; /*动画状态 running*/ /*animation-play-state: paused;*/ /*整体设置*/ /*animation: wasai 1s 2 linear alternate;*/ } .box:hover { animation-play-state: running; } @keyframes xuan { /*0%到100%表示显示的起始位置形态设置*/ 0% { height: 400px; } 100% { width: 400px; } } </style> </head> <body> <div class="box"></div> </body> </html>