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

一、厂商前缀

1.1 作用

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

1.2 语法

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

1.3 例子

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

css 复制代码

    /* 兼容谷歌和苹果 */

    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 语法

html 复制代码

<!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)">

五、弹性盒模型伸缩盒模型 flex box

5.1 介绍

Css3新增的布局模式，主要用于移动端布局

主要是控制容器中的子元素在容器中的排列方式、对齐方式、分配容器剩余空间等

5.2 名词

弹性容器：父元素

弹性项目：子元素

注意：弹性布局只对弹性容器中的弹性项目生效

5.3 弹性容器上的属性

1）转换为弹性盒模型

display:flex; 把元素转换为弹性容器

父元素开启弹性盒模型，子元素默认水平排列,子元素默认宽度变为由内容撑开

2）设置子元素在父元素中的排列方式

flex-direction:;

row：默认值从左往右水平排列

row-reverse：从右往左水平排列

column：从上往下垂直排列

column-reverse：从下往上垂直排列

3）设置子元素在主轴的对齐方式

默认子元素水平排列，水平方向为主轴，垂直方向为侧轴

当子元素垂直排列，垂直方向为主轴，水平方向为侧轴

justify-content:;

flex-start：默认值弹性盒的开始

flex-end：弹性盒的结束

center：居中

space-between：在子元素之间平均分配父元素剩余的空间

space-around：在子元素四周分配父元素剩余的空间，两端是中间的一半

4）设置子元素在侧轴的对齐方式

align-items:;

flex-start：默认值弹性盒的开始

flex-end：弹性盒的结束

center：居中

5）设置子元素是否换行

flex-wrap:;

nowrap:默认值不换行

wrap：换行

5.4 弹性项目上的属性

1）flex

①作用

设置弹性盒模型中的子元素如果分配父元素的剩余空间

②语法

flex:flex-grow flex-shrink flex-basis;

默认值 0 1 auto

③flex-grow

设置子元素的扩展比率(子元素宽度的比例)

默认值为0，取值为数值

②flex-shrink

设置子元素的收缩比例

默认值为1，取值为数值

③flex-basis

设置子元素的基准值

默认值为auto，取值px

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

一、厂商前缀

1.1 作用

1.2 语法

1.3 例子

二、 css hack （了解）

2.1 作用

2.2 语法

2）属性hack

三、 动画

3.1 作用

3.2 过渡和动画的区别

3.3 语法

3.4 属性

四、 媒体查询 media query

4.1 响应式布局

4.2 实现响应式布局的方法

4.3 媒体查询

五、 弹性盒模型 伸缩盒模型 flex box

5.1 介绍

5.2 名词

5.3 弹性容器上的属性

5.4 弹性项目上的属性

三、动画

四、媒体查询 media query

五、弹性盒模型伸缩盒模型 flex box