HTML基础第五课（冲浪笔记5）
一、透明度
1、opacity：不透明度，还是占位置的，子元素也会透明
0（完全透明）-1（完全不透明）
（1）区别display: none; 块会消失，不占位置
（2）opacity: 0; 块会消失，但是还占位置
（3）代码例子，具体效果可以将代码复制查看
<!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); 元素不受影响
二、手势（改变鼠标形状）菜鸟教程在线编辑器 (runoob.com)
常用的小手cursor: pointer;
三、最大/最小宽度：
1、max-width、max-height：
类似与将宽高定死
2、min-width、min-height：
当界面缩小到固定范围后，内容不会再跟着缩小
3、代码例子
需要的小伙伴可以复制运行在自己的浏览器看效果🧐
<!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();
此处展示Y轴平移效果，其他平移效果，小伙伴可以将上面代码的注释去掉观察蛤🧐
<!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)
旋转135°的效果，deg为度的角度单位
<!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> 
3、缩放：
transform: scale(缩放比例)、transform: scaleX()、transform: scaleY()
注意：缩放改变大小，但是位置还在
<!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); 先平移，再旋转，最后缩小
正确编写顺序如下：
<!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 属性 | 菜鸟教程 (runoob.com)）
1、代码例子
<!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函数（自动计算动态宽度）
注意：-前后有空格
<!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查询 | 菜鸟教程 (runoob.com)）
代码例子，小伙伴可以复制代码运行查看效果
<!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不占空间，有时候影响后面的布局
代码例子
<!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;
<!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> 前端HTML、CSS基础知识 文章被收录于专栏
带小伙伴们一起从零认识HTML，学习常用标签，表单，样式，属性，选择器，基本定位，通过学习方法巧记盒子模型，学习基础简单的动画效果
字节跳动公司福利 1021人发布
查看7道真题和解析