HTML下部分布局
一、z-index布局
简述：z-index布局可以通过设一个0及以上的值来表示优先级，优先级高的显示出来且一般是用来在多个布局的内容想让自己想要显示出来的内容显示出来就可以将其的优先级设置为最高。
辅助了解：可以将其认为是平面上的z轴（z轴上的值越大就越先显示）来辅助理解。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>z-index</title> <style type="text/css"> .box { /*辅助子级进行绝对定位*/ position: relative; width: 400px; height: 400px; background-color: red; margin: 0 auto; } .d1, .d2, .d3 { width: 200px; height: 200px; position: absolute; } .d1 { background-color: orange; } .d2 { background-color: blue; top: calc(50% - 100px); left: 100px; } .d3 { background-color: black; right: 0; bottom: 0; } /*脱离文档流的标签,具有z-index属性,可以用来控制显示层次的优先级,值为任意正整数*/ .d2 { z-index: 88888 } .d3 { z-index: 666 } </style> </head> <body> <!-- 需求1:d1,d2,d3均为box的一半大小 --> <!-- 需求2:d1左上角,d2居中,d3右下角 --> <!-- 需求3:d2区域在最上方(会覆盖d1,d3的重叠部分) --> <div class="box"> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> </div> </body> </html>
二、flex布局
简述：flex是flexible box的缩写其意为“弹性布局”，是用来为盒模型提供醉倒的灵活性并且其布局后子元素的float，clear，vertical-align属性将失效。
1、flex的概念如下：
-采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
- 水平为轴（main axis），主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end。
- 垂直为交叉轴（cross axis），交叉轴的开始位置叫做cross start，结束位置叫做cross end。
- 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
2、flex容器属性
```css
① flex-direction 属性 决定主轴的方向（即项目的排列方向）
flex-direction: row | row-reverse | column | column-reverse;
-- row（默认值）：主轴为水平方向，起点在左端。
-- row-reverse：主轴为水平方向，起点在右端。
-- column：主轴为垂直方向，起点在上沿。
-- column-reverse：主轴为垂直方向，起点在下沿。
② flex-wrap 属性 定义，如果一条轴线排不下，如何换行。
flex-wrap: nowrap | wrap | wrap-reverse;
-- nowrap（默认）：不换行。
-- wrap：换行，第一行在上方。
-- wrap-reverse：换行，第一行在下方。
③ flex-flow 属性 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow: <flex-direction> <flex-wrap>;
④ justify-content 属性 定义了项目在主轴上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around;
⑤ align-items 属性 定义项目在交叉轴上如何对齐。
align-items: flex-start | flex-end | center | baseline | stretch;
⑥ align-content 属性 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
3、flex项目属性
```css
① order 属性 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
order: <integer>;
② flex-grow 属性 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-grow: <number>; /* default 0 */
③ flex-shrink 属性 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-shrink: <number>; /* default 1 */
④ flex-basis 属性 定义了在分配多余空间之前，项目占据的主轴空间（main size）。
flex-basis: <length> | auto; /* default auto */
⑤ flex 属性 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
flex: <flex-grow> <flex-shrink> <flex-basis>
⑥ align-self 属性 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>flex布局</title> <style type="text/css"> .container { width: 600px; height: 600px; border: 1px solid black; margin: 0 auto; } .item { /* 200px;*/ /*height: 200px;*/ /*border-radius: 50%;*/ background-color: orange; font-size: 80px; } /*容器:规定容器为flex,则容器内的标签会成为该容器的项目(item)*/ .container { display: flex; } .item { /*默认只能一行排列,所有item总宽不允许超出container宽度*/ /* 300px;*/ /*默认情况下item可以不规定高度,高度会自适应父级*/ /*item没有设置宽度下,可以通过flex-grow决定对于父级的占比*/ } /*.it1, .it3 { flex-grow: 1; } .it2 { flex-grow: 3; background-color: pink }*/ /*container属性*/ .container { /*flex-direction: row | row-reverse | column | column-reverse; 方向*/ /*flex-direction: column-reverse;*/ /*flex-wrap: nowrap | wrap | wrap-reverse;换行方式*/ /*flex-wrap: wrap;*/ /*justify-content: flex-start | flex-end | center | space-between | space-around;水平对齐方式*/ /*item为沾满父级区域*/ justify-content: space-around; } /*item属性*/ .item { /* 300px; height: 200px;*/ } .item { width: 100px; } </style> <!-- 总结 --> <!-- 1.将父级display属性设置为flex,则父级成为container,子级成为item --> <!-- 2.container设置item的排列方向flex-direction --> <!-- 3.item对于container的空间占比flex-grow --> </head> <body> <!-- 学习目的: --> <!-- 之前学习的盒模型布局(display) float布局 position都不能很好的解决block垂直居中的问题,flex布局擅长 --> <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、小于<integer（在自定义的页面中设置的位置数）>宽度
@media only screen and (max- <integer>) {
selector {
填写一些与css相同的样式块
}
}
2、大于<integer>宽度小于<integer>宽度
@media only screen and (min- <integer>) and (max- <integer>) {
selector {
}
}
3、大于<integer>宽度
@media only screen and (min- <integer>) {
selector {
}
}
注意：在响应式布局内，css语法同正常样式表语法且响应式布局之间存在不同屏幕尺寸的限制，使用样式相互不影响（当满足屏幕尺寸时该样式块会起作用，但超过屏幕尺寸时将失效）并当响应式布局中样式块起作用时会与正常样式块设置协同布局，遵循选择器的优先级规则。
原则：1、采用响应式布局的页面，基本样式块只做共性样式设置需要根据页面进行适应变化的样式均有响应式布局处理。
2、要进行响应式布局的页面的=要处理所有屏幕尺寸下的样式块。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>响应式布局</title> <style type="text/css"> /*基本样式块*/ /*.box { max- 1200px; 95%; margin: 0 auto; background-color: red!important; } .it { 300px; height: 300px; font: 900 50px/300px 'STSong'; text-align: center; float: left; border-radius: 50%; background-color: orange; } .box:after { content: ""; display: block; clear: both; }*/ html, body { margin: 0; } .it { height: 300px; background-color: orange; font: 900 50px/300px 'STSong'; text-align: center; border-radius: 50%; float: left; } .box:after { content: ""; display: block; clear: both; } /*屏幕宽度超出1200px*/ @media only screen and (min- 1200px) { .box { background-color: pink; } .it { width: 25%; } } /*屏幕宽度间于600至1200px*/ @media only screen and (min- 600px) and (max- 1200px) { .box { background-color: brown; } .it { width: 30%; margin: 0 calc(10% / 6); } } /*屏幕宽度小于600px*/ @media only screen and (max- 600px) { .box { background-color: cyan; } .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、过渡效果通过hover产生，可以制作一个hover层，2、hover层处理方式：与显示层的位置同等区域大小，3、同样可以将显示层的位置教育hover层处理。
二、过渡属性
```css
① transition-property 属性 表示可过渡的样式属性
transition-property: all | [css1 [...]];
② transition-duration 属性 表示过渡持续时间
transition-duration: <time>;
③ transition-delay 属性 表示过渡延迟时间
transition-delay: <time>;
④ transition-timing-function 属性 表示过渡运动曲线
transition-timing-function: linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier();
-- linear：匀速
-- ease：慢快慢
-- ease-in-out：慢快慢
-- easa-in：慢快
-- ease-out：快慢
-- cubic-bezier()：贝赛尔曲线函数
⑤ transition 属性 表示前四个属性整体赋值
transition: <transition-property> <transition-duration> <transition-delay> <transition-timing-function>;
```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>过度</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: orange; /*过度*/ /*持续时间*/ /*来去均具有过度效果*/ transition-duration: .5s; /*延迟时间*/ /*transition-delay: 1s;*/ /*过度属性: all*/ /*transition-property: width, height;*/ /*过度曲线*/ /*transition-timing-function: linear;*/ /*整体设置*/ /*transition: all .3s .1s linear;*/ transition: .3s cubic-bezier(0,.99,0,.99); } .hover { width: 200px; height: 200px; margin: 0 auto; } /*可以制造第二状态的处理方式*/ .hover:hover .box { width: 400px; height: 190px; background-color: red; /*去向第二状态才有过度效果*/ /*transition-duration: .1s;*/ } .box:active { } </style> </head> <body> <div class="hover"> <div class="box"></div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>过度案例</title> <style type="text/css"> .box { width: 300px; height: 300px; margin: 0 auto; border-bottom: 1px solid black; position: relative; } .line { width: 30px; height: 30px; background-color: orange; position: absolute; bottom: 5px; /*top: 270px;*/ left: 120px; transition: .4s; } .line:hover { height: 200px; } .b { width: 30px; height: 10px; border-radius: 50%; background-color: #333; position: absolute; bottom: -5px } .t { width: 30px; height: 10px; border-radius: 50%; background-color: #333; position: absolute; top: -5px } </style> </head> <body> <div class="box"> <div class="line"> <div class="t"></div> <div class="b"></div> </div> </div> </body> </html>
动画
简述：动画其意义与过渡基本一样，但是动画是由动画属性与动画体组成。
一、动画的基本属性
1、动画属性
```css
① animation-name 属性 表示动画名(名字任意起)
animation-name: <name>;
② animation-duration 属性 表示动画持续时间
animation-duration: <time>;
③ animation-delay 属性 表示动画延迟时间
animation-delay: <time>;
④ animation-timing-function 属性 表示动画运动曲线
animation-timing-function: linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier();
-- linear：匀速
-- ease：慢快慢
-- ease-in-out：慢快慢
-- easa-in：慢快
-- ease-out：快慢
-- cubic-bezier()：贝赛尔曲线函数
⑤ animation-play-state 属性 表示动画状态
animation-play-state: running | paused
-- running：运行
-- paused：暂停
⑥ animation-fill-mode 属性 表示动画结束后的停留位置
animation-fill-mode: forwards | backwards
-- forwards:终点
-- backwards:起点
⑦ animation-iteration-count 属性 表示动画次数
animation-iteration-count: <count> | infinite
-- <count>：固定次数
-- infinite：无限次
⑧ animation-direction 属性 表示运动方向
animation-direction: normal | alternate | alternate-reverse;
-- normal：原起点为第一次运动的起点，且永远从起点向终点运动
-- alternate：原起点为第一次运动的起点，且来回运动
-- alternate-reverse：原终点变为第一次运动的起点，且来回运动
```
2、动画体
```css
@keyframes <name>{
/*from未写任何属性设置时，默认全部取初始值（初始状态）*/
from{}
to{}
}
@keyframes <name>{
0% {}
...
100% {}
}
```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动画</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: orange; } /*动画样式*/ .box { /*绑定动画名*/ animation-name: wasai; /*持续时间*/ animation-duration: 1s; /*延迟时间*/ /*animation-delay: .1s;*/ /*动画结束停留位置:backwards起点 forwards终点*/ /*animation-fill-mode: forwards;*/ /*运动次数 infinite无数次*/ animation-iteration-count: 4; /*多次运动方向的规则*/ /*alternate:来回*/ /*alternate-reverse:终点开始来回*/ /*animation-direction: alternate-reverse;*/quotes: ; /*动画状态 running*/ /*animation-play-state: paused;*/ /*整体设置*/ animation: wasai 1s 2 linear alternate; } .box:hover { animation-play-state: running; } /*动画体*/ @keyframes wasai{ 0% { } 100% { width: 400px; } } @keyframes wasai1{ 0% {} 100% {} } @keyframes wasai2{ 0% {} 100% {} } </style> </head> <body> <div class="box"></div> </body> </html>
补充：动画属性设置个指定选择器标签，动画体在样式中单独设置。