web知识

``html

- 水平垂直居中的元素的父元素上设置相关属性

    - display: flex;

    - justify-content: center; 主轴上子元素的对齐方式

    - align-items: center; 交叉轴上子元素的对齐方式

 

 定义弹性盒项目基准值（即参与计算的最终值————1.基于它计算容器的剩余空间2.基于它计算增长以后的最终值）

- 取值

  - auto  默认值

  - 长度值 【一个长度单位或者一个百分比】

- 注意：与项目的宽、高同时存在时，flex-basis的优先级高于宽、高

## 2、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()实现三栏自适应布局