目录
层级选择器
a>b表示a下一层级的b;
a+b表示a兄弟层级下一个的b;
a~b表示a兄弟层级之后所有的b;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box>li{
border: 1px solid red;
}
.child+li{
background: yellow;
}
.container+p{
background: red;
}
.container~p{
border: 1px solid blue;
}
</style>
</head>
<body>
<ul class="box">
<li>
1111
<ul>
<li>1111-1</li>
<li>2222-2</li>
<li>3333-3</li>
</ul>
</li>
<li class="child">2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
<div class="container">1111111111</div>
<p>1111</p>
<p>2222</p>
<div>
<p>333333333</p>
</div>
</body>
</html>
属性选择器
[class]表示所有有class的元素；
div[class]表示所有有class的div；
div[class=box1]表示所有class='box1'的div（只能等于不能包含）；
div[class~=box1]表示所有class包含box1的div；
input[name]表示有name的input；
input[type=email]表示type="email"的input；
div[class^="b"]表示class开头是b的div；
div[class$="b"]表示class结尾是b的div；
div[class*="b"]表示class里包含b这个字符的div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
[class]{
background: yellow;
}
div[class]{
background: yellow;
}
p[class]{
background: red;
}
div[class=box1]{
border: 1px solid blue;
}
div[class~=box1]{
border: 1;
}
input[name]{
background: yellow;
}
input[type=email]{
background: red;
}
div[class^="b"]{
color: green;
}
div[class$="3"]{
color: green;
}
div[class*="1"],p[class*="1"]{
color: green;
}
</style>
</head>
<body>
<div class="box1">div-11111</div>
<div class="box2">div-22222</div>
<div>div-33333</div>
<div class="box1">div-44444</div>
<div class="box1 box3">div-55555555555</div>
<p class="p1">p-11111</p>
<p class="p2">p-22222</p>
<p>p-33333</p>
<div>
用户名：<input type="text" name="username"><br>
密码：<input type="password" name="password"><br>
年龄：<input type="number" name="age"><br>
邮箱：<input type="email"><br>
</div>
</body>
</html>
结构伪类选择器
X:first-child 匹配子集第一个元素
X:last-child 匹配父元素最后一个X元素
X:nth-child(n) 匹配索引值为n的子元素，索引值从1开始，奇数个2n+1/2n-1/odd，偶数个2n/even
X:only-child 匹配X下仅有的一个子元素，若有多个不匹配
X:root 匹配文档根元素，HTML中根元素永远是HTML
X:empty 匹配没有任何子元素（包括包含文本）的元素X，有空格换行不行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 940px;
height: 100px;
background: yellow;
margin: 0 auto;
}
.box div{
width: 300px;
height: 100px;
background: red;
margin-right: 20px;
float: left;
}
.box div:last-child{
margin-right: 0;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:nth-child(2){
background: blue;
}
li:nth-child(odd){
background: yellow;
}
</style>
</head>
<body>
<ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<li>55555</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border: 1px solid black;
width: 200px;
height: 100px;
}
div p:only-child{
background: red;
}
:root,body{
height: 100%;
background: green;
}
div:empty{
background: blue;
}
</style>
</head>
<body>
<div>
<p>1111</p>
<p>2222</p>
</div>
<div>
<p>11111</p>
</div>
<div></div>
<div>
</div>
</body>
</html>
目标伪类选择器
E:target 选择匹配E的所有元素，且匹配元素被相关URL指向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div .content{
display: none;
}
div .content:target{
display: block;
}
</style>
</head>
<body>
<div>
<a href="#a">aaa</a>
<div id="a" class="content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste et culpa aperiam quia rem numquam reprehenderit cumque tenetur ab quasi sequi ex minus iure, facere accusantium recusandae? Ipsa, nemo ipsam.
</div>
</div>
<div>
<a href="#b">bbb</a>
<div id="b" class="content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste et culpa aperiam quia rem numquam reprehenderit cumque tenetur ab quasi sequi ex minus iure, facere accusantium recusandae? Ipsa, nemo ipsam.
</div>
</div>
<div>
<a href="#c">ccc</a>
<div id="c" class="content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste et culpa aperiam quia rem numquam reprehenderit cumque tenetur ab quasi sequi ex minus iure, facere accusantium recusandae? Ipsa, nemo ipsam.
</div>
</div>
</body>
</html> 
UI状态伪类选择器
E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked 匹配所有用户界面（form表单）中处于选中状态的E元素
E:selection 匹配E元素中被用户选中或处于高亮状态的部分
E:focus 匹配被聚焦到的E元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input:enabled{
background: red;
}
input:disabled{
background: yellow;
}
input:focus{
background: blue;
}
input[type=checkbox]{
appearance: none;
width: 20px;
height: 20px;
border: 1px solid black;
}
input:checked{
background: green;
}
</style>
</head>
<body>
<form action="">
用户名<input type="text"><br>
密码<input type="password"><br>
记住用户名<input type="checkbox"><br>
<input type="submit" disabled>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div::selection{
background: yellow;
color: red;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus eum est labore adipisci, maxime tenetur magnam nobis quis accusamus magni numquam totam, reprehenderit consequatur doloremque aliquam? Itaque quas accusamus suscipit.
</div>
</body>
</html> 
否定和动态伪类选择器
否定
E:not(s) (IE 6-8不支持not()) 匹配所有不匹配简单选择符s的元素E
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:not(:nth-child(2n+1)){
background: yellow;
}
div{
width: 100px;
height: 100px;
}
div:not(:empty){
background: red;
}
</style>
</head>
<body>
<ul>
<li>111</li>
<li>2222</li>
<li>333</li>
<li>4444</li>
</ul>
<div>111</div>
<div></div>
</body>
</html>
动态
E:link
E:visited
E:active
E:hover
类似于之前链接上的四种状态
文本阴影
text-shadow: 10px 10px 1px red;
第一个10px表示水平向右阴影位移
第二个10px表示垂直向下阴影位移
第三个1px表示模糊程度，越大越模糊
最后用来设置阴影颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
text-shadow: -10px 0px 1px red,0px 10px 1px blue;
}
</style>
</head>
<body>
<div>hello world</div>
</body>
</html>
盒子阴影
box-shadow
属性值：
h-shadow 必需的，水平阴影位置，允许负值
v-shadow 必需的，垂直阴影位置，允许负值
blur 可选，模糊距离
spread 可选，阴影大小
color 可选，阴影颜色
inset 可选，从外层的阴影（开始时）改变阴影内侧阴影
Eg:box-shadow:10px 10px 5px #888888
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background: yellow;
margin: 0 auto;
}
.a{
box-shadow: 10px -10px 10px 5px red inset;
}
.b{
box-shadow: -10px 10px 10px red,0 -10px 10px blue;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html> 
圆角边框
border-radius:
属性值可以为Xpx，也可以为X%
v1 四个角一样
v1,v2 左上右下，左下右上，一致
v1,v2,v3 左上，左下右上，右下，一致
v1,v2,v3,v4 顺时针方向
border-top-left:左上角（垂直方向在前，水平方向在后）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
float: left;
}
.a{
border-radius: 10px;
}
.b{
border-radius: 10px 20px;
}
.c{
border-radius: 10px 20px 30px;
}
.d{
border-radius: 10px 20px 30px 40px;
}
.e{
border-top-left-radius: 10%;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
</body>
</html> 
border-radius:30px/60px;
水平30px和垂直60px连起来，只支持border-radius
支持 border-radius: 10px 20px 30px 40px/20px 30px 40px 50px;
变成圆：border-radius:大于等于盒子宽高/2，如果有padding、border，也许加起来除以2，必须宽高一样否则会成为椭圆
或者直接让值大于等于50%，必须宽高一样否则会成为椭圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
float: left;
}
.a{
border-radius: 30px/60px;
}
.b{
border-radius: 10px 20px 30px 40px/20px 30px 40px 50px;
}
.c{
border-radius: 100px;
}
</style>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
</html> 
字体引入
@font-face{
font-family:<YoutWebFontName>;
src:<source>;
[font-weight:<weight>];
[font-style:<style>];
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: ffzh;
src: url(font/ygyxsziti2.0.ttf);
}
div{
font-family: ffzh;
font-size: 50px;
color: red;
text-shadow: 5px 0 0 green;
}
</style>
</head>
<body>
<div>赵钱孙李</div>
</body>
</html> 
怪异盒模型
box-sizing
允许以特定的方式定义匹配某个区域的特定元素
属性值：content-box,普通盒模型，就是内容+padding+border+margin，宽高整体增加
属性值：border-box ，宽高包括内容+padding+border+margin，为了保持宽高不变，会挤压内容大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background: green;
padding: 30px;
border: 10px solid black;
box-sizing: content-box;
/*表示标准盒模型，加不加一样*/
}
.box2{
width: 200px;
height: 200px;
background: red;
margin-top: 100px;
padding: 30px;
border: 10px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 900px;
height: 300px;
background: yellow;
margin: 0 auto;
}
.box div{
width: 300px;
height: 300px;
float: left;
text-align: center;
padding: 10px;
border: 10px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, doloribus laborum? Doloremque molestias vel vitae beatae minima iusto tempora ad voluptate odit! A dolor vitae maiores consequatur. Quas, dolor ratione?
</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque explicabo fugiat dolores, sint quo quidem eum reprehenderit praesentium voluptatibus necessitatibus facere tempora omnis unde fuga incidunt, ad repellat corporis. Consequatur?</div>
<div>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi repellat iure voluptate repellendus corporis vero, veniam fugit officiis blanditiis illo doloremque itaque cumque vel laboriosam! Commodi unde doloribus omnis optio!
</div>
</div>
</body>
</html>
可以避免原来会因为加上padding、border导致空间不够盒子掉下来的问题。
弹性盒
display:flex;
1.让子元素默认横向排列；
2.行内元素变成了块级元素；
3.只有一个元素时margin:auto;可以自动让元素水平垂直居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 500px;
height: 500px;
border: 2px solid black;
margin: 100px auto;
display: flex;
}
.box span{
width: 50px;
height: 50px;
border:1px dashed red;
}
.box span[id=a]{
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<span>1111</span>
<span>2222</span>
<span>3333</span>
<span>4444</span>
</div>
<div class="box">
<span id="a">1111</span>
</div>
</body>
</html> 
修改主轴方向
默认主轴水平，侧轴垂直。flex-direction:row;
若flex-direction:column;则主轴为竖直方向。
row-reverse:主轴为水平方向从右向左
column-reverse:主轴为竖直方向从下向上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
border: 2px solid black;
margin: 100px auto;
display: flex;
flex-direction: column;
}
.box span{
width: 50px;
height: 50px;
border:1px dashed red;
}
</style>
</head>
<body>
<div class="box">
<span>1111</span>
<span>2222</span>
<span>3333</span>
<span>4444</span>
</div>
</body>
</html> 
主轴侧轴对齐方向
主轴对齐：
justify-content:
默认属性值：flex-start;
当主轴为水平从左向右时：
flex-end 位置紧挨着右边排列
center 位置居中排列
space-between 两端对齐
space-around 距离环绕方式
侧轴对齐：
align-items:
默认属性值：flex-start;
当侧轴为竖直从上向下时：
flex-end 位置紧挨着下边排列
center 位置垂直居中排列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
border: 2px solid black;
margin: 100px auto;
display: flex;
justify-content: space-around;
align-items: center;
}
.box span{
width: 50px;
height: 50px;
border:1px dashed red;
}
</style>
</head>
<body>
<div class="box">
<span>1111</span>
<span>2222</span>
<span>3333</span>
<span>4444</span>
</div>
</body>
</html> 
折行与行间距
在弹性盒里，如果一行东西太多，会自动压缩大小来让一行显示
可通过flex-wrap: wrap;使其换行，换行后会等间距显示
align-content调整折行后的行间距
flex-start; 位置紧挨着前边排列
flex-end 位置紧挨着后边排列
center 位置居中排列
space-between 两端对齐
space-around 距离环绕方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 500px;
height: 500px;
border: 2px solid black;
margin: 100px auto;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.box div{
width: 100px;
height: 100px;
border:1px dashed red;
}
</style>
</head>
<body>
<div class="box">
<div>1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
<div>5555</div>
<div>6666</div>
</div>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 120px;
border: 1px solid black;
margin: 10px auto;
display: flex;
flex-wrap: wrap;
}
.box div{
width: 60px;
height: 60px;
border: 1px dashed red;
box-sizing: border-box;
display: flex;
}
.box div img{
width: 40px;
height: 40px;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div>
<img src="th.jpg" alt="">
</div>
<div><img src="th.jpg" alt=""></div>
<div><img src="th.jpg" alt=""></div>
<div><img src="th.jpg" alt=""></div>
<div><img src="th.jpg" alt=""></div>
<div><img src="th.jpg" alt=""></div>
<div><img src="th.jpg" alt=""></div>
<div><img src="th.jpg" alt=""></div>
<div><img src="th.jpg" alt=""></div>
<div><img src="th.jpg" alt=""></div>
</div>
</div>
</body>
</html> 
项目对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 500px;
height: 500px;
border: 2px solid black;
margin: 100px auto;
display: flex;
}
.box div{
width: 100px;
border:1px dashed red;
box-sizing: border-box;
}
.div1{
height: 100px;
align-self: flex-start;
}
.div2{
height: 100px;
align-self: flex-end;
}
.div3{
height: 100px;
align-self: center;
}
.div4{
height: 100px;
align-self: baseline;
}
.div5{
align-self: stretch;
}
</style>
</head>
<body>
<div class="box">
<div class="div1">1111</div>
<div class="div2">2222</div>
<div class="div3">3333</div>
<div class="div4">4444</div>
<div class="div5">5555</div>
</div>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 500px;
height: 500px;
border: 2px solid black;
margin: 100px auto;
display: flex;
flex-direction: column;
}
.box div{
height: 100px;
border:1px dashed red;
box-sizing: border-box;
}
.div1{
width: 100px;
align-self: flex-start;
}
.div2{
width: 100px;
align-self: flex-end;
}
.div3{
width: 100px;
align-self: center;
}
.div4{
width: 100px;
align-self: baseline;
}
.div5{
align-self: stretch;
}
</style>
</head>
<body>
<div class="box">
<div class="div1">1111</div>
<div class="div2">2222</div>
<div class="div3">3333</div>
<div class="div4">4444</div>
<div class="div5">5555</div>
</div>
</body>
</html> 
项目调整顺序
order默认值为0
值越大越靠后
若设置了row-reverse，值越小越靠后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 500px;
height: 500px;
border: 2px solid black;
margin: 100px auto;
display: flex;
flex-direction: row-reverse;
}
.box div{
width: 100px;
height: 100px;
border:1px dashed red;
}
.div1{
order: 1;
}
.div2{
order: 1;
}
.div3{
order: 0;
}
.div4{
order: 1;
}
.div5{
order: -1;
}
</style>
</head>
<body>
<div class="box">
<div class="div1">1111</div>
<div class="div2">2222</div>
<div class="div3">3333</div>
<div class="div4">4444</div>
<div class="div5">5555</div>
</div>
</body>
</html>项目剩余宽高
flex:1则占满剩余空间
若几个都是 flex:1则平分空间
若2个flex:1,1个flex:10，则前两个分别占占1/12空间，最后一个占10/12空间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 500px;
height: 500px;
border: 2px solid black;
margin: 0 auto;
display: flex;
}
.box div{
width: 100px;
height: 100px;
border:1px dashed red;
}
.div1,.div3{
flex: 1;
}
.div2{
flex:10;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
body{
display: flex;
flex-direction: column;
}
.box1,.box3{
height: 100px;
background: gray;
}
.box2{
flex: 1;
background: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html> 
移动端布局
模拟器上显示分辨率
CSS像素：设备的独立像素
物理分辨率：设备像素
设备像素比（dbr）=物理像素/CSS像素
设计稿按照物理像素来
不同机型1份设计稿：
1.尽量使用百分比布局
2.使用弹性盒布局
3.rem布局
<meta name="viewport" content="width=device-width, initial-scale=1.0">
设置屏幕宽度为设备宽度，初始缩放为“1.0”，web页面在展现的时候就会以target density分辨率的1:1来展现。若加上user-scalable=no，则不允许手指缩放。
横向滚动
flex-shrink
默认为1，允许挤压
0，不允许挤压
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="1/font/iconfont.css">
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
ul{
list-style: none;
}
body{
display: flex;
flex-direction: column;
}
header{
height: 45px;
line-height: 45px;
background: gray;
}
header ul{
display: flex;
overflow: auto;
color: white;
}
header ul li{
flex-shrink: 0;
line-height: 45px;
padding: 0 10px;
}
</style>
</head>
<body>
<header>
<ul>
<li>热门推荐</li>
<li>热门推荐</li>
<li>热门推荐</li>
<li>热门推荐</li>
<li>热门推荐</li>
<li>热门推荐</li>
<li>热门推荐</li>
<li>热门推荐</li>
<li>热门推荐</li>
<li>热门推荐</li>
<li>热门推荐</li>
<li>热门推荐</li>
<li>热门推荐</li>
<li>热门推荐</li>
<li>热门推荐</li>
<li>热门推荐</li>
<li>热门推荐</li>
</ul>
</header>
<section>
</section>
<footer></footer>
</body>
</html> 
多列布局
column-count:规定元素被分隔的列数，适用于除table外的非替换块级元素、table cells、inline-block元素
column-gap：规定不同列间隔大小
column-rule：设置或检索列与列之间边框，符合属性
column-rule-color、column-rule-width、column-rule-style
column-fill：设置或检索对象所有列高度是否统一
auto：列高度自适应内容，把父盒子占满
balance:所有列的高度以其中最高的一列对齐
column-span:设置或检索对象元素是否横跨所有列
none:不跨列
all:横跨所有列
column-width:置或检索对象元素每列宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
height: 300px;
background: yellow;
}
.a{
column-count: 5;
column-gap: 30px;
column-rule: 2px solid red;
column-fill: balance;
}
.b{
column-count: 5;
column-gap: 30px;
column-rule: 2px solid red;
column-width: 500px;
}
.c{
column-count: 5;
column-gap: 30px;
column-rule: 2px solid red;
text-align: center;
}
.c>h1{
column-span:all;
}
</style>
</head>
<body>
<div class="a">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi laborum odit hic corrupti, voluptatibus accusamus. Ea nobis id itaque nulla, quos maxime eum autem perferendis sed fugit provident maiores labore!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus tenetur molestiae exercitationem non impedit accusamus soluta, mollitia debitis quasi nam assumenda doloribus error voluptas perferendis neque quae quaerat, perspiciatis esse!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime laborum, aperiam, eveniet suscipit reiciendis ea fugiat molestias accusamus dignissimos distinctio, porro ipsa quos sit at inventore delectus! Molestias, ea ullam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi beatae dolore praesentium laudantium minima itaque assumenda accusamus commodi eligendi quaerat? Nobis temporibus dolor autem, fugit voluptatum possimus. Assumenda, suscipit laboriosam.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum doloremque suscipit odit aperiam, eius voluptatum eos at fugit iure laborum ad iusto harum, voluptas facilis veniam ratione repellat. Aspernatur, itaque!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto animi, ducimus dicta excepturi ullam nemo maxime? Dolorem obcaecati doloremque repellat rem veniam quam officiis? Unde minima ratione natus nisi voluptatum.
</div>
<div class="b">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi laborum odit hic corrupti, voluptatibus accusamus. Ea nobis id itaque nulla, quos maxime eum autem perferendis sed fugit provident maiores labore!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus tenetur molestiae exercitationem non impedit accusamus soluta, mollitia debitis quasi nam assumenda doloribus error voluptas perferendis neque quae quaerat, perspiciatis esse!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime laborum, aperiam, eveniet suscipit reiciendis ea fugiat molestias accusamus dignissimos distinctio, porro ipsa quos sit at inventore delectus! Molestias, ea ullam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi beatae dolore praesentium laudantium minima itaque assumenda accusamus commodi eligendi quaerat? Nobis temporibus dolor autem, fugit voluptatum possimus. Assumenda, suscipit laboriosam.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum doloremque suscipit odit aperiam, eius voluptatum eos at fugit iure laborum ad iusto harum, voluptas facilis veniam ratione repellat. Aspernatur, itaque!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto animi, ducimus dicta excepturi ullam nemo maxime? Dolorem obcaecati doloremque repellat rem veniam quam officiis? Unde minima ratione natus nisi voluptatum.
</div>
<div class="c">
<h1>ABCXS</h1>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi laborum odit hic corrupti, voluptatibus accusamus. Ea nobis id itaque nulla, quos maxime eum autem perferendis sed fugit provident maiores labore!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus tenetur molestiae exercitationem non impedit accusamus soluta, mollitia debitis quasi nam assumenda doloribus error voluptas perferendis neque quae quaerat, perspiciatis esse!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime laborum, aperiam, eveniet suscipit reiciendis ea fugiat molestias accusamus dignissimos distinctio, porro ipsa quos sit at inventore delectus! Molestias, ea ullam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi beatae dolore praesentium laudantium minima itaque assumenda accusamus commodi eligendi quaerat? Nobis temporibus dolor autem, fugit voluptatum possimus. Assumenda, suscipit laboriosam.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum doloremque suscipit odit aperiam, eius voluptatum eos at fugit iure laborum ad iusto harum, voluptas facilis veniam ratione repellat. Aspernatur, itaque!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto animi, ducimus dicta excepturi ullam nemo maxime? Dolorem obcaecati doloremque repellat rem veniam quam officiis? Unde minima ratione natus nisi voluptatum.
</div>
</body>
</html>
响应式布局
媒体查询
@media all and (min-width :320px){
body{background-color:blue;}
}
意思是对于所有媒体在其宽度大于等于320px时用上下边的样式
PC客户端或大屏幕设备：1028px至更大
@media only screen and (min-width :1028px){}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
@media screen and (min-width:1000px){
body{
background: yellow;
}
}
@media screen and (max-width:1000px) and (min-width:500px){
body{
background: red;
}
}
@media screen and (max-width:500px){
body{
background: green;
}
}
</style>
</head>
<body>
</body>
</html>
横竖屏检测
竖屏
@media screen and (orientation:portrait) and (max-width :720px){}
横屏
@media screen and (orientation:landscape){}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
display: flex;
flex-wrap: wrap;
}
div{
height: 100px;
background: yellow;
border: 2px solid red;
box-sizing: border-box;
}
@media screen and (orientation:portrait) {
div{
width: 33.33%;
}
}
@media screen and (orientation:landscape){
div{
width: 20%;
}
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
em与rem
em:相对单位，相对于父元素的字体大小
rem:相对单位，相对于根元素 （html）字体大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
font-size: 32px;
}
.div1,.div2,.div3{
border: 1px solid red;
font-size: 16px;
}
.div1 p{
font-size: 32px;
}
.div2 p{
font-size: 2em;
}
.div2 p span{
font-size: 2em;
}
.div3 p{
font-size: 1rem;
}
</style>
</head>
<body>
<div class="div1">
<p>赵钱孙李</p>
</div>
<div class="div2">
<p>赵钱孙<span>李</span></p>
</div>
<div class="div3">
<p>赵钱孙李</p>
</div>
</body>
</html>
rem布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html{
font-size: 100px;
}
body{
font-size: 16px;
}
.box{
width: 7.5rem;
height: 100px;
background: yellow;
}
</style>
<script>
//fontsize 计算
document.documentElement.style.fontSize=document.documentElement.clientWidth/750 * 100 +'px'
// fontsize = 当前设备的css布局宽度/物理分辨率(设计稿的宽度)* 基准font-size
</script>
</head>
<body>
<div class="box">111</div>
</body>
</html> 
vm和vh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100vw;
height: 100vw;
background: yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
单位转换
100vw=屏幕宽
100vh=屏幕高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html{
font-size: 26.67vw;
}
div{
width: 3.75rem;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html> 
没有滚动条的时候可以说100vw等价于100%
有滚动条的时候，100vw包含滚动条宽度，100%不包含滚动条宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 100vw;
height: 1000px;
background: yellow;
}
.box2{
width: 100%;
height: 1000px;
background: red;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html> 
宽度为1039.2px
宽度为1022.4px
渐变
实现2个或多个颜色平稳过渡
线性渐变
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
支持多颜色渐变
从上向下
background-image: linear-gradient(to bottom, red , yellow);
从左向右
background-image: linear-gradient(to right, red , yellow);
从右向左
background-image: linear-gradient(to left, red , yellow);
从下向上
background-image: linear-gradient(to top, red , yellow);
0deg:从下向上/90deg:从左向右/180deg:从上向下/270deg:从右向左
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
border: 10px solid gray;
}
.a{
background: linear-gradient(to top right,red,yellow,green);
}
.b{
background: linear-gradient(135deg,red,green);
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
径向渐变
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
支持多颜色渐变
center为渐变起点的位置，可以为百分比，默认图形正中心
shape为渐变形状，可以是 circle 或 ellipse，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse
size 参数定义了渐变的大小。可以是：closest-side、farthest-side、closest-corner、farthest-corner
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
border: 5px solid gray;
background: radial-gradient(red 0%,green 10%,blue 30%);
/* border-radius: 50%; */
}
.box2{
width: 200px;
height: 200px;
border: 5px solid gray;
margin-top: 10px;
background: radial-gradient(red 50%,green 50%);
}
.box3{
width: 300px;
height: 100px;
border: 5px solid gray;
margin-top: 10px;
background: radial-gradient(circle,red,green,blue);
}
.box4{
width: 300px;
height: 100px;
border: 5px solid gray;
margin-top: 10px;
background: -webkit-radial-gradient(60% 40%,closest-side,blue,green,yellow,black)
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
重复渐变
重复线性渐变：repeating-linear-gradient()
重复径向渐变：repeating-radial-gradient()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
border: 10px solid gray;
}
.a{
background: repeating-linear-gradient(red,yellow 10%,green 20%);
}
.b{
background: repeating-radial-gradient(red,yellow 10%,green 20%);
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html> 
过渡
transition包括transition-property、transition-duration、transition-timing-function、transition-delay
属性值：all/具体属性值 运动时间/s/ms 动画类型 延迟时间s/ms
all能控制除了display:none/block的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: red;
/* transition: height 2s,width 2s,background 2s; */
transition: all 2s linear 2s;
}
div:hover{
width: 400px;
height: 600px;
background: yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>可在鼠标移入2s后，实现从宽200px高200px的红色盒子到宽400px到600px的黄色盒子的匀速过渡，过渡时间为2s
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: red;
/* transition: height 2s,width 2s,background 2s; */
transition: all 2s linear 2s;
}
div:hover{
width: 400px;
height: 600px;
background: yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>可通过这种方式进行从display:none到display:block效果的过渡。
动画过渡的类型
transition-timing-function：
linear匀速（默认）、ease逐渐慢下来、ease-in加速、ease-out减速、ease-in-out先加速后减速、cubic-bezier()贝塞尔曲线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
list-style: none;
}
li{
width: 200px;
height: 50px;
border: 1px solid gray;
}
ul:hover li:nth-child(1){
width: 600px;
transition-timing-function: all 2s linear;
}
ul:hover li:nth-child(2){
width: 600px;
transition-timing-function: all 2s ease;
}
ul:hover li:nth-child(3){
width: 600px;
transition-timing-function: all 2s ease-in;
}
ul:hover li:nth-child(4){
width: 600px;
transition-timing-function: all 2s ease-out;
}
ul:hover li:nth-child(5){
width: 600px;
transition-timing-function: all 2s ease-in-out;
}
ul:hover li:nth-child(6){
width: 600px;
transition-timing-function: all 2s cubic-bezier(0.23, 1, 0.320, 1);
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>动画过渡单一属性
可以通过transition-property、transition-duration、transition-timing-function、transition-delay对单一属性进行设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: yellow;
transition-property: height background;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 2s;
}
div:hover{
height: 600px;
background: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>可在鼠标移入2s后，实现从高200px的黄色盒子到600px的红色盒子的匀速过渡，过渡时间为2s。
2D
平移
transform:translate()
将元素向指定方向移动，类似position的relative。
水平移动：translate(tx,0)右移，translate(-tx,0)左移
垂直移动：translate(0,ty)下移，translate(0,-ty)上移
对角移动：translate(tx,ty)右下，translate(tx,-ty)右上，translate(-tx,ty)左下，translate(-tx,-ty)左上
transform:translateX()
水平移动，正值向右，负值向左
transform:translateY()
垂直移动，正值向下，负值向上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: red;
transition: all 2s;
margin: 10px auto;
}
div:hover{
transform: translate(-100px,100px);
/* transform: translateX(-100px) translateY(100px); */
}
</style>
</head>
<body>
<div></div>
</body>
</html>可实现在鼠标移入后红色盒子向坐下匀速移动，移出后盒子返回原位。
缩放
transform:scale()
让元素根据中心原点对对象进行缩放，默认值为1，0.01-0.99间任何值可使元素缩小，任何大于等于1.01的值，使元素放大
scale(1,1)不变，默认
scale(2,2)沿X轴、Y轴放大2倍
scaleX=scale(tx,1)沿X轴缩放
scaleY=scale(1,ty)沿Y轴缩放
若为负值则是倒像放大
transform-origin: ;改变中心位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
border: 5px solid green;
margin: 100px auto;
overflow: hidden;
}
img{
width: 100%;
transition: all 2s;
}
div:hover img{
transform: scale(1.5);
}
</style>
</head>
<body>
<div>
<img src="1.png" alt="">
</div>
</body>
</html>可以实现从中心位置沿X轴Y轴等比例放大1.5倍，overflow:hidden;使放大后图片也在边框里，边框外的部分被隐藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
border: 5px solid green;
margin: 100px auto;
overflow: hidden;
}
img{
width: 100%;
transition: all 2s;
transform-origin: left top;
}
div:hover img{
transform: scale(1.5);
}
</style>
</head>
<body>
<div>
<img src="1.png" alt="">
</div>
</body>
</html>在前面基础上改变中心位置，使其从左上角沿着X轴Y轴缩放。
旋转
transform:rotate()
通过指定角度参数对元素根据对象原点指定一个2D旋转，正值则相对原点中心顺时针旋转，负值则相对原点中心逆时针旋转
rotateX()围绕X轴以给定度数旋转
rotateY()围绕Y轴以给定度数旋转
transform-origin: ;改变中心位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background: lightblue;
}
div{
width: 200px;
height: 200px;
background: linear-gradient(white 50%,black 50%);
margin: 10px auto;
display: flex;
align-items: center;
border-radius: 50%;
transform: rotate(0deg);
transition: all 2s;
}
div:hover{
transform: rotate(360deg);
}
div::before{
content: "";
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
background: radial-gradient(white 25%,black 25%);
}
div::after{
content: "";
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
background: radial-gradient(black 25%,white 25%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>当鼠标移入，太极顺时针转动360度，移除则逆时针转动。
多属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 600px;
height: 600px;
border: 2px solid gray;
}
.box div{
width: 200px;
height: 200px;
background: red;
border: 1px solid black;
}
.box div:nth-child(1){
transform: translate(400px);
}
.box div:nth-child(2){
transform: translate(400px) scale(0.5);
}
.box div:nth-child(3){
transform: scale(0.5) translate(400px);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html> 
可见，缩放要放在平移后边，不然会影响效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 600px;
height: 600px;
border: 2px solid gray;
}
.box div{
width: 100px;
height: 100px;
background: red;
border: 1px solid black;
}
.box div:nth-child(1){
transform: translate(400px);
}
.box div:nth-child(2){
transform: translate(400px) rotate(45deg);
}
.box div:nth-child(3){
transform: rotate(45deg) translate(400px);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html> 
可见，若旋转放在平移前，也会影响效果，这是因为坐标轴旋转了四十五度，所以沿着坐标轴向右下方平移 。
倾斜
skew() 函数指定一个或两个参数，它们表示在每个方向上应用的倾斜量。
若一个值，则横坐标倾斜角度，俩值则横坐标和纵坐标倾斜角度。
skewX:横坐标倾斜角度
skewY:纵坐标倾斜角度
正值负值效果相反
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: red;
line-height: 200px;
text-align: center;
border: 1px solid black;
font-size: 50px;
margin: 200px auto;
transform: skew(30deg,30deg);
}
</style>
</head>
<body>
<div>freda</div>
</body>
</html> 
关键帧动画
animation：动画名称 动画持续时间 动画延迟时间 动画循环次数 动画在循环中是否反向运动
animation与transition：
相同：随着时间改变元素属性值
不同：transition需要触发一个事件（hover或click）；animation不需要触发任何事件也可以。css3的animation需要明确的动画属性值。
需要通过 @keyframes声明动画，from to声明从初始状态到终止状态，%则可以多过程状态。
动画循环次数可以为数字或infinite（代表无限次）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: red;
animation: bianb 10s linear 5s infinite;
}
/*声明动画*/
@keyframes biana {
from{
width: 200px;
height: 200px;
background: red;
}
to{
width: 400px;
height: 600px;
background: green;
}
}
@keyframes bianb {
0%{
width: 200px;
height: 200px;
background: red;
}
25%{
width: 200px;
height: 400px;
background: yellow;
}
50%{
width: 400px;
height: 400px;
background: blue;
}
75%{
width: 400px;
height: 500px;
background: gray;
}
100%{
width: 400px;
height: 600px;
background: green;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>运行可以实现，鼠标移入后，在延迟5s后从宽高200px的红色盒子，到高400px宽200px的黄色盒子，到宽高400px的蓝色盒子，到宽400px高500px的灰色盒子，到宽400px高600px的绿色盒子的动画，循环无数次。
单一属性
animation-name：动画名称
与@keyframes配合使用；
animation-duration：动画持续时间；
animation-timing-function：动画过渡类型
linear：线性过渡
ease：平滑过渡
ease-in：由慢到快
ease-out：由快到慢
ease-in-out：由慢到快到慢
steps（）：逐帧
steps(1,end)表示不同步骤直接跳过去
若为10会更缓慢，所以值越大越缓慢
end表示保留当前帧，看不到最后一帧，动画结束
若为start表示保留下一帧，看不到第一帧，从第一帧很快跳到最后一帧
step-start=steps(1,start)
step-end=steps(1,end)；
animation-delay：动画延迟时间；
animation-iteration-count：动画循环次数；
animation-direction：动画是否反向运动
normal：正常方向
reverse：反向运行
alternate：先正常再反向，持续交替运行
alternate-reverse：先反向再正常，持续交替运行；
animation-play-state：动画状态
running：运动（默认）
paused：暂停（需配合hover使用）；
animation-fill-mode：动画填充模式
none（默认）
forwards：保留最后状态
backwards：保留最初状态；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: red;
animation-name: bianb;
animation-duration: 10s;
animation-timing-function: linear;
animation-delay: 5s;
animation-iteration-count: infinite;
animation-play-state: running;
animation-direction: alternate;
}
div:hover{
animation-play-state: paused;
}
/*声明动画*/
@keyframes biana {
from{
width: 200px;
height: 200px;
background: red;
}
to{
width: 400px;
height: 600px;
background: green;
}
}
@keyframes bianb {
0%{
width: 200px;
height: 200px;
background: red;
}
25%{
width: 200px;
height: 400px;
background: yellow;
}
50%{
width: 400px;
height: 400px;
background: blue;
}
75%{
width: 400px;
height: 500px;
background: gray;
}
100%{
width: 400px;
height: 600px;
background: green;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>与上一个代码运行结果区别为：移入时暂停，移出继续，而且动画效果先顺序后反序交替运行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
div{
height: 100%;
width: 200px;
background: red;
position: fixed;
left: 0px;
top: 0px;
/* transform: translateX(-200px); */
transform: translateX(-100%);
animation: run 1s linear;
animation-fill-mode: forwards;
}
@keyframes run {
from{
/* transform: translateX(-200px); */
transform: translateX(-100%);
}
to{
transform: translateX(0px);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>盒子从无到有，且定格在其终止状态。
Animate动画库
1.引入文件
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
2.元素加class
例如：<div class="animated bounce" id="a"><div/ >
animated类似于全局变量，定义动画持续时间，bounce为具体动画效果名称
无限播放可以加class infinite
也可以自定义一个class，详细描述动画持续时间等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<style>
div{
width: 200px;
height: 200px;
background: red;
margin: 0 auto;
}
.a{
animation-iteration-count: infinite;
animation-duration: 3s;
}
</style>
</head>
<body>
<div class="animated wobble a"></div>
</body>
</html>红盒子左右摇摆，持续三秒，运行无限次。
3D
相较于2D，多一条垂直屏幕的Z轴
需加上transform-style: preserve-3d;
景深
物体与眼睛距离越小，近大远小效果越明显
父元素：perspective:1200px;
子元素:transform:perspective(1200px);
两个都设置会冲突，建议设置父元素，通常在900-1200之间
视线距离物体足够远不会有近大远小。
perspective-origin:
观察3D元素的位置（角度）
perspective-origin:center center;（中心）
perspective-origin:left top;（左上角）
perspective-origin:100% 100%；(右下角）
平移
相较于2D，多一个translateZ()、translate3d()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 500px;
height: 500px;
border: 5px solid black;
transform-style: preserve-3d;
position: relative;
margin: 0 auto;
perspective: 900px;
}
.center{
position: absolute;
width: 200px;
height: 200px;
background: red;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
transition: all 1s;
}
.box:hover .center{
transform: translateZ(500px);
}
</style>
</head>
<body>
<div class="box">
<div class="center"></div>
</div>
</body>
</html>移入后盒子变大，因为Z轴离自己眼距离近了，出现近大远小的效果。
旋转
相较于2D，多一个rotateZ()、rotate3d()
正值为顺时针，负值为逆时针
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 500px;
height: 500px;
border: 5px solid gray;
display: flex;
transform-style: preserve-3d;
}
.center{
margin: auto;
width: 200px;
height: 200px;
background: red;
}
.box:hover .center{
transform: rotateZ(30deg);
}
</style>
</head>
<body>
<div class="box">
<div class="center"></div>
</div>
</body>
</html>鼠标移入后。显示如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 500px;
height: 500px;
border: 5px solid gray;
display: flex;
transform-style: preserve-3d;
}
.center{
margin: auto;
width: 200px;
height: 200px;
background: red;
}
.box:hover .center{
transform: rotate3d(1,1,1,30deg);
}
</style>
</head>
<body>
<div class="box">
<div class="center"></div>
</div>
</body>
</html>
绕X轴、Y轴、Z轴都顺时针旋转了 30度。
缩放
相较于2D，多一个scaleZ()、scale3d()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 500px;
height: 500px;
border: 5px solid gray;
display: flex;
transform-style: preserve-3d;
perspective: 800px;
}
.center{
margin: auto;
width: 200px;
height: 200px;
background: red;
}
.box:hover .center{
transform: scaleZ(1,1,10) rotateX(45deg);
}
</style>
</head>
<body>
<div class="box">
<div class="center"></div>
</div>
</body>
</html>
配合景深跟旋转可以看到，鼠标移入后近大远小，最近的地方扩大10倍。
网格布局
容器：一个案例中最大的盒子，可理解成父元素；
项目：一个案例中，最大盒子里的内容，可理解成子元素。
行和列、单元格类似于表格的行和列。
网格线：划分网格的线，分为横线和总线。
1.容器属性
触发网格布局
给父元素添加display:grid;
其中，grid为块网格，容器从上向下排列；
inline-grid为行内网格，行内块，容器从左向右排列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: red;
display: grid;
}
.s{
width: 200px;
height: 200px;
background: red;
display: inline-grid;
}
</style>
</head>
<body>
<div></div>
<span>1111</span>
<span class="s">2222</span>
<span>3333</span>
</body>
</html> 
行列属性
规定行属性：grid-template-row;
规定列属性：grid-template-column;
后边数值可跟两种情况：
1.绝对大小 例：200px 200px 200px
2.百分比 例：33.3% 33.3% 33.3%
3.repeat(3,33.3%)
4.repeate(auto-fill,33.3%)
5.fr片段 1fr 2fr 1fr=25% 50% 25%、在容器宽高均为600px时，200px 1fr 1fr=200px 1fr 200px=1fr 1fr 1fr=200px 200px 200px
6.minmax
在容器宽高均为600px时,minmax(200px,300px) 200px 200px=200px 200px 200px
7.auto
剩余1个用auto,类似于 auto 200px 200px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 600px;
height: 600px;
border: 5px solid gray;
display: grid;
/* grid-template-rows: 200px 200px 200px; */
/* grid-template-columns: 33.3% 33.3% 33.3%; */
/* grid-template-rows: repeat(3,200px);
grid-template-rows: repeat(3,33,3%); */
/* grid-template-columns: repeat(auto-fill,33.3%); */
/* grid-template-rows: 200px 1fr 200px;
grid-template-rows: 200px 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr; */
/* grid-template-rows: minmax(200px,300px) 200px 200px;
grid-template-columns: minmax(200px,300px) 200px 200px; */
grid-template-rows: 200px auto 200px;
grid-template-columns: auto 200px 200px;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
间距
row-gap:行间距
column-gap:列间距
gap:复合写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 640px;
height: 640px;
border: 5px solid gray;
display: grid;
grid-template-rows: 200px 200px 200px;
grid-template-columns: 200px 200px 200px;
/* row-gap: 20px;
column-gap: 20px; */
gap: 20px 20px;
}
.box div{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
区域命名与合并
指定区域
grid-template-areas:'a b c'
'd e f'
'h i j'
grid-template-areas:'a a a'
'. . b'
'. c c'
.的位置代表空着，命名一样的代表区域合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 600px;
height: 600px;
border: 5px solid gray;
display: grid;
grid-template-rows: 200px 200px 200px;
grid-template-columns: 200px 200px 200px;
grid-template-areas: 'a a a'
'. . b'
'. c c';
}
.box div:nth-child(1){
grid-area: a;
}
.box div:nth-child(2){
grid-area: b;
}
.box div:nth-child(3){
grid-area: c;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
对齐方式
grid-auto-flow:column|row
单元格项目对齐
justify-content:start|end|center|stretch|space-around|space-between|space-evently;
align-content:start|end|center|stretch|space-around|space-between|space-evently;
place-content:<justify-content> <align-content> 复合写法
start：对齐容器起始边框
end：对其容器结束边框
center：容器内部居中
stretch：项目大小无指定时，拉伸占据整个网格容器
space-around：每个项目两侧间隔相等，项目之间间隔比项目与容器间隔大一倍
space-between：项目与项目间隔相等，项目与容器无间隔
space-evently：项目与项目间隔相等，项目与容器也是同样长度间隔
item用法类似content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 600px;
height: 600px;
border: 5px solid gray;
display: grid;
grid-template-rows: repeat(3,100px);
grid-template-columns: repeat(3,100px);
/* justify-content: center;
align-content: center;
justify-items: center;
align-items: center; */
place-content: center center;
place-items: center center;
}
.box div{
border: 1px solid red;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
项目属性
网格线合并
grid-column-start:左边框所在的垂直网格线
grid-column-end:右边框所在的垂直网格线
grid-row-start:上边框所在的垂直网格线
grid-row-start:下边框所在的垂直网格线
也可以合并写法：
grid-column: 左边框所在的垂直网格线/右边框所在的垂直网格线;
grid-row: 上边框所在的垂直网格线/下边框所在的垂直网格线;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 600px;
height: 600px;
border: 5px solid gray;
display: grid;
grid-template-rows: repeat(3,200px);
grid-template-columns: repeat(3,200px);
}
.box div:nth-child(2){
/* grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3; */
grid-column: 2/4;
grid-row: 1/3;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
5555
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
