A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 不二晨 金牌黑马   /  2019-3-22 09:41  /  502 人查看  /  1 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

keyframes

有兼容性    -webkit-    -moz-   -0-   -ms-

要定义属性名称    名称

结合过渡一起使用  

过渡完成时间(S)     缓冲描述 (linear 匀速     ease非匀速 )   延迟时间;(如果是0秒也必须设置单位)

动画次数   infinite

补全反方向动画   alternate

保存最后一帧的状态   forwards



1.box {
                width: 200px;
                height: 200px;
                background-color: lightblue;
                /*调用动画
                1参数:  定义寻找动画名称
                2参数:  一次动画完成时间,单位是s
                3参数:  缓冲描述,linear  ease
                4参数:  延迟时间
                5参数:动画的次数,infinite无限次
                6参数: 补全反方向动画alternate
                7参数: 保持最后一帧状态forwards
                */
                -webkit-animation: donghua 1s linear 3s 3 alternate forwards;
        }       






/*定义动画*/  from to状态
2        @-webkit-keyframes donghua {
3                /*开始状态*/
4                from {
5                        width: 200px;
6                        background-color: lightblue;
7                }
8                /*结束状态*/
9                to {
10                        width: 600px;
11                        background-color: red;
12                }13        }





/*定义动画*/  百分比状态
        @-webkit-keyframes donghua {
                0% {
                        width: 0px;
                        height: 0px;
                        background-color: green;
                }
                50% {
                        width: 400px;
                        height: 400px;
                        background-color: orange;
                }
                100% {
                        width: 600px;
                        height: 500px;
                        background-color: blue;
                }
        }
以谷歌和苹果为例子







动画暂停

play: 播放

state:状态

paused:暂停     结合 hover一起使用

-webkit-animation-play-state: paused;








布局

         垂直居中

        水平居中

         弹性布局



//html部分同上
.parent {
  display:flex;
}  
.right {
  margin-left:20px;
  flex:1;
}
        单列布局 header、content、footer



<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>


.header{
    margin:0 auto;
    max-width: 960px;
    height:100px;
    background-color: blue;
}
.content{
    margin: 0 auto;
    max-width: 960px;
    height: 400px;
    background-color: aquamarine;
}
.footer{
    margin: 0 auto;
    max-width: 960px;
    height: 100px;
    background-color: aqua;
}
       二列布局

如果是普通的两列布局,浮动+普通元素的margin便可以实现,但如果是自适应的两列布局,利用float+overflow:hidden便可以实现,这种办法主要通过overflow触发BFC,而BFC不会重叠浮动元素。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性,所以需要设置zoom:1来兼容IE6-浏览器。



.parent {
  overflow: hidden;
  zoom: 1;
}
.left {
  float: left;
  margin-right: 20px;
}
.right {
  overflow: hidden;
  zoom: 1;
}
均分:
1        .box {
2                width: 100%;
3                overflow: hidden;
4        }
5        .box p {
6                /*浮动和标准流 百分比含义相同*/
7                float: left;
8                width: 50%;
9                height: 200px;
10                background-color: green;
11        }
12        .box p:last-child {
13                background-color: red;14        }


       三列布局

      圣杯布局

圣杯模型

三个元素并排显示,高度不同,最高盒子撑高父盒子,其他盒子最终渲染高度也和最高盒子相同





开始三个盒子高度各不相同。



.box p {
    /*三个元素并排显示  浮动*/
    float: left;
    width: 20%;
    height: 200px;
    background-color: green;
}
.box .no1 {
    /*利用padding-bottom拉长盒子*/
    padding-bottom: 500px;
    /*利用Mgb负值让盒子变矮*/
    margin-bottom: -500px;
}
.box .no2 {
    /*三个元素height 不同*/
    width: 50%;
    height: 400px;
    background-color: orange;
    /*no2利用padding拉长  >= 最高-自身高度*/
    padding-bottom: 1000px;
    /*拉回相同数值*/
    margin-bottom: -1000px;
}
.box .no3 {
    width: 30%;
    height: 600px;
    background-color: pink;
}
      最终显示效果高度相同。





双飞翼布局

双飞翼布局
左右两侧盒子宽度固定值,中间盒子宽度自适应。
浮动:mg相对于上一个浮动元素位置偏移。
1        //结构
2        <!-- 三个同级元素 浮动 -->
3        <div class="container">
4                <!-- 宽度自适应盒子 标准流 -->
5                <div class="main">自适应</div>
6        </div>
7        <div class="left">left</div>
8        <div class="right">right</div>
9        //样式
10        .container {
11                /*左浮动 宽度通栏*/
12                width: 100%;
13                float: left;
14                height: 300px;
15                background-color: #eee;
16        }
17        .container .main {
18                /*标准流*/
19                /*不设置宽度的盒子 mg占有位置  利用Mg将左右两个盒子的位置挤出来*/
20                margin: 0 210px;
21                height: 300px;
22                background-color: green;
23        }
24        /*同级元素要浮动都浮动container left  right*/
25        .left {
26                float: left;
27                width: 200px;
28                height: 300px;
29                background-color: orange;
30                /*利用mgl负值将该盒子移动到container最左侧   拉回一个屏幕宽度*/
31                margin-left: -100%;
32        }
33        .right {
34                /*也是左浮动*/
35                float: left;
36                width: 200px;
37                height: 300px;
38                background-color: pink;
39                /*right元素在container  最右侧  拉回自身宽度*/
40                margin-left: -200px;41        }










百分比布局

标准流,浮动:

width: 表示相对于父盒子内容宽比值

height: 表示相对于父盒子内容高比值

padding,margin:不管任何方向都是表示相对于父盒子内容宽比值

border:不能使用百分数



绝对定位:

width: 表示相对于定位参考盒子(内容宽+padding)比值

height: 表示相对于定位参考盒子(内容高+padding)比值

padding,margin:不管任何方向都是表示相对于定位参考盒子(内容宽+padding)比值

border:不能使用百分数



百分比布局
* {
                padding: 0;
                margin: 0;
        }
        ul, ol {
                list-style: none;
        }
        a {
                text-decoration: none;
                color: #000;
        }
        .box1 {
                /*父盒子使用px*/
                width: 300px;
                height: 400px;
                padding: 50px;
                border: 20px solid #000;
        }
        .box1 p {
                /*标准流和浮动*/
                /*width:相对于父盒子内容宽比值*/
                width: 50%;
                /*height: 相对于父盒子内容高比值*/
                height: 20%;
                /*padding,margin 相对于父盒子内容宽比值*/
                padding: 10%;
                margin: 10%;
                background-color: red;
        }
        .box2 {
                /*父盒子使用px*/
                width: 300px;
                height: 400px;
                padding: 50px;
                border: 20px solid #000;
                position: relative;
        }
        .box2 p {
                /*绝对定位*/
                position: absolute;
                left: 0;
                top: 0;
                /*参考边框以内宽度  (300+50*2)* 50% = 200px*/
                width: 50%;
                /*参考边框以内高度比值*/
                height: 20%;
                /*padding,margin 边框以内宽度比值*/
                padding: 10%;
                margin: 10%;
                background-color: green;
        }

       
        </style>
</head>
<body>
        <div class="box1">
                <p>son</p>
        </div>
        <div class="box2">
                <p>绝对</p>
        </div>



---------------------
【转载,仅作分享,侵删】
作者:前端小99
原文:https://blog.csdn.net/qq_41328247/article/details/88605722
版权声明:本文为博主原创文章,转载请附上博文链接!

1 个回复

倒序浏览
奈斯,感谢分享
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马