CSS3--一些属性

1.flex-direction

调整主轴方向（默认为水平方向）包括row、column、row-reverse、column-reverse

 

2.justify-content

主轴方向对齐，可以调整元素在主轴方向上的对齐方式，包括flex-start、flex-end、center、space-around、space-between几种方式

 

3.align-items

调整侧轴方向对齐方式，包括flex-start、flex-end、center、baseline、stretch

 

4.flex-wrap

控制是否换行，包括wrap、nowrap

 

5.align-content

堆栈排列，可对应用flex-wrap: wrap后产生的换行进行控制，包括flex-start、flex-end、center、space-between、space-around、stretch

 

6.flex-flow

flex-direction和flex-wrap的简写形式（flex-flow: column wrap）

 

7.flex

控制子元素伸缩比例

 

8.align-self

同align-items可覆盖父元素设置的algin-items，包括flex-start、flex-end、center、baseline、stretch

 

9.order

控制子元素的顺序

 

10.rotate

通过 rotate() 方法，元素可以实现旋转效果，允许负值，元素将逆时针旋转。

使用方法如：transform: rotate(45deg)、transform: rotate(-90deg)

 

11.scale

通过 scale() 方法，可以更改元素的尺寸，可以分别调整x和y两个方向的大小

使用方法如：transform: scale(x, y)

 

12.translate

通过 translate() 方法，可以使元素从其当前位置移动，通过设置水平(x轴)和垂直(y轴)距离实现

使用方法如：transform: translate(x, y)

 

13.rotateX/Y/Z

通过 rotateX()、rotateY()、rotateZ()可以实现X、Y、Z轴上的旋转

使用方法如：transform: rotateX(45deg)、transform: rotateY(90deg)、transform: rotateX(45deg)

14.在CSS3背景属性中，background-size和background-origin要保持一致。
15.background-clip是用来确定背景区域为内容部分，不包含padding和border部分；background-origin是用来设置背景图的定位原点，默认为padding-box。
15.伸缩布局：先设定这个盒子为display：flex；再设定属性来确定子盒子的布局方式。

16.多列布局：

            -webkit-column-span:4；    列数
            -weblit-column-width:400px；    列宽
            -webkit-column-gap:60px；    列与列之间的宽度
            -webkit-column-rule:2px solid #CCC；    列之间的线
            -weblit-column-span:all；    留出标题
  当列宽*列数大于盒子总宽，会自动调整列数。

17.根据屏幕大小显示内容

<style>
   @media screen and (max-width:600px) {
      body {
         background-color: blue;
      }
   }

   @media screen and (min-width:900px) {
      body {
         background-color: red;
      }
   }

   @media screen and (min-width:1200px) {
      body {
         background-color: yellow;
      }
   }
</style>

18.将图片全屏显示

html, body {
    height: 100%;
}

19.设置全屏填充

           min-height: 100%;
           min-width: 1024px;
           width: 100%;
           height: auto !important;
           height: 100%;