您现在的位置是：首页 > 学无止境 > web后端|数据库 网站首页学无止境

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%;