CSS3知识总结

transform

rorate（旋转）

deg为旋转单位，意思为度。若edg为正数，则顺时针旋转；若deg为负数，则逆时针旋转

scale (缩放)

eg: transform:scale(0.5) 只有一个参数，则水平方向和竖直方向同时缩放该倍数
transform:scale(0.5,2) 有两个参数，则前面为水平方向上放的倍数，后面为竖直方向上放置的倍数

skew (倾斜）

eg：transform：skew（30deg） 只有一个参数时，只表示水平方向的倾斜
eg：transform：skew（30deg，45deg）有两个参数时，前面表示水平方向上的倾斜度数，后面表示竖直方向的倾斜度数

translate(移动）

eg：transform：translate（15px） 只有一个参数时，表示水平方向上移动的距离
transform：translate（15px ，20px）有两个参数时，第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离

border-缩写属性

设置的属性分别（按顺序）：border-width, border-style,和border-color.

所有边框的某一样式：
border-color:#fff red green blue; 设置一个元素的四个边框颜色。
border-radius:3px 6px 3px 3px;设置圆角
border-style:dotted solid double dashed;设置一个元素的四个边框的样式。
border-width:thin medium thick 10px;设置一个元素的四个边框的宽度

box-show 属性值分析

（10px,10px,20px,30px，颜色）
第一个表示阴影的水平位置为右移10px
第二个表示垂直位置为下移10px
第三个表示阴影的模糊程度blur
第四个表示阴影半径的意思
最后的表示阴影颜色值

justify-content

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

align-item

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

display属性

display:block    block元素自占一行
display:inline    inline元素是各种元素排满一行才换行(设置width和height无效）
display:inline-block  行内块元素

让块元素水平居中的方法

1.margin-left: auto;margin-left: auto;
2.margin:auto;
3.margin:0 auto;

行内元素或者行内块元素水平居中给其父元素增添text-align:center即可