CSS弹性盒模型（学习笔记）

news2024/11/15 9:26:48

一、厂商前缀

1.1 作用

解决浏览器对C3新特性的兼容，不同的浏览器厂商，定义了自己的厂商前缀

1.2 语法

浏览器	厂商前缀	内核(渲染引擎)：解析html+css+js
谷歌	-webkit-	blink
苹果	-webkit-	webkit
欧朋	-o-	blink
火狐	-moz-	gecko
IE	-ms-	trident

1.3 例子

五个浏览器都要去兼容，也就是以下语句都要写，顺序无所谓（因为无法确定用户使用哪个浏览器）

    /* 兼容谷歌和苹果 */

    background-image:-webkit-radial-gradient(top,red,orange,yellow,green,blue) ;

    /* 兼容欧朋 */

    background-image: -o-radial-gradient(top,red,orange,yellow,green,blue);

    /* 兼容IE */

    background-image: -ms-radial-gradient(top,red,orange,yellow,green,blue);

    /* 兼容火狐 */

    background-image: -moz-radial-gradient(top,red,orange,yellow,green,blue);

    background-image: radial-gradient(top,red,orange,yellow,green,blue);

二、 css hack （了解）

2.1 作用

解决IE不同版本的兼容性问题

2.2 语法

1）条件hack

位置同HTML

<!--[if 条件]>

代码块

<![endif]-->

条件：

IE 版本号指定版本

gt IE 版本号大于

gte IE 版本号大于等于

lt IE 版本号小于

lte IE 版本号小于等于

2）属性hack

在属性前面或者后面加符号

前缀：* + - _ # 例如：*color:;

后缀：\0 \9 \9\0 !important 例如：color:red !important;

三、动画

3.1 作用

使元素从一种样式逐渐变为另外一种样式

3.2 过渡和动画的区别

过渡：简单的动画

1）必须有触发事件 :hover，没法在页面加载时自动执行

2）过渡是一次性的

3）过渡只有开始状态和结束状态，没有中间的过程

动画：复杂的动画

1）定义动画的过程 @keyframes name{}

2）可以没有触发事件，可以在网页加载时自动执行

3）可以执行任意多次

3.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>
        /* 
        过渡：简单的动画
        1）必须有触发事件  :hover，没法在页面加载时自动执行
        2）过渡是一次性的
        3）过渡只有开始状态和结束状态，没有中间的过程
        
        */
        .box1 {
            width: 200px;
            height: 200px;
            /* 开始状态 */
            background-color: red;
            transition: all 1s;
        }

        /* 鼠标悬停触发过渡 */
        .box1:hover {
            /* 结束状态 */
            background-color: yellow;
        }

        /* 
        动画：复杂的动画
        1）定义动画的过程  @keyframes name{}
        2）可以没有触发事件，可以在网页加载时自动执行
        3）可以执行任意多次

        
        */

        .box2 {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 20px;
            /* 2.触发动画 */
            /* 
            animation: name duration timing-function delay iteration-count direction fill-mode;
                       必须   必须          可选       可选        可选        可选     可选
                       名称  持续时间    速度变化类型  延迟时间    播放次数      方向   动画是否停在最后一帧
            */
            /* animation: dh 3s linear 1s 3 alternate forwards; */

            /* 单个属性 */
            animation-name: dh;
            animation-duration: 3s;
            animation-timing-function: linear;
            animation-delay: 1s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-fill-mode: forwards;
        }
        .box2:hover{
            /* 暂停动画 */
            animation-play-state: paused;
        }

        /* 1.定义动画的过程  状态 */
        @keyframes dh {

            /* 开始的状态 */
            0% {
                background-color: red;
            }

            /* 任意的百分比  动画的过程 */
            20% {
                background-color: orange;
                width: 1200px;
            }

            50% {
                background-color: blue;
                width: 600px;
                transform: rotate(360deg);
            }

            75% {
                background-color: green;
                width: 200px;
            }

            /* 结束的状态 */
            100% {
                background-color: yellow;
                border-radius: 50%;
            }

        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

1）定义动画的过程

@-webkit-keyframes name{

0%|from{

css样式

}

百分比{

css样式

}

100%|to{

css样式

}

2）触发动画

-webkit-animation: name duration timing-function delay iteration-count direction fill-mode;

必须必须可选可选可选可选可选

名称持续时间速度变化类型延迟时间播放次数方向动画是否停在最后一帧

3.4 属性

animation-name: ;动画名称必须属性

animation-duration: ;动画持续时间必须属性取值s|ms

animation-timing-function: ;动画速度变化类型可选属性 ease ease-in ease-out ease-in-out linear

animation-delay: ;延迟时间可选属性取值s|ms 可以取负值

animation-iteration-count: ;动画播放次数可选属性数字|infinite(无限循环)

animation-direction: ;动画播放方向可选属性 alternate(偶数次倒序播放)

animation-fill-mode: ;动画是否停在最后一帧可选属性 forwards(动画停在最后一帧)

animation-paly-state:;动画的状态可选属性 running：默认值，运行 paused：暂停

四、媒体查询 media query

4.1 响应式布局

1）概念

写一次样式，适配所有终端

2）优缺点

优点：能够快速的适配所有的终端

缺点：代码量大，浏览器加载时间长

4.2 实现响应式布局的方法

1）媒体查询

2）bootstrap

3）rem+js

4）vw

4.3 媒体查询

1）设置meta标签

视口设备宽度初始化缩放比例

2）不同的设置宽度显示不同的样式

①行内引入(所有的终端样式写在一个css文件中)

移动端

@media screen and (max-width:768px){

移动端的样式

}

平板

@media screen and (min-width:768px) and (max-width:992px){

平板的样式

}

pc端

@media screen and (min-width:992px){

pc端的样式

}

②外部引入(各自终端写在各自的css文件中)

移动端

<link rel="stylesheet" href="样式文件" media="screen and (max-width:768px)">

平板端

<link rel="stylesheet" href="样式文件" media="screen and (min-width:768px) and (max-width:992px)">

pc端

<link rel="stylesheet" href="样式文件" media="screen and (min-width:992px)">