css总结

css圆角

一、边框圆角
1.圆角定义
定义：圆角是用一段与角的两边相切的圆弧替换原来的角，圆角的大小用圆弧的半径表示。
在网页设计越来越精美的今天，圆角的应用已经越来越广泛。
2.创建圆角的方法
2.1CSS+图片
CSS2圆角一般需要额外的HTML标记和图片，然而其优点也是非常明显的：支持所有主流浏览器，包括IE(6-9),FireFox,Chrome,Opera等。
2.2纯CSS
纯CSS圆角，不需要图片，因此，网站加载速度更快，然而需要额外的HTML标记，并且效果也没有带图片的圆角精美。
圆角圆边效果实现原理，通过设置不同长度的边框border，制造长短紧挨错落有致效果。
2.3JavaScript
JavaScript圆角不需要额外的HTML标记和图片，有现成的代码，一劳永逸。然而对于病毒泛滥的今天，很多用户会禁用JavaScript，对于用户体验至上的网站，如果用户关闭掉JavaScript，自己所有的一切努力也就白费了。
2.4CSS3
随着HTML5/CSS3的到来，CSS3样式的圆角必将成为构建未来网站的趋势。CSS3相对于其它方式，更加容易应用，不需要额外的HTML标记和图片。目前支持CSS3圆角的浏览器包括FireFox,Chrome,Opera,IE9等。
事例：
<p>使用CSS3的radius [ˈrediəs]（半径）指定圆角</p>
p{
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}
3.CSS3 border-radius 属性
语法
border-radius ： none | <length>{1,4}  /  <length>{1,4}
取值
<length>： 定义圆形半径或椭圆的半长轴，半短轴。值为浮点数或者百分数，不可为负值。
border-radius是一种缩写方法。
如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现：
1)border-radius: [ <length>{1,4} ]; //这里只有一个值，那么top-left、top-right、bottom-right、bottom-left四个值相等。
2)border-radius:[ <length>{1,4} ] [ <length>{1,4} ] ; //这里设置两个值，那么top-left等于bottom-right，并且取第一个值；top-right等于bottom-left，并且取第二个值
3)border-radius:[ <length>{1,4} ] [ <length>{1,4} ] [ <length>{1,4} ];//如果有三个值，其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right
4)border-radius:[ <length>{1,4} ] [ <length>{1,4} ] [ <length>{1,4} ] [ <length>{1,4} ];//如果有四个值，其中第一个值是设置top-left;而第二个值是top-right,第三个值bottom-right,第四个值是设置bottom-left
4.CSS3 border-radius - 指定每个圆角的解释
在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：
1)四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
2)三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
3)两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
4)一个值： 四个圆角值相同
CSS3 圆角属性
属性描述
border-radius所有四个边角 border-*-*-radius 属性的缩写
border-top-left-radius定义了左上角的弧度
border-top-right-radius定义了右上角的弧度
border-bottom-right-radius定义了右下角的弧度
border-bottom-left-radius定义了左下角的弧度

