响应式设计
流式布局(fluid grids) 弹性媒体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css高级</title>
<style>
.container{
width: 100vw;
background: #eee;
float: left;
}
nav,section{
margin: 2%;
height: 50vh;
}
nav{
background: lightblue;
float: left;
width: 20%;
}
section{
background: lightcoral;
float: left;
width: 72%;
}
</style>
</head>
<body>
<div class="container">
<nav class="nav">nav</nav>
<section class="section">
<img src="img/car.png" alt="" style="max-width: 100%;">
</section>
</div>
</body>
</html>
meidia query(媒体查询)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS高级</title>
<style>
.container{
width: 100vw;
background: #eee;
float: left;
}
nav,section{
margin: 2%;
height: 50vh;
}
nav{
background: lightblue;
float: left;
width: 20%;
}
section{
background: lightcoral;
float: left;
width: 72%;
}
@media(max-width: 1200px){
nav,section{float: none;width: auto;}
nav{height: 100px;}
}
</style>
</head>
<body>
<div class="container">
<nav class="nav">nav</nav>
<section class="section">section
</section>
</div>
</body>
</html>
mobile first 的响应式设计(移动优先)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS高级</title>
<style>
.container{
width: 100vw;
background: #eee;
}
nav,section{
margin: 2%;
height: 50vh;
}
nav{
background: lightblue;
}
section{
background: lightcoral;
}
@media (min-width: 1200px){
.container{
width: 100vw;
background: #eee;
float: left;
}
nav,section{
margin: 2%;
height: 50vh;
}
nav{
background: lightblue;
float: left;
width: 20%;
}
section{
background: lightcoral;
float: left;
width: 72%;
}
}
/*
@media acreen and(min-width:768px){
r1
r2
}
@media acreen and(min-width:972px){
r3
r4
}
*/
</style>
</head>
<body>
<div class="container">
<nav class="nav">nav</nav>
<section class="section">section
</section>
</div>
</body>
</html>
css3 transform
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 测试
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。 测试
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。
css3 transformation
transition 属性是一个简写属性,用于设置四个过渡属性:
transition-property
transition-duration
transition-timing-function
transition-delay
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
具体内容去w3c 去查
css3 animation
animation 属性是一个简写属性,用于设置六个动画属性:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
具体内容去w3c 去查