祈德斌-20201029
1.动画
.box{
width: 200px;
height: 200px;
background: red;
margin: 0 auto;
transition:all 3s ease;/*过渡*/
}
.box:hover{
transform: rotate(360deg);/*旋转*/
transform:scale(0.7);/*缩放*/
transform:skew(45deg);/*倾斜*/
transform:translate(300px);/*平移*/
transform:matrix(-1,-1,-1,0,-1,1);/*扭曲：两行三列的三角函数矩阵*/
transform:rotate()
}
overflow:hidden;/*子容器超出父容器的部分隐藏*/
1.rotateY延y轴旋转
2.scale(1.5);缩放，>1放大 1>x>0缩小
3.skew倾斜
4.translate()平移
5.matrix()扭曲，其中它的参数是一个两行三列的三角函数矩阵，如transform: matrix(-1,-1,-1,0,1,1)
6 .如果让很多动画同时出现
在同一个transition中用空格将每一个动画的程序分隔开来，如transform: scale(1.2) rotate(360deg) skew(1.5);
盒子模型
1.margin-top上外边距、margin-bottom下外边距
2.内边距（也叫内填充，当设置了padding时相当于设置的那一块被填充了）：padding-top上内边距，最后bigbox的大小等于原设置宽高+padding的px
3.如果是padding：100px 200px 300px 100px（上 右 下 左）
3.如果是padding：100px 200px（上下 左右）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style3.css" />
</head>
<body>
<!--块标签和行级标签的属性转化
1、块级标签加float（浮动）就有了行级标签不独占一行的特点
特别注意：使用浮动时，一定外面再加个标签使其嵌套起来，加个容器(标签)包起来
-->
<div class="page">
<div class="header">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
border: 0;
}
.page{
width: 600px;
height: 600px;
margin: 0 auto;
border: 2px #dedede solid;
}
.header{
width: 100%;
height: 250px;
}
.left{
width: 200px;
height: 200px;
background: red;
float: left;
margin: 10px;
}
.right{
width: 220px;
height: 220px;
background: yellow;
float: right;
margin: 10px;
}
.bottom{
width: 600px;
height: 200px;
background: cornflowerblue;
margin: 0 auto;
}
学习心得
今天学习的内容对我们来说很重要，学习起来有一定的难度，但是经过一天的学习我能能更好的完善网页了，我相信随着我每天的积累最终能有一个很好的收获的。
近期评论