吴东东-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控制是不是播放*/;
}


心得体会:通过这几天的实训,今天重点主要学习了盒子模型,学习了浮动等等
并对所学的各种代码操作加以总结复习,收获很大,在接下来的几天继续努力

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1