一、透明度
1、opacity不透明度
是占位置的，子元素也会透明
0（完全透明）-1（完全不透明）
（1）区别
display: none; 块会消失，不占位置
opacity: 0; 块会消失，但是还占位置
（2）代码例子，具体效果可以将代码复制查看
代码语言：javascript复制<!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>
* {
margin: 0;
padding: 0;
}
.box2{
width: 100px;
height: 200px;
background-color: blue;
display: none;
}
.box1{
width: 100px;
height: 200px;
background-color: rgb(187, 255, 0);
}
.box{
width: 200px;
height: 200px;
background-color: rgb(255, 0, 4);
opacity: 0;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>2、background: rgba(r,g,b,a);
元素不受影响
二、手势（改变鼠标形状）https://www.runoob.com/try/try.php?filename=trycss_cursor
小手cursor: pointer;
image.png三、最大/最小宽度
1、max-width、max-height
类似于将宽高定死
2、min-width、min-height
当界面缩小到固定范围后，内容不会再跟着缩小
代码例子，需要的小伙伴可以复制运行在自己的浏览器看效果
代码语言：javascript复制<!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>
* {
margin: 0;
padding: 0;
}
.box{
background-color: rgb(255, 0, 4);
min-width: 500px;
max-height: 50px;
}
</style>
</head>
<body>
<div class="box">多地高招录取启动3中国经济正在稳步恢复热1枪击案嫌犯称最初目标并非安倍热480秒看斯里兰卡大抗议6个时间节点新231省份新增本土“65 279”热5《密室大逃脱》节目组致歉</div>
</body>
</html>
背景色的最大高度、字体内容的最小宽度四、transform属性
1、平移
transform: translate(x轴, y轴);
transform:translateX(200px);
transform:translateY();
代码语言：javascript复制<!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>
* {
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background-color: rgb(255, 0, 4);
/* transform: translate(100px,50px); */
/* transform: translateX(200px); */
transform: translateY(150px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
其他平移效果，小伙伴可以将上面代码的注释去掉观察蛤
2、旋转
transform: rotate(45deg);
代码语言：javascript复制<!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>
* {
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background-color: rgb(255, 0, 4);
transform:rotate(135deg);
}
</style>
</head>
<body>
<div class="box">2</div>
</body>
</html>
旋转135°的效果，deg为度的角度单位
3、缩放
transform: scale(缩放比例)
transform: scaleX()
transform: scaleY()
代码语言：javascript复制<!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>
* {
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background-color: rgb(255, 0, 4);
transform: scale(0.5);
/* transform: scaleX(0.6); */
/* transform: scaleY(0.3); */
}
</style>
</head>
<body>
<div class="box">2</div>
</body>
</html>
注意：缩放改变大小，但是位置还在
4、三合一
transform: translate(200px,200px) rotate(45deg) scale(0.5);
注意：三者位置不同效果截然不同
（1）transform: translate(200px,200px) rotate(45deg) scale(0.5); 先平移，再旋转，最后缩小
正常编写顺序
代码语言：javascript复制<!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>
* {
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background-color: rgb(255, 0, 4);
transform: translate(200px,200px) rotate(45deg) scale(0.5);
}
</style>
</head>
<body>
<div class="box">2</div>
</body>
</html>
（2） transform: rotate(45deg) translate(200px,200px) scale(0.5); 先旋转，再平移，最后缩小
会出现显示不正常
还有其他情况，这里就不一一展示，小伙伴们可以自己去尝试
五、动画CSS3 animation 属性 | 菜鸟教程
1、代码例子
代码语言：javascript复制<!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>
* {
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 500px;
border: 10px solid rgb(168, 38, 166);
}
.move{
width: 100px;
height: 100px;
background-color: blue;
animation-name: moveBox;/*动画名称*/
animation-duration: 2s;/*2s完成这件事情（周期2s）*/
animation-iteration-count: infinite;/*动画迭代次数：无限次*/
animation-delay: 2s;/*延迟3s后才开始（延迟启动时间）*/
animation-timing-function: linear;/*动画从头到尾速度相同（默认是以低速开始，然后加快，结束前变慢）*/
/* animation: moveBox 2s linear 2s infinite; */
}@keyframes moveBox{
0%{
transform: translate(0,0);
background-color: aqua;
}
25%{
transform: translateX(400px) rotate(360deg);
background-color: rebeccapurple;
height: 50px;
}
50%{
transform: translate(400px,400px) rotate(90deg);
background-color: black;
width: 200px;
}
75%{
transform: translate(0,400px) rotate(360deg) scale(0.5);
background-color: blue;
}
100%{
transform: translate(0,0) rotate(0deg);
background-color: green;
}
}
</style>
</head>
<body>
<div class="box">
<div class="move"></div>
</div>
</body>
</html>代码效果小伙伴们可以把代码复制，运行查看，更多效果可以参考网址介绍
六、calc函数（自动计算动态宽度）
注意：-前后有空格
代码语言：javascript复制<!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>
* {
margin: 0;
padding: 0;
}
.left{
width: 300px;
height: 200px;
background-color: aqua;
float: left;
}
.right{
width: calc(100% - 300px);/*注意-前后有空格*/
height: 200px;
background-color: orange;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
七、媒体查询：适应设备CSS3 @media查询 | 菜鸟教程
代码例子，小伙伴可以复制代码运行查看效果
代码语言：javascript复制<!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>
* {
margin: 0;
padding: 0;
}
.box1{
width: 300px;
height: 200px;
background-color: aqua;
float: left;
margin-bottom: 10px;
margin-right: 10px;
}@media screen and (max-width:620px){
body{
background-color: brown;
}
.box1{
width: 100%;
}
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box1"></div>
</body>
</html>八、清除浮动：因为float不占空间，有时候影响后面的布局
代码例子
代码语言：javascript复制<!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>
* {
margin: 0;
padding: 0;
}
.box{
border: 10px solid yellow;
}
/* 清除浮动
.box::after{
content: "";
display: block;
clear: both;
}
*/
.item{
width: 100px;
height: 100px;
background-color: blue;
margin-right: 10px;
float: left;
}
.part{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="part"></div>
</body>
</html>1、清除浮动前
2、清除浮动后
九、过渡属性：标签样式发生变化时有动画效果
1、格式： transition: 2s;
代码语言：javascript复制<!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>
* {
margin: 0;
padding: 0;
}
.box{
width: 100px;
height: 100px;
background-color: red;
transition: 2s;
}
.box:hover{
height: 200px;
background-color: rgb(0, 234, 255);
transform: translate(100px,100px);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
