Web前端

## 1、calc()函数

- 用于动态计算长度值，值灵活

- css3新增功能

- 任何长度值都可以使用calc()函数进行计算；

- calc()函数支持 "+", "-", "*", "/" 运算；

- calc()函数使用标准的数学运算优先级规则；

- 运算符前后都需要保留一个空格

- 语法：

  calc(表达式)

```html

运算符前后都需要保留一个空格

width: calc(100% - 200px);  减号的前后添加空格

.box {

    width: calc(100% - (10px + 20px) * 2);

    height: 300px;

    background-color: pink;

}

 - 浏览器支持

   在IE9+、Firefox、chrome、safari可以正常呈现

- 利用calc()实现三栏自适应布局

---

## 2、css3过渡动画——transition属性

- 语法

```css

transition: transition-proterty transition-duration transition-timing-function transition-delay;

transition: css样式  动画的执行时间  速度类型  动画的延迟时间;

 多个css属性用逗号隔开

 transition: transform 2s, background-color 2s;

注意：谁发生了属性的改变 就加在谁身上

```

- 属性

  1、transition-proterty

  - css样式：参与过渡的css属性名称|all表示所有属性

  2、transition-duration

  - 动画执行时间：默认0s，s|ms(毫秒)   1s=1000ms

  3、transition-timing-function

  - 速度类型

    1.linear 相同的速度从开始到结束，也就是匀速

    2.ease  默认值 慢速度开始--速度变快--慢速度结束

    3.ease-in 慢速度开始的过渡效果，也就是以低速度开始

    4.ease-out 慢速度结束的过渡效果，也就是以低速结束

    5.ease-in-out 以慢速度开始和结束的过渡效果

  4、transition-delay

  - 延迟时间：默认0s,单位s|ms

> 注意：必须设置transition-duration属性，否则执行时间为0，不会产生过渡效果

---

## 2、rem布局

* rem是css3新增单位，它是相对于根元素的字号大小的单位

  rem原理：

​     rem是指相对于根元素的字体大小的单位，即根据html元素的font-size来计算大小。

​      在布局过程中只要使用 rem 设置元素的尺寸，在改变 rem 的基准值 html 的字体大小的时候，页面上的元素将等比例缩放实现适配。

比如说 html 的 font-size 大小为 100px, 一个 div 的 width 为 1rem，则 div 的 width大小为100px

相对单位 : rem  

 rem布局的实现：

​    1、设置页面的viewport

​    2.动态计算并设置不同尺寸html的font-size属性

​    3.按照PC端布局方式正常布局，将px单位改为rem单位（较小 的长度比如1px的边框就不需要转换成rem,直接设置px）