5.创建椭圆
div  { border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;}
“/”前是指圆角的水平半径，而“/”后是指圆角的垂直半径。
代码可换成如下：
div {
border-top-left-radius: 10px 20px;
border-top-right-radius: 15px 30px;
border-bottom-right-radius: 20px 10px;
border-bottom-left-radius: 30px 15px;
}
6.各浏览器下的书写格式
1、Mozilla(Firefox, Flock等浏览器)
-moz-border-radius-topleft: //左上角 -moz-border-radius-topright: //右上角 -moz-border-radius-bottomright: //右下角 -moz-border-radius-bottomleft: //左下角 等价于： -moz-border-radius: //简写
2、WebKit (Safari, Chrome等浏览器)
-webkit-border-top-left-radius: //左上角 -webkit-border-top-right-radius: //右上角 -webkit-border-bottom-right-radius: //右下角 -webkit-border-bottom-left-radius: // 左下角 等价于： -webkit-border-radius: //简写
3、Opera浏览器：
border-top-left-radius: //左上角 border-top-right-radius: //右上角 border-bottom-right-radius: //右下角 border-bottom-left-radius: //左下角 等价于： border-radius: //简写
4、Trident (IE)
IE9以下不支持border-radius;IE9下没有私有格式，都是用border-radius，其写法和Opera是一样的。
注意：
1)在 Gecko 中，点状和虚线状圆角边框被渲染为了实线 bug 382721。
2)当表格元素的 border-collapse 为 collapse 时 border-radius 不会生效。
3)旧版本 WebKit 对于多重值的处理有不同。
二、背景
1.background-image
background-image属性用于为一个元素设置一个或者多个背景图像。
图像在绘制时，以z方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像最接近用户。
然后元素的 borders 会在它们之上被绘制，而background-color会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系，需要在CSS属性background-clip 和 background-origin  中定义。
如果一个指定的图像无法被绘制 (比如，设定的URI所表示的文件无法被加载)，浏览器会将此情况等同于其值被设为none。
注意：即使图像是不透明的，背景色在通常情况下并不会被显示，web开发者仍然应该指定background-color属性。如果图像无法被加载—例如，在网络连接断开的情况下—背景色就会被绘制。
2.CSS3 background-image属性
CSS3中可以通过background-image属性添加背景图片。
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。
实例
#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}
可以给不同的图片设置多个不同的属性：
#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
3.CSS3 background-size 属性
background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。
CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。
你指定的大小是相对于父元素的宽度和高度的百分比的大小。
重置背景图像：
div
{
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}
伸展背景图像完全填充内容区域：
div
{
    background:url(img_flwr.gif);
    background-size:100% 100%;
    background-repeat:no-repeat;
}
4.CSS3的background-origin属性
background-origin属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
5.CSS3 多个背景图像
CSS3 允许你在元素上添加多个背景图像。
6.CSS3 background-clip属性
CSS3中background-clip背景剪裁属性是从指定位置开始绘制。
附件：
1.纯CSS圆角案例：
样式：
#divcss5 h1, #divcss5 h2, #divcss5 p{margin:0 10px; letter-spacing:1px;}
#divcss5 h1 {font-size:2.5em; color:#fff;}
#divcss5 h2 {font-size:2em;color:#06a; border:0;}
#divcss5 p {padding-bottom:0.5em;}
#divcss5 h2 {padding-top:0.5em;}
#divcss5 {background: transparent; margin:1em;}
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c;
  border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxcontent {display:block; background:#ccc;
  border:0 solid #08c; border-width:0 1px;}
html代码：
<div id="divcss5">
    <b class="xtop">
        <b class="xb1"></b>
        <b class="xb2"></b>
        <b class="xb3"></b>
        <b class="xb4"></b>
    </b>
    <div class="xboxcontent">
        <p>纯DIV+CSS实现圆角效果</p>
    </div>
    <b class="xbottom">
        <b class="xb4"></b>
        <b class="xb3"></b>
        <b class="xb2"></b>
        <b class="xb1"></b>
    </b>
</div>
2.多背景设置及不透明度
注意星星图片部分透明且位于猫图片上方.
HTML 内容
<div>
    <p class="catsandstars">
        This paragraph is full of cats<br />and stars.
    </p>
    <p>This paragraph is not.</p>
    <p class="catsandstars">
        Here are more cats for you.<br />Look at them!
    </p>
    <p>And no more.</p>
</div>
CSS 内容
pre, p {
    font-size: 1.5em;
    color: #FE7F88;
    background-color: transparent;
}
div {
  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}
p {
  background-image: none;
}
.catsandstars {
  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-color: transparent;
}

css2d转换

一、CSS3 2D转换
CSS3 转换是指对元素进行移动、缩放、转动、拉长或拉伸。
1.2D转换方法
函数描述
translate(x,y)
[trænsˈlet]定义 2D 转换，沿着 X 和 Y 轴移动元素。
rotate(angle)
[ˈroʊteɪt]定义 2D 旋转，在参数中规定角度angle
 [ˈæŋɡəl]。
scale(x,y)
[skel]定义 2D 缩放转换，改变元素的宽度和高度。
skew(x-angle,y-angle)
[skju]定义 2D 倾斜转换，沿着 X 和 Y 轴。
matrix(n,n,n,n,n,n)
[ˈmetrɪks]定义 2D 转换，使用六个值的矩阵。
translateX(n)定义 2D 转换，沿着 X 轴移动元素。
translateY(n)定义 2D 转换，沿着 Y 轴移动元素。
scaleX(n)定义 2D 缩放转换，改变元素的宽度。
scaleY(n)定义 2D 缩放转换，改变元素的高度。
skewX(angle)定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)定义 2D 倾斜转换，沿着 Y 轴。
2.translate() 方法
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
transform [trænsˈfɔ:rm]：变换
3.rotate() 方法
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
transform:rotate(30deg);
rotate值（30deg）元素顺时针旋转30度。
4.scale() 方法
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
transform: scale(2,3);
scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。
5.skew() 方法
语法
transform:skew(<angle> [,<angle>]);
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
transform: skew(30deg,20deg);
skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。
6.matrix() 方法
matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
利用matrix()方法旋转div元素30°
课堂练习，做一个钟表，要求有时针和分针，分开旋转。

知识拓展：
matrix() 方法：
无论是旋转还是拉伸……，本质上都是应用的matrix()方法实现的，只是类似于transform:rotate这种表现形式，我们更容易记忆与上手。
Matrix是矩阵的意思，何为矩阵？矩阵可以理解为方阵，只不过，平时方阵里面站的是人，矩阵中是数值。
transform旋转可以发现，其默认是绕着中心点旋转的，而这个中心点就是transform-origin属性对应的点，也是所有矩阵计算的一个重要依据点。

1.敲黑板，重点来了！
偏移
CSS3 transform的matrix()方法写法如下：
transform: matrix(a,b,c,d,e,f);
6个参数，太吓人了，都是什么东西呢？想要理解，我们需要懂线性代数知识。纳尼！？？
我们不是来学数学的！那就跳过！
我们只要记住结论！
偏移就是：
transform: matrix(a,b,c,d(是什么都没关系), e：水平偏移距离, f：垂直偏移距离);
举个栗子：
transform: matrix(1, 0, 0, 1, 50, 50);
形状不变，偏移50px；离开顶部50，离开左边距50；
2.缩放(scale)难度加深
偏移只要关心最后两个参数，这个缩放也是只要关心两个参数。哪两个呢？
聪明如你，应该已经知道了，因为上面举国栗子：
transform: matrix(1, 0, 0, 1, 30, 30);
               a , b, c, d , e , f
例子：
div{width: 100px;
height: 100px;
background-color: rgba(255,0,0,0.5);}
div + div{transform: matrix(1, 0, 0, 1, 50, 50);
position: absolute;
top: 8px;}
它~~~已经无意识的出卖了队友，它是意大利军队！
两个div是一样大的！！1：1的比例！
恭喜你，答对了！他就是a和d，那两个1。
其中，第一个（也就是a）缩放x轴，第二个（d）缩放y轴。
3.旋转(rotate)
哈哈……旋转更高级，技术要求高，代数知识要求深。比如，三角函数，了解一下！
方法以及参数使用如下（假设角度为θ）：
matrix(cosθ,sinθ,-sinθ,cosθ,0,0)
比如旋转30°！
transform: matrix(0.866025,0.500000,-0.500000,0.866025,0,0);
我去，记不住！算不明白！
没关系，老铁！咱就简便方法！
rotate(θdeg)这种书写形式要比matrix简单多了，首先记忆简单，其次，无需计算。例如，旋转30°，前者直接：
transform:rotate(30deg);
4.拉伸(skew)
拉伸也用到了三角函数，不过是tanθ，而且，其至于b, c两个参数相关，书写如下（注意y轴倾斜角度在前）：
matrix(1,tan(θy),tan(θx),1,0,0)
拉伸事例：
transform: matrix(1,0.404026,0.466308,1,0,0);
算了，还是用skew() 方法吧。
5.matrix有何用？既然每个效果都有对应的简单方法。
确实，对于一般地交互应用，transform属性默认提供的些方法是足够了。
但是，一些其他的效果，如果transform属性没有提供接口方法，那我们又该怎么办呢？
比方说，“镜像对称效果”！
6.3D变换中的矩阵
3D变换虽然只比2D多了一个D，但是复杂程度不只多了一个。从二维到三维，是从4到9；而在矩阵里头是从3*3变成4*4, 9到16了。
其实，本质上很多东西都与2D一致的，只是复杂度不一样而已。
具体：略！

