14, css3弹性盒子, calc计算函数, css3预处理, less语法

day 14

知识回顾

1、如何设置过渡动画

transition：需要过渡的属性 设置过渡时间 速度曲线 延迟时间;

2、水平向左移动100像素，垂直向下移动200像素，代码如何书写

transform:translate(-100px,200px)

3、如何实现盒子绝对居中（关键步骤或核心代码）

• 子绝父相
• left:50%;top:50%
• transform:translate(-50%,-50%)

4、css3帧动画如何定义

@keyframes 动画名称{ }

5、css3动画如何使用

animation：动画名称 动画播放时间 速度曲线 延迟时间 播放次数 是否反向轮流播放；

6、你知道的2d变形有哪些？

• 2d位移

transform:translate(x,y)
transform：translateX(x)
transform:translateY(y)

• 2d旋转

transform:rotate(n deg);

• 2d缩放

transform:scale(x,y);
transform:scaleX(x);
transform:scaleY(y);

• 2d倾斜

transform:skew(x,y);

7、你知道的3d变形有哪些？

• 3d位移

transform:translateZ(z);

• 3d旋转

transform:rotateX(x);
transform:rotateY(y);
transform:rotateZ(z);

• 3d缩放

transform:scaleZ(z);

补充：过渡效果与自定义动画的区别及适用场景

（1）过渡效果需要有js事件触发、伪类、媒体查询触发；自定义动画可以自动播放（一刷新页面就可以看到动画效果的用animation）； 需要自动播放的动画适用自定义动画

（2）过渡动画播放一次就结束了，但是自定义动画可以设置播放次数； 需要多次播放或者重复播放的动画适用自定义动画

（3）复杂的动画效果使用自定义动画，因为自定义动画可以在定义时设置多个关键动画

一、css3弹性盒子

弹性盒子是 CSS3 的一种新的布局模式。

引入弹性盒布局模型的目的：是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

兼容性：ie11+及标准浏览器最新版是支持的

1、基本概念

（1）容器

使用flex布局的元素，称为flex容器（flex container），简称容器

（2）项目

容器下面的直接子元素（亲儿子）就叫做flex项目(flex item)，简称项目

（3）主轴

默认情况下，主轴是水平方向的（起始是在左边，结束是在右边）

项目是在主轴上进行排列的

（4）交叉轴

默认情况下，交叉轴是垂直方向的（起始是在上边，结束是在下方）

2、设置弹性盒子

display:flex;
display:inline-flex;

• 任何一个容器都可以指定为弹性盒

• 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局

• 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效

3、容器属性

（1）flex-direction

决定主轴的方向

• row（默认值）：主轴为水平方向，起点在左端
• row-reverse：主轴为水平方向，起点在右端
• column：主轴为垂直方向，起点在上沿
• column-reverse：主轴为垂直方向，起点在下沿

（2）justify-content

定义了项目在主轴上的对齐方式

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等
• space-around：每个项目两侧的间隔相等

（3）align-items

定义项目在交叉轴上如何对齐

• flex-start：交叉轴的起点对齐
• flex-end：交叉轴的终点对齐
• center： 交叉轴的中点对齐
• baseline: 项目的第一行文字的基线对齐
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

（4）flex-wrap属性

如果一条轴线排不下，如何换行

• nowrap（默认）：不换行
• wrap：换行，第一行在上方
• wrap-reverse：换行，第一行在下方

4、项目属性

（1）order属性

定义项目的排列顺序

数值越小，排列越靠前，默认值为0

（2）flex-grow

定义项目的放大比例

默认是0，即如果存在剩余空间，也不放大

（3）flex-shrink

定义项目的缩小比例

默认为1，即如果空间不足，该项目将缩小

如果某个项目在主轴上排不下的情况下，这个项目不想缩小，可以设置flex-shrink：0

不能设置负值

（4）align-self

定义弹性容器内被选中项目的对齐方式，和弹性容器的align-items属性作用相同，此属性用于项目

• auto 默认值，元素继承了它的父容器的align-items属性，如果没有父容器则为“stretch”

• stretch 占满整个父级的高度

• flex-start 交叉轴的起点对齐

• flex-end 交叉轴的终点对齐

• center 交叉轴的中点对齐

• baseline 项目的第一行文字的基线对齐

• inherit 从父元素继承该属性

二、calc()函数

calc() 函数用于动态计算长度值，是css3的一个新增的功能，用来指定元素的长度

使用标准的数学运算优先级规则

注意：运算符前后需要空格

语法：

.box {
     calc(expression);
}

兼容性：ie9+及标准浏览器最新版是支持的，移动端仅支持”firefox for android 14.0“支持

1、calc()实现两栏自适应

 <div class="wrap">
    <div class="left">左侧盒子</div>
    <div class="right">右侧盒子</div>
</div>

<style>
    .left {
        float: left;
         300px;
        min-height: 200px;
        background-color: pink;
    }
    .right {
        float: left;
         calc(100% - 300px);
        min-height: 200px;
        background-color: yellow;
    }
</style>

三、css3预处理

1、什么是css3预处理

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

使用CSS预处理器语言，可以有让CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

2、什么是less？less的好处

Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件,只有在被编译后才能够被浏览器识别使用。

less的好处：

• 结构清晰，便于扩展
• 可以方便的屏蔽浏览器私有语法差异
• 可以方便的实现多重继承
• 完全兼容css代码，可以方便的应用到之前的老项目中去

3、预处理编译工具

koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。

官网下载地址：http://koala-app.com/index-zh.html

4、less语法

（1）注释

less共有两种注释风格。

标准的CSS注释，多行注释 /* comment */ ，会保留到编译后的文件。

单行注释 // comment，只保留在less源文件中，编译后被省略。

// 注释
/*这也是一段注释，这段注释是能被编译到css中的*/

（2）导入

@import "文件路径";

如果导入的是css文件，不能省略.css后缀

如果导入的less文件则.less这个后缀名可以省略的

（3）变量

变量以@开头,变量名与变量值之间用【冒号】分隔

如果变量需要镶嵌在字符串之中，就必须需要写在@{}之中

// 变量
// @变量名：变量值;
@w : 300px;
@t : top;
.box1 {
     @w;
    height: @w;
    // 变量镶嵌在字符串中，需要@{变量名}
    border-@{t} : 1px solid red;
}

（4）混入/混合

• 将一个定义好的class A引入到另一个class B中

.box1 {
     @w;
    height: @w;
    // 变量镶嵌在字符串中，需要@{变量名}
    border-@{t} : 1px solid red;
}

// 将一个定义好的class A引入到另一个class B中
.box2 {
    .box1;
}

• 混入参数但未设置默认值

//混入参数但未设置默认值
.box3(@r) {
    border-radius: @r;
}

.box4 {
    // 调用的时候必须得传递值是多少
    .box3(10px);
}

• 混入参数并且设置了默认值

// 混入参数并且设置了默认值
.box5(@ra:5px) {
    border-radius: @ra;
}

.box6 {
    // 如果调用时没有传参，使用默认值
    .box5;
}
.box7 {
    // 调用时如果传参了，就使用传递的值
    .box5(20px);
}

• 使用@arguments来引用所有传入的变量

.box8(@h:5px,@v:5px,@b:10px,@c:red) {
    box-shadow: @arguments;
}
.box9 {
    .box8(10px,30px);
}
.box10 {
    .box8(@c:rgba(0,0,0,0.2));
}