吴东东-20201029
知识总结：
一、盒子模型
1、能够准确阐述盒子模型四个组成部分
所谓盒子模型就是把HTML页面看做成一个矩形盒子 他包括 （border）边框、
（margain）外边距、（padding）内边距、（content）实际内容
2、能够利用边框复合写法给元素添加边框
3、能够计算盒子的实际大小
4、能给盒子设置圆角边框
5、能够给盒子添加阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
盒子模型
-->
<link rel="stylesheet"href="css/b.css" />
</head>
<body>
<div class="bigbox">
<div class="smallbox"></div>国祯
</div>
</body>
<ml>
二、<div>布局
知道<div>是定义一个块的了，那么就可以用<div>来页面布局了。
可以分别将<div>定义成头部，左边菜单，中间正文，底部标签这几栏。
只有修改这些定义过ID的<div>那一块的内容就会跟着被修改。
<!-- 使用CSS样式来控制div布局 -->
<style type="text/css">
/*定义全局的div布局*/
div#global{
/*设置宽度，设置百分比可以根据浏览器自适应宽度*/
width: 100%;
/*设置高度，950px是设置是实体高度，不能自适应的*/
height: 800px;
/*设置背景颜色，方便区分布局*/
background-color: silver;
}
/*定义头部布局，前面的div可以不用写，#号前面默认有个id，凡事定义了id的标签，都可以用#号来表示*/
/*transition:all 3s/* ease*/;/* ease匀速ease-in匀加速 3s过度*/*/
/*transition:all所有的背景等 10s ease-in 3s 出现背景 10s完成*/
/*transition:width 3s ;3s宽度过度*/
border: 2px yellow solid;
border-radius:100px;
background-size:200px 220px ;
overflow: hidden;/*子容器超过父容器部分隐藏*/
transition: all 3s;
<body>
<!-- 在这里控制全局的页面，定义div的id是"global" -->
<div id="global">
<div id="heading">我是头部的布局</div>
<div id="content_menu">我是正文部分，我想去左边的菜单呆着</div>
<div id="content_body">我是正文部分</div>
<div id="floor">我在最下面，抢不到沙发，坐个地板可以吧</div>
三、动画效果共3大部分：变形，过度，动画
我们可以通过transform这个属性来实现文字或图像的的各种变形效果，
如位移translate、缩放scale、旋转rotate、倾斜skew等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
自定义动画
<link rel="stylesheet" href="css/aaa.css"/>
</head>
<body >
<div class="box"></div>
</body>
<ml>
/*transform:rotate(360deg);*//*旋转*/
注：
transform：rotate(30deg);旋转；接收的是角度值；也可以接收负值，往相反的方向旋转；
/*width: 600px;
background-color: yellow;*/
/*transform: scale(1.5);*//*缩放*/
注：
transform：scale（x轴缩放，y轴缩放），但是scale具有放大和缩小两种功能；
当scale值等于几时就是放大几倍；
也可以单独设置某一轴的缩放；也可以接收负数；
/*transform: skew(45deg);*//*倾斜*/
注：
transform：skew(x轴角度，y轴角度)；当skewX时逆时针倾斜，
当skewY是顺时针倾斜；也可以接收一个值，默认
围绕中心点倾斜，接收负值往相反的方向倾斜；
skewX()方法会保持高度、宽度，沿着X轴与Y轴倾斜；skew(x,y)方法会先
按照skewX()方法倾斜，然后按照skewY()方法倾斜；
/*transform: translate(300px);*//* 负的左 正的右 平移*/
注：
transform：translate(x位移,y位移)；可以接收单个值；单独设置x轴用
translateX同理translateY，也接收负值；
<style type="text/css"
/*transform:matrix(-1,-1,-1,0,-1,1) ;*//*扭曲
两行三列的三角函数矩阵*transform 只能复制一次 否则会覆盖*/
/*transform: rotate(45deg) scale(1.5);*/
/*transform: scale(1.2);*/
/*}*/
.box:hover{
animation: change/*动画名称*/ 3s/*动画播放时间*/
ease/*播放轨迹*/ 1s/*延迟播放(隔一秒变)*/forwards /*让动画留在最后一帧*/
/*2播放两次*/infinite/*播放次数无限*/
/*alternate running 来回播正负播 inherit控制是不是播放*/;
}
心得体会：通过这几天的实训，今天重点主要学习了盒子模型，学习了浮动等等
并对所学的各种代码操作加以总结复习，收获很大，在接下来的几天继续努力
近期评论