css2d转换

一、CSS3 3D转换
CSS3 3D转换要求必须设置一个透视点（perspective）来配置 3D 空间，然后定义 2D 元素在空间中的行为。

3D转换属性
属性 描述
transform 向元素应用 2D 或 3D 转换。
transform-origin 允许你改变被转换元素的位置。
transform-style 规定被嵌套元素如何在 3D 空间中显示。
perspective 规定 3D 元素的透视效果。
perspective-origin 规定 3D 元素的底部位置。
backface-visibility 定义元素在不面对屏幕时是否可见。

1.transform属性
3D转换方法
函数 描述
matrix3d(n,n,n,n,n,n, 定义 3D 转换，使用 16 个值的 4x4 矩阵。
n,n,n,n,n,n,n,n,n,n)
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
1)rotateX() 方法
rotateX()方法，围绕其在一个给定度数X轴旋转的元素。
transform: rotateX(120deg); 字体会反转，水平是X轴
  -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */

transform: rotateX(90deg); 会消失

transform: rotateX(45deg); 表现形式是缩小

2)rotateY() 方法
rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。
transform: rotateY(130deg); 效果类似X轴，只是会延垂直轴做改变

其他略。
3)rotateZ() 方法
transform:rotateZ(45deg); 效果就是旋转，Z轴是穿过中心点的线

其他略。
4)rotate() 方法
公式：rotate3d(x,y,z,angle)
x,y,z的值为0或1或，0：不旋转，1：旋转（只要值不为零，都会起作用。）
注意：当z的值为-1时，效果是逆时针旋转，正值为顺时针旋转。
angle：旋转角度
transform:rotate3D(0,1,1,100deg);

5)scale3D
(1)scaleX
transform:scaleX(2);  X轴缩放

scaleY略。
(2)scaleZ
transform:scaleZ(2);

(3)scale3d(x,y,z)
transform:scale3d(1.2,1.2,3);

6)translate3d(x,y,z)
transform:translate3D(45px,45px,45px); 位移

7)矩阵matrix3d
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
3d变形函数位移、旋转和缩放都是通过矩阵设置不同的参数而实现的。相比于2d矩阵martrix()的6个参数而言，3d矩阵matrix3d却有16个参数。其变形规则与2dmatrix()类似，只不过是从3*3矩阵，变成了4*4矩阵。
它可以用来设置多个效果同时起作用，具体详情，见最后只是扩充部分。
2.transform-origin设置旋转元素的基点位置
transform: rotateZ(45deg);  /*需要配合使用*/
transform-origin: 50% 50%;  /*50% 50% 是中心点，0 0 是原点 也可以使用px*/
3.transform-style
透视是transform变形3D中最重要的内容。如果不设置透视，元素的3D变形效果将无法实现。
transform-style值               描述
flat              表示所有子元素在2D平面呈现。
preserve-3d   表示所有子元素在3D空间中呈现。
事例：
父类css：transform: rotateY(40deg);
transform-style: preserve-3d; /*不能设置在子类，否则不起作用*/
子类css：transform: rotateX(45deg);

4.perspective(n) [pərˈspektɪv] 透视距离
透视距离perspective是指观察者沿着平行于z轴的视线与屏幕之间的距离，简称视距。

perspective
　　值: none | <length>
　　初始值: none
　　应用于: 非inline元素(包括block、inline-block、table-cell等)
　　继承性: 无
注意：
透视perspective不可为0和负数，因为观察者与屏幕距离为0时或者在屏幕背面时是不可以观察到被透视元素的正面的。
透视perspective不可取百分比，因为百分比需要相对的元素，但z轴没有可相对的元素尺寸。
父类css：
perspective:200px;
-webkit-perspective:200px; /* Safari and Chrome */
子类css：
transform: rotateX(80deg);
效果：

父类css：
perspective:500px;
-webkit-perspective:500px; /* Safari and Chrome */
子类css：
transform: rotateX(80deg);
效果：

总结：
1)一般地，物体离得越远，显得越小。反映在perspective属性上，就是该属性值越大，元素的3d效果越不明显。
2)设置透视perspective属性的元素就是被透视元素。一般地，该属性只能设置在变形元素的父级或祖先级。因为浏览器会为其子级的变形产生透视效果，但并不会为其自身产生透视效果。
5.perspective-origin ：3D元素的基数位置
透视原点perspective-origin是指观察者的位置。
一般地，观察者位于与屏幕平行的另一个平面上，观察者始终是与屏幕垂直的。
观察者的活动区域是被观察元素的盒模型区域。

perspective-origin
值: x轴 y轴
初始值: 50% 50%（注意：当只有一个值时，默认第二个值为center）
应用于: 非inline元素(包括block、inline-block、table、table-cell等)
继承性: 无
x轴: left | right | center | <percentage> | <length>
y轴: top | bottom | center | <percentage> | <length>
x轴数值表示在x轴上离0点(元素边框外侧左上角)的偏移量；y轴数值表示在y轴上离0点的偏移量
父类css：
perspective:200;
-webkit-perspective:200; /* Safari and Chrome */
perspective-origin: 20% 20%;
子类css：
transform: rotateX(80deg);
效果：

语法
perspective-origin: x-axis   y-axis;
值描述
x-axi定义该视图在 x 轴上的位置。默认值：50%。
可能的值：
left
center
right
length
%，x轴的百分比相对于被透视元素的宽度和(width+横向padding+横向border)
y-axis定义该视图在 y 轴上的位置。默认值：50%。
可能的值：
top
center
bottom
length
%，y轴的百分比相对于被透视元素的高度和(height+纵向padding+纵向border)
6.backface-visibility 属性
backface-visibility 属性定义当元素不面向屏幕时是否可见。
值描述
visible背面是可见的。
hidden背面是不可见的。
注意：
倾斜skew()是二维变形，不能在三维空间变形，元素可能会在x轴和y轴倾斜，但绝对不能在z轴倾斜。

知识扩充：
矩阵matrix3d
　　3d变形函数位移、旋转和缩放都是通过矩阵设置不同的参数而实现的。相比于2d矩阵martrix()的6个参数而言，3d矩阵matrix3d却有16个参数。其变形规则与2dmatrix()类似，只不过是从3*3矩阵，变成了4*4矩阵。
matrix3d(a,b,c,0,d,e,f,0,g,h,i,0,j,k,l,1)

1.3d位移
3d位移函数主要包括traslateZ()和translate3d()
translate3d(x,y,z)
注意：其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；
z只能设置长度值。
traslateZ(z)相当于translate3d(0,0,z)
3d位移函数相当于matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,位移x,位移y,位移z,1)
知识点：常用-webkit-transform: translateZ(0);开启硬件加速
2.3d缩放
3d缩放函数主要包括scaleZ()和scale3d()
scale3d(x,y,z)
默认值为scale3d(1,1,1)，当参数为负值时，先翻转再缩放
scaleZ(z)相当于scale3d(1,1,z)。
3d缩放函数相当于matrix3d(缩放x,0,0,0,0,缩放y,0,0,0,0,缩放z,0,0,0,0,1)
注意：scaleZ()和scale3d()单独使用时没有任何效果。
举例：
transform: translateZ(-500px);
transform: scaleZ(5) translateZ(-100px);
结论：transform: scaleZ(5) translateZ(-100px)和transform: translateZ(-500px)是等价的
3.3d旋转
3d旋转函数主要包括rotateX()、rotateY()、rotateZ()、rotate3d()
rotate3d(x,y,z,Ndeg)
x、y、z分别用来描述围绕x、y、z轴旋转的矢量值。最终变形元素沿着由(0,0,0)和(x,y,z)这两个点构成的直线为轴，进行旋转。当N为正数时，元素进行顺时针旋转；当N为负数时，元素进行逆时针旋转。
rotateX(Ndeg)相当于rotate3d(1,0,0,Ndeg)
rotateY(Ndeg)相当于rotate3d(0,1,0,Ndeg)
rotateZ(Ndeg)相当于rotate3d(0,0,1,Ndeg)
注意：safari浏览器不支持keyframes中改变rotate3d()。
3维旋转稍微复杂，因为旋转的轴有可能不是标准的x,y,z轴了，而可能是任何一个向量。一般可用欧拉角和四元数表示旋转，而欧拉旋转由于存在“万向节死锁”问题，所以最好还是用四元数来表示。
四元数，即是一个复数：p = a i +b j +c k+d，关于四元数比较难解释，可以看《理解四元数》一书。幸好，四元数变换也有变换矩阵：

其中 w=1−cos(θ)w=1−cos(θ)
使用上面的变换矩阵可以实现在坐标原点绕任意轴的旋转，所以，变换完要做一次逆变换，将图形移回原来的位置。
4.透视函数
透视属性perspective已经介绍过，但透视属性应用在变形元素的父级或祖先级。而透视函数perspective()是transform变形函数的一个属性值，应用于变形元素本身。
perspective(<length>)
透视函数perspective(<length>)的参数只能是长度值，长度值只能是正数
注意：
1)由于透视原点perspective-origin只能设置在设置了perspective透视属性的元素。若为元素设置透视函数perspective()，则透视原点不起使用，观察者使用默认位置，即元素中心点对应的平面上。
2)由于transform属性是从前向后的顺序解析属性值的，所以一定要把perspective()函数写在其他变形函数前面，否则将没有透视效果。
5.变形原点
2d变形原点由于没有z轴，所以z轴的值默认为0。而3d变形原点的z轴是一个可以设置的变量
transform-origin
　　值: x轴 y轴 z轴
　　初始值: 50% 50%
　　应用于: 非inline元素(包括block、inline-block、table、table-cell等)
　　继承性: 无
x轴: left | center | right | <length> | <percentage>
y轴: top | center | bottom | <length> | <percentage>
z轴: <length>
　　对于x轴和y轴来说，可以设置关键字和百分比，分别相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值
注意：IE9-浏览器不支持，safari3.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加前缀，其他更高版本浏览器可使用标准写法。
//变形元素默认样式是 transform:rotate3d(1,1,1,45deg);
6.背景可见
元素的背面默认是可见的。但有时需要让元素背面不可见，这就要用到属性backface-visibility
backface-visibility: 设置元素背面是否可见
visible:可见，默认
hidden:不可见
//设置一个元素包含两个半透明子元素绝对定位重叠，内容分别为A和B，来表示一个元素的正面和背面
注意：若一个元素覆盖于另一个元素上，不仅仅是正面覆盖，背面也是覆盖的。
7.变形风格
transform-style: flat | preserve-3d
变形风格transform-style允许变形元素及其子元素在3d空间中呈现。变形风格有两个值。flat是默认值，表示2d平面；而perserve-3d表示3d空间
注意：当设置了overflow:非visible或clip:非auto时，transform-style:preserve-3d失效。
终于，到此结束，太复杂了，能掌握是技能提升，不能掌握理论，可掌握各方法的使用即可，不必强求理解。

css过渡

一、CSS3 过渡
1.CSS3 过渡原理
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
CSS3中，为我们添加了过渡效果，可以让元素从一种样式转变到另一个的样式，无需使用Flash动画或JavaScript。
要实现这一点，必须规定两项内容：
A.指定要添加效果的CSS属性
B.指定效果的持续时间。
2.过渡的属性
属性 描述
transition [trænˈzɪʃən] 简写属性，用于直接设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。
3.transition-property属性[ˈprɑ:pərti]
transition-property 指定应用过渡属性的名称。
div{background-color: orange;transition-property: top;}
div:hover{top: 200px;}
效果：

问题：当鼠标移动上去后，抖动！！
因为：div下去了，所以鼠标就变为不悬浮在其上了。
解决办法，将鼠标悬浮效果加到他的父类身上。
4.transition-duration [duˈreɪʃn]过渡时间
事例：
.orange{
filter:alpha(Opacity=60); /*透明度*/
-moz-opacity:0.6; /*透明度*/
opacity: 0.6;  /*透明度*/
top:0;
background-color: orange;
transition-property: top;
transition-duration: 2s;
}
body > div:hover .orange{
top: 200px;
}
结论：可以用来做缓慢出现的显示隐藏菜单栏。
注意：
1）transition-duration: 2s;可以添加到hover内，但是这样做，图像还原的时候，会变成瞬间还原，就像页面重新加载一般，不协调。
2）top:0;一定要在设置，否则过渡时间无效，因为没有数值可以计算过渡。
5.transition-timing-function
transition-timing-function属性指定切换效果的速度。
语法
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
值 描述
linear [ˈlɪniər] 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 [ˈkjubɪk]
ease [iz] 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
cubic-bezier即为贝兹曲线中的绘制方法。
如图：

图上有四点，P0-3，其中P0、P3是默认的点，对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。cubic-bezier(x1, y1, x2, y2) 为自定义，x1,x2,y1,y2的值范围在[0, 1]。
6.transition-delay
transition-delay 属性指定何时将开始切换效果。
transition-delay值是指以秒为单位（S）或毫秒（ms）。
例如，等待2秒前切换效果开始：
transition-delay: 2s;
-webkit-transition-delay: 2s; /* Safari */
课堂练习：
如何让菜单栏在显示的时候等100ms，而在隐藏的时候不用等。

css动画

1.CSS3动画是什么？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。
animation（动画）属性类似于transition（过渡），他们都是随着时间改变元素的属性值，但是他们又完全不同。
animation与transition的区别：
1)过渡需要事件触发，才会完成改变其CSS的属性，而动画不需要事件触发。
2)过渡只有一组（两个：开始-结束） 关键帧，动画可以设置多个。
要创建CSS3动画，我们必须得了解@keyframes[freɪmz]规则。
2.@keyframes属性
@keyframes规则是用来创建动画。
1)语法
@keyframes animationname {
keyframes-selector {css-styles;}}
值 说明
animationname 必需的。定义animation的名称。
keyframes-selector 必需的。动画持续时间的百分比。
合法值：0-100%
from (和0%相同)
to (和100%相同)
注意： 您可以用一个动画keyframes-selectors。
css-styles 必需的。一个或多个合法的CSS样式属性
创建动画是通过逐步改变从一个CSS样式设定到另一个。
在动画过程中，可以更改CSS样式的设定多次。
指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。
0％是开头动画，100％是当动画完成。
为了获得最佳的浏览器支持，应该始终定义为0％和100％的选择器。
注意: 使用animation属性来控制动画的外观，还需使用选择器绑定动画。
事例：
div{
width:100px; height:100px; background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */}
@keyframes mymove{
0%   {left:0px;}
25%  {left:200px;}
75%  {left:50px}
100% {left:100px;}  }
@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {left:0px;}
25%  {left:200px;}
75%  {left:50px}
100% {left:100px;}  }
3.CSS3 animation-name 属性
animation-name为 @keyframes 动画指定一个名称。
值                           说明
keyframename 指定要绑定到选择器的关键帧的名称
none         指定有没有动画（可用于覆盖从级联的动画）
4.CSS3 animation-duration 属性
animation-duration属性定义动画完成一个周期需要多少秒或毫秒。
5.CSS3 animation-timing-function 属性
animation-timing-function指定动画将如何完成一个周期。
animation-timing-function使用的数学函数，称为三次贝塞尔曲线，速度曲线。使用此函数，您可以使用您自己的值，或使用预先定义的值之一：
值 描述
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
速度曲线用于使变化更为平滑。
6.CSS3 animation-fill-mode 属性
animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。
值 描述
none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。
both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。

7.animation-delay属性
animation-delay 属性定义动画什么时候开始，默认是 0。
animation-delay 值单位可以是秒（s）或毫秒（ms）。
提示: 允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。
8.animation-iteration-count 属性
mation-iteration-count属性定义动画应该播放多少次，默认是 1。
值                 描述
n       一个数字，定义应该播放多少次动画
infinite 指定动画应该播放无限次（永远）
9.animation-direction 属性
animation-direction 属性定义是否循环交替反向播放动画。
注意：如果动画被设置为只播放一次，该属性将不起作用。
值 描述
normal 默认值。动画按正常播放。
reverse 动画反向播放。
alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。
10.animation-play-state 属性
animation--play-state属性指定动画是否正在运行或已暂停。
注意：在JavaScript中使用此属性在一个周期中暂停动画。
值             描述
paused   指定暂停动画
running   指定正在运行的动画

css弹性盒子

1.CSS3 弹性盒子(Flex Box)是什么？
1)弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box  [ˈfleksəbl]  或 flexbox[fleks] [bɒks]），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
为什么引入弹性盒子？
长久以来，唯一可用的且有稳定的跨浏览器兼容性的能用来构建 CSS 布局的工具只有 float（浮动） 和 position（定位）。它们是既可行，表现也不错的布局方案，但是在某些布局方面它们就有限制，并且难以实现。
以下简单的布局要求是难以或不可能用这样的工具（ floats 和 positioning）方便且灵活的实现的：
在父内容里面垂直居中一个块内容。
使容器的所有子项占用等量的可用宽度/高度，而不管页面高度/宽度如何调整都可用。
使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。
能解决以上问题的，或许可以用table表格来实现，但是受限于表格的内容形式，它的诸多限制和不合理，在布局世界几乎被淘汰。
2)弹性盒布局概念
在定义方面来说，弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。
块级布局更侧重于垂直方向、行内布局更侧重于水平方向，与此相对的，弹性盒子布局算法是方向无关的。虽然块级布局对于单独一个页面来说是行之有效的，但其仍缺乏足够的定义来支持那些必须随用户代理(user agent)不同或设备方向从水平转为垂直等各种变化而变换方向、调整大小、拉伸、收缩的应用程序组件。
弹性盒子布局主要适用于应用程序的组件及小规模的布局，而（新兴的）栅格布局则针对大规模的布局。这二者都是 CSS 工作组为在不同用户代理、不同书写模式和其他灵活性要求下的网页应用程序有更好的互操作性而做出的更广泛的努力的一部分。
示例：

Html：
<header>
  <h2>这是弹性盒子头部</h2>
</header>
<section><!-- 这是主体内容区域 -->
  <article>
    这是内容章节区域<br/>
    这是内容章节区域<br/>
    这是内容章节区域<br/>
  </article><!-- 这是内容章节区域 -->
  <article>
    这是内容章节区域<br/>
    这是内容章节区域<br/>
    这是内容章节区域<br/>
  </article>
  <article>
    这是内容章节区域<br/>
    这是内容章节区域<br/>
    这是内容章节区域<br/>
  </article>
</section>
css：
首先，我们需要确定将哪些元素将设置为弹性的盒子。然后我们需要给这些 弹性（flexible） 元素的父元素 的display 设置一个特定值。
在本例中，我们想要设置 <article> 元素为弹性的，因此我们给 <section>（变成了 flex 容器）设置 display：
section{
  display: flex;
}
2.flex 模型说明
关于弹性盒子的讨论已经从诸如水平/行内轴和垂直/块级轴这些术语中解放出来，与此同时，需要有一套新的术语来正确描述此模型。
下图是一个 flex-direction 属性为 row的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。

当元素表现为 flex 框时，它们沿着两个轴来布局：
主轴（main axis [ˈæksɪs]）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
交叉轴（cross axis）[krɔ:s]是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
设置了 display: flex 的父元素（在本例中是 <section>）被称之为 flex 容器（flex container  [kənˈtenɚ]）。
在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）（本例中是 <article> 元素）。
3.定义一个弹性盒子
需按以下方式设置 display 属性：
display : flex  或者  display : inline-flex
这样做将元素定义为弹性容器，其子元素则成为弹性项目。值 flex 使弹性容器成为块级元素。值 inline-flex 使弹性容器成为单个不可分的行内级元素。
注意：
i.厂商前缀标记会附加给 display 属性值，而不是加给 display 属性本身。例如：display : -webkit-flex。
ii.弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
iii.弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
4.弹性盒子属性
1)flex-direction
flex-direction 属性指定了弹性子元素在父容器中的位置。
语法
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
(1)row：横向从左到右排列（左对齐），默认的排列方式。
(2)row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。[rɪˈvɜ:rs]
(3)column：纵向排列。[ˈkɑ:ləm]
(4)column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
2)justify-content 属性
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
语法：
justify-content: flex-start | flex-end | center | space-between | space-around
justify-content属性值:
(1)flex-start：弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
(2)flex-end：弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
(3)center：弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
(4)space-between：弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
(5)space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
效果图如下：

3)align-items 属性
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
语法
align-items: flex-start | flex-end | center | baseline | stretch
align-items属性值解析:
(1)flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
(2)flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
(3)center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
(4)baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
(5)stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
4)flex-wrap 属性
flex-wrap 属性用于指定弹性盒子的子元素换行方式。
语法
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
flex-wrap 属性值解析:
(1)nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
(2)wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
(3)wrap-reverse -反转 wrap 排列。
5)align-content 属性
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
语法
align-content: flex-start | flex-end | center | space-between | space-around | stretch
align-content属性值解析:
(1)stretch - 默认。各行将会伸展以占用剩余的空间。
(2)flex-start - 各行向弹性盒容器的起始位置堆叠。
(3)flex-end - 各行向弹性盒容器的结束位置堆叠。
(4)center -各行向弹性盒容器的中间位置堆叠。
(5)space-between -各行在弹性盒容器中平均分布。
(6)space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
5.弹性子元素属性
1)order排序
order: <integer> [ˈɪntɪdʒɚ]整数
用整数值来定义排列顺序，数值小的排在前面。可以为负值。
2)align-self
align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
语法
align-self: auto | flex-start | flex-end | center | baseline | stretch
align-self 属性值解析:
(1)auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
(2)flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
(3)flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
(4)center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
(5)baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
(6)stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
3)flex
flex 属性用于指定弹性子元素如何分配空间。
语法
flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
flex 属性值解析:
(1)auto: 计算值为 1 1 auto
(2)initial: 计算值为 0 1 auto
(3)none：计算值为 0 0 auto
(4)inherit：从父元素继承
(5)[ flex-grow ]：定义弹性盒子元素的扩展比率。
(6)[ flex-shrink ]：定义弹性盒子元素的收缩比率。
(7)[ flex-basis ]：定义弹性盒子元素的默认基准值。
4)其他一些使用方法
对齐
设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。
例如，在第一个弹性子元素上设置了 margin-right: auto; 。 它将剩余的空间放置在元素的右侧。

完美的居中
使用弹性盒子，居中变的很简单，只想要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中。
6.务必注意：
描述弹性项目如何排布的算法有时会极其棘手。在使用弹性盒子进行设计时，请考虑以下几点，以免碰到不好的意料外状况。

弹性盒子的排布与书写模式是一致的，这意味着排布的主轴起点和主轴终点根据的是开始与结束的位置。

侧轴起点与侧轴终点依赖于开始或前面（before）的位置定义，而这个“前面”依赖于 direction 的值。

只要 break- 属性的设置值允许，在弹性框布局中是可以存在分页的。CSS3 中的 break-after、break-before 和 break-inside，以及 CSS 2.1 中的 page-break-before、page-break-after 和 page-break-inside 属性在弹性容器上、弹性项目上和弹性项目内均可以使用。

如果浏览器缺少 CSS 阴影，则该网站可能仍然可用，知识缺少阴影效果。 但是假如浏览器不支持 弹性盒子功能就会完全打破布局，使其不可用。

附：
1.弹性盒布局词汇认识：
1)弹性容器(Flex container)
包含着弹性项目的父元素。通过设置 display 属性的值为 flex 或 inline-flex 来定义弹性容器。
2)弹性项目(Flex item)
弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。
3)轴(Axis) [ˈæksɪs]
每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。
flex-direction 确立主轴，定义了主轴的方向(正方向或反方向)，指定了内部元素是如何在 flex 容器中布局的。
justify-content定义了在当前行上，弹性项目沿主轴如何排布。[ˈdʒʌstəˌfaɪ] 定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。
align-items 定义了在当前行上，弹性项目沿侧轴默认如何排布。[əˈlaɪn]
align-self 定义了单个弹性项目在侧轴上应当如何对齐，这个定义会覆盖由 align-items 所确立的默认值。
4)方向(Direction)
弹性容器的主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start) [krɔ:s] /侧轴终点(cross end)描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中，由 writing-mode [ˈraɪtɪŋ] [moʊd]确立的方向（从左到右、从右到左，等等）。
order [ˈɔ:rdə(r)]属性将元素与序号关联起来，以此决定哪些元素先出现。
flex-flow 属性是 flex-direction 和 flex-wrap [ræp]属性的简写，决定弹性项目如何排布。
5)行(Line)
根据 flex-wrap 属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。
6)尺寸(Dimension)
根据弹性容器的主轴与侧轴，弹性项目的宽和高中，对应主轴的称为主轴尺寸(main size) ，对应侧轴的称为 侧轴尺寸(cross size)。
min-height 与 min-width 属性初始值将为 0。
flex 属性是 flex-grow [groʊ]、flex-shrink [ʃrɪŋk]和 flex-basis [ˈbesɪs]属性的简写，描述弹性项目的整体的伸缩性。
常用属性：
属性 描述
display 指定 HTML 元素盒子类型。
flex-direction 指定了弹性容器中子元素的排列方式
justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap 设置弹性盒子的子元素超出父容器时是否换行。
align-content 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow flex-direction 和 flex-wrap 的简写
order 设置弹性盒子的子元素排列顺序。
align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。
flex 设置弹性盒子的子元素如何分配空间。

css多媒体查询

1.@media 查询
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果我们需要设置设计响应式的页面，@media 是非常有用的。
在我们重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
1.1@media CSS 语法
@media mediatype and|not|only (media feature [ˈfitʃɚ]) {
    CSS-Code;
}
也可以对不同的媒体使用不同 stylesheets :
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
1.2关键字
and：用来确定条件。
例如：screen and (max-width: 800px)
浏览器宽度小于等于800px时应用一个效果。
not：该关键字是用来排除某种制定的媒体类型。
only：用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。
其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读样式，因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。
1.3媒体类型
媒体类型允许指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。
一些 CSS 属性只设计了某些媒体。例如 voice-family 属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如， font-size 属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，sans-serif 字体比较适合在屏幕上阅读，而 serif 字体更容易在纸上阅读。
@media 规则允许在相同样式表为不同媒体设置不同的样式。
举例：
@media screen
{
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
    p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
    p.test {font-weight:bold;}
}
媒体类型
值              描述
all       用于所有设备
screen      用于电脑屏幕，平板电脑，智能手机等。
print     用于打印机和打印预览
speech   应用于屏幕阅读器等发声设备
注意：媒体类型名称不区分大小写。
2.媒体功能
值 描述
aspect-ratio
[ˈæspɛkt] [ˈreɪʃioʊ] 定义输出设备中的页面可见区域宽度与高度的比率
color 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio
[dɪˈvaɪs] [ˈæspɛkt] 定义输出设备的屏幕可见宽度与高度的比率。
device-height 定义输出设备的屏幕可见高度。
device-width 定义输出设备的屏幕可见宽度。
grid [ɡrɪd] 用来查询输出设备是否使用栅格或点阵。
height 定义输出设备中的页面可见区域高度。
max-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
max-color 定义输出设备每一组彩色原件的最大个数。
max-color-index 定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height 定义输出设备的屏幕可见的最大高度。
max-device-width 定义输出设备的屏幕最大可见宽度。
max-height 定义输出设备中的页面最大可见区域高度。
max-monochrome
[ˈmɑ:nəkroʊm] 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution
[ˌrɛzəˈluʃən] 定义设备的最大分辨率。
max-width 定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio 定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color 定义输出设备每一组彩色原件的最小个数。
min-color-index 定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width 定义输出设备的屏幕最小可见宽度。
min-device-height 定义输出设备的屏幕的最小可见高度。
min-height 定义输出设备中的页面最小可见区域高度。
min-monochrome 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution 定义设备的最小分辨率。
min-width 定义输出设备中的页面最小可见区域宽度。
monochrome 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation
[ˌɔriɛnˈteʃən] 定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan [skæn] 定义电视类设备的扫描工序。
width 定义输出设备中的页面可见区域宽度。

3.css中的@media用法总结
3.1head标签中引入
语法： @media mediatype and | not | only (media feature) { css-code; }
也可以针对不同的媒体使用不同的stylesheets:
<!--<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">-->
<link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)">
上面将浏览器宽度小于等于800px时，应用 styleA 。
3.2css中引入
@media screen and (max-device-width:960px){
    body{background:red;}
}
上面是在设备屏幕宽度小于等于960px时应用css样式。
混用：
@media screen and (min-width:960px) and (max-width:1200px){
    body{background:yellow;}
}
表示浏览器宽度大于等于960px且小于等于1200px时使用样式。
4.响应式布局应用
4.1屏幕尺寸
我们看看min-width来确认分别是768、992、1200。当然了过去也有些设备宽度是600 480的，哪些小分辨率的我们都归类为小于767的。为什么是小于767而不是768呢，那是因为在css中@media (min-width: 768px)表示最小是768也就是>=768，这里有等于，所以我们判断更小的设备用@media (max-width: 767px)这边表示<=767就不会有冲突了。
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

注意：
设定顺序，如果你把@media (min-width: 768px)写在了最下面那么就是错误的！
因为如果是1440,由于1440>768那么你的1200就会失效。
所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面。
@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }
4.2高级的混合应用
@media screen and (min-width:1200px){}
@media screen and (min-width: 960px) and (max-width: 1199px) {  }
@media screen and (min-width: 768px) and (max-width: 959px) {  }
@media only screen and (min-width: 480px) and (max-width: 767px){  }
@media only screen and (max-width: 479px) {  }
4.3基于视窗宽度的媒体查询断点设置
前提是设置body的字体为100%。其具有一个简单的计算公式：100% = 16px = 1em = 14pt
/*Viewport = 1920px*/
@media screen and (max-width: 120em){}
/*Viewport = 1680px*/
@media screen and (max-width: 105em){}
/*Viewport = 1400px*/
@media screen and (max-width: 87.5em){}
/*Viewport = 1200px*/
@media screen and (max-width: 75em){}
/*Viewport = 1024px*/
@media screen and (max-width: 64em){}
/*Viewport = 960px*/
@media screen and (max-width: 60em){}
/*Viewport = 800px*/
@media screen and (max-width : 50em){}
/*Viewport = 768px*/
@media screen and (max-width : 48em){}
/*Viewport = 600px*/
@media screen and (max-width: 37.5em){}
/*Viewport = 480px*/
@media screen and (max-width: 30em){}
/*Viewport = 320px*/
@media screen and (max-width: 20em){}
/*Viewport = 240px*/
@media screen and (max-width: 15em){}
5.用户的文字大小与弹性布局
5.1em与px
用户的浏览器默认渲染的文字大小是“16px”，换句话说，Web页面中“body”的文字大小在用户浏览器下默认渲染是“16px”。
弹性设计有一个关键地方Web页面中所有元素都使用“em”单位值。“em”是一个相对的大小，我们可以这样来设置1em，0.5em，1.5em等，而且“em”还可以指定到小数点后三位，比如“1.365em”。
相对的计算必然会一个参考物，那么这里相对所指的是相对于元素父元素的font-size。比如说：如果在一个<div>设置字体大小为“16px”，此时这个<div>的后代元素教程了是将继承他的字体大小，除非重新在其后代元素中进行过显示的设置。此时，如果你将其子元素的字体大小设置为“0.75em”，那么其字体大小计算出来后就相当于“0.75 X 16px = 12px”。
如果用户通过浏览器的UI控件改变了文字的大小，那么我们整个页面也会进行放大（或缩小），不至于用户改变了浏览器的字体后会致使整个页面崩溃。
多前辈在多年的实践中得出一个经验，他们建议我们在<body>中设置一个正文文本所需的字体大小，或者设置为“10px”，相当于（“0.625em或62.5%”），这样为了方便其子元素计算。这两种都是可取的。但是我们都知道，<body>的默认字体是“16px”，同时我们也很清楚了，我们改变了他的默认值，要让弹性布局不被打破，就需要重新进行计算，重新进行调整。所以完美的设置是：
body {font-size:1em;}
但是：
IE浏览器可不这样认为！“em”会有一个问题存在。调整字体大小的时候，同样会打破我们的弹性布局，不过还好，有一个方法可以解决：
html {font-size: 100%;}
但是我们不想总得去计算这个东西！
大家都知道1em总是等于父元素的字体大小，因此我们完全可以通过下面的工式来计算：
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
例如：
将960px转换为em
1 ÷ 16px × 960px = 60em
CSS Code
html {font-size: 100%;}
body {font-size: 1em;}
#container {width: 60em;}
5.2更好用的rem
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
为什么web app要使用rem？
这里我特别强调web app，web page就不能使用rem吗，其实也当然可以，不过出于兼容性的考虑在web app下使用更加能突显这个单位的价值和能力，接下来我们来看看目前一些企业的web app是怎么做屏幕适配的。
rem能等比例适配所有屏幕
rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。
html {font-size: 62.5%;   /*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem; /*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;  /*2.4 × 10px = 24px*/}
rem设置一个根的大小标准，其他以此标准自适应。根元素大小设置为10 ÷ 16 × 100% = 62.5%，就表明1rem的大小是10px（即根元素现在是10px的大小），如此一来，rem变为了10进制，更方便我们计算和使用。
rem的好处就在于，它会跟着根标准的大小自己进行调整，这样在适配不同屏幕的时候，我们只需要设定一下根标准的大小就可以了。
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位。