知识梳理CSS

盒子模型：

Flex布局：

• flex子项目在主轴的缩放比例 ：flex: 2; 约束份数,整数值(使用后宽高失效). 如果用百分数,要加起来是100才可以用. 可实现圣杯布局

• flex-direction调整主轴方向：row 、row-reverse、 column 、column-reverse

• flex-wrap控制是否换行： nowrap、wrap、wrap-reverse;

• flex-flow是flex-direction、flex-wrap的简写形式

• align-items调整侧轴对齐（垂直对齐）（单行）stretch; 默认值。项目被拉伸以适应容器。center; 项目位于容器的中心。flex-start; 项目位于容器的开头。垂直对齐开始位置 上对齐、 flex-end; 项目位于容器的结尾。垂直对齐结束位置 底对齐

• align-content堆栈（由flex-wrap产生的独立行）多行垂直对齐方式齐

• • stretch; 默认值。项目被拉伸以适应容器。center; 项目位于容器的中心。flex-start; 项目位于容器的开头。flex-end; 项目位于容器的结尾。 space-between; 项目位于各行之间留有空白的容器内。(中间空白)、space-around 项目位于各行之前、之间、之后都留有空白的容器内。(空白包裹项目)

  • 必须设置以下属性才会起作用。对父元素设置自由盒属性display:flex；设置排列方式为横向排列flex-direction:row；设置换行flex-wrap:wrap;

• align-self自己的对齐方式；

• justify-content调整主轴对齐（水平对齐）

• order控制子项目的排列顺序：用整数值来定义排列顺序，数值小的排在前面。可以为负值。 默认值是 0

flex布局博客：Flex 布局教程：语法篇 - 阮一峰的网络日志

2D/3D转换：

transform：

1.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值

2.移动 translate(x, y) 可以改变元素的位置，x、y可为负值；

x 在水平方向移动。

y 在垂直方向移动。

3.旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；

过渡(transition)：

transition:param1 param2

param1 要过渡的属性

param2 过渡的时间.

transition-property设置过渡属性

transition-duration设置过渡时间

transition-timing-function设置过渡速度 用来控制速度linear(匀速)

ease-in ( 加速)

transition-delay设置过渡延时 超过时间后执行动画.

  详细教程CSS 教程 (w3school.com.cn)