CSS3 总结

1，块级格式上下文（BFC）

BFC 全称为块格式化上下文 (Block Formatting Context) 。
定义：浮动元素(float)和绝对定位(position:absolute)元素，非块级盒子的块级容器（例如 inline-block, table-cell, 和 table-caption），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
BFC的布局规则
1）内部的box会在垂直方向，一个接一个地放置（可以看作BFC中有一个的常规流）。
2）Box垂直方向的距离有margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3）每个元素的margin box 的左边，会包含块border box的左边相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此
4）BFC的区域不会与float box 重叠
5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
6）计算BFC的高度时，浮动元素也参与计算

如何创建BFC? (如何产生)
1）根元素或其它包含它的元素
2）浮动 (元素的 float 不为 none)
3）绝对定位元素 (元素的 position 为 absolute 或 fixed)
4）行内块 inline-block (元素的 display: inline-block)
5）表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)
6）表格标题 (元素的 display: table-caption, HTML表格标题默认属性)
7）overflow 的值不为 visible的元素
8）弹性盒 flex boxes (元素的 display: flex 或 inline-flex)

2, display中的 block,inline,inline-block 属性区别

display:block
display:block的特点：
1、block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
2、block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
3、block元素可以设置margin和padding属性。
主要作用：使得行内元素变成块级元素，如：span img input b u strong label 等
display:inline
display:inline的特点：
1、inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
2、inline元素设置width,height属性无效。
3、inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
主要作用：使得块级元素变成行内元素，如：div p h1-6 hr ul li table 等

display:inline-block
使得行内元素转为块级元素，但转换后的元素不独自占一行，而且可以可以设置其宽高及外边距margin所有属性

3，动画

CSS3 中有三个关于动画的样式属性transform、transition和animation；

transform
transform可以用来设置元素的形状改变，主要有以下几种变形：rotate（旋转）、scale（缩放）、skew（扭曲）、translate（移动）和matrix（矩阵变形）

.transform-class {
    transform ： none | <transform-function> [ <transform-function> ]*
}
//<transform-function> 表示一个或者多个变化函数，如rotate(30deg) scale(2,3)

transform-origin 基点: 所有的变形都是基于基点，基点默认为元素的中心点。用法：transform-origin: (x, y)，其中 x 和 y 的值可以是百分比、rem 或者是 px 等等，也可以用表示位置的单词来表示例如：x 可以用left、center、right；y 可以用top、center、bottom。
rotate: 旋转，单位为deg 正数为顺时针，负数则为逆时针

sacle： 缩放，有三种使用方法 scale(x,y) 为水平垂直同时缩放（参数1为水平方先，2为垂直方向）、
scaleX(x) 为水平缩放（即x轴缩放）
scaleY(y) 为垂直缩放（即y轴缩放）三种使用方式基数为1 大于1 方法反之缩小
translate：移动 也有三种使用方法

translate(x, y)： 代表水平和垂直运动（参数1为水平方向，2为垂直方向）
translateX()： 代表水平运动
translateY()： 代表垂直运动

skew : 扭曲

skew([x,y ])： 水平垂直方向扭曲
skewX()： 水平方向扭曲
skewY()： 垂直方向扭曲

matrix 矩形变形，

transition

transition是用来设置样式的属性值是如何从从一种状态变平滑过渡到另外一种状态，它有四个属性：
transition-property（变换的属性，即那种形式的变换：大小、位置、扭曲等）；transition-duration（变换延续的时间）；transition-timing-function（变换的速率）transition-delay（变换的延时）

transition-property： 用来设置哪些属性的改变会有这种平滑过渡的效果，主要有以下值：none，all，元素属性名

.transition-property {
    transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*;
}

transition-duration 用来设置转换过程的持续时间，单位是s或者ms，默认值为0；

.transition-duration {
    transition-duration ： <time> [, <time>]* ;
}

transition-timing-function 设置过渡效果的速率，它有6种形式的速率：

ease：逐渐变慢（默认），等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)；
linear：匀速，等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)；
ease-in：加速，等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)；
ease-out：减速，等同于贝塞尔曲线(0, 0, 0.58, 1.0)；
ease-in-out：先加速后减速，等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)；
cubic-bezier：自定义贝塞尔曲线。

.transition-timing {
    transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*;
}

transition-delay 设置过渡动画开始执行的时间，单位是s或者ms，默认值为0；

以上几种使用方法可以进行简写：

transition

.transition {
    transition ：<property> <duration> <timing function> <delay>;
}

animation动画 animation比较类似于 flash 中的逐帧动画，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而transition只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。
逐帧动画是由关键帧组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性keyframes来完成逐帧动画的。

@keyframes 动画名字

有两种形式一种是from to 另外一种是直接百分比

@keyframes animationname {
    from {
        properties(样式): value;
    }
    percentage(百分比值) {
        properties: value;
    }
    to {
        properties: value;
    }
}
//or
@keyframes animationname {
    0% {
       properties(样式): value;
    }
    percentage(百分比值) {
        properties: value;
    }
    100% {
        properties: value;
    }
}

animation-name 需要执行的动画名称

用来设置动画的名称，可以同时赋值多个动画名称，用,隔开：

.animation {
    animation-name: none | IDENT, | IDENT*;
}

animation-duration

用来设置动画的持续时间，单位为s，默认值为0

.animation {
        animation-duration: <time>|<time>*;
}

animation-timing-function

与transition-timing-function类似

.animation {
    animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*;
}

animation-delay

设置动画的开始时间，单位是s或者ms，默认值为0

.animation {
    animation-delay: <time>|<time>*;
}

animation-iteration-count

设置动画循环的次数，默认为1，infinite为无限循环

.animation {
    animation-iteration-count:infinite | <number> [, infinite | <number>]*;
}

animation-direction

设置动画播放的方向，默认值为normal表示向前播放，alternate代表动画播放在第偶数次向前播放，第奇数次向反方向播放

.animation {
    animation-direction: normal | alternate [, normal | alternate]*;
}

animation-play-state

控制动画的播放状态：running代表播放，而paused代表停止播放，running为默认值

.animation {
    animation-play-state:running | paused [, running | paused]*;
}

上面的全部属性可以简写到animation中

.animation {
    animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] 
}

//多组动画
animation: [ [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*;

4，CSS垂直水平居中方案

父元素使用display：table-cell

//样式
.box1{
    display: table-cell;
    vertical-align: middle;
    text-align: center; 
    width: 200px;
    height: 200px;
    background-color: red;       
}

<div class="box box1">
    <div>垂直居中</div>
    <div>垂直居中</div>
</div>

弹性盒子 display:flex

//样式
.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: Center;
    flex-direction: column;
}

<div class="box1">
    <div>垂直居中</div>
    <div>垂直居中</div>
</div>

父相对定位( position:relative ) 子绝对定位( position:absolute )和负边距

当父级不指定宽高时，按照整个文档窗口垂直居中

.box1{position:relative;}
.box1 div{
            position: absolute;
            width:100px;
            height: 50px;
            top:50%;
            left:50%;
            margin-left:-50px;
            margin-top:-25px;
            text-align: center;
        }
<div class="box1">
    <div>垂直居中</div>
</div>

绝对定位(position:absolute)

这里得确定内部元素的高度，可以用百分比，比较适合移动端。

.box1 div{
  width: 50%; 
  height: 50%; 
  background: red;
  overflow: auto; 
  margin: auto; 
  position: absolute; 
  top: 0; left: 0; bottom: 0; right: 0; 
}

translate

.box1 div{
            position: absolute;
            top:50%;
            left:50%;
            width:200px;
            height: 200px;
            transform:translate(-50%,-50%);
            text-align: center;
            background-color: red;
}

<div class="box1">
    <div>垂直居中</div>
</div>

display:inline-block

.box1{
  text-align:center;
  font-size:0;
}
.box1 div{
  vertical-align:middle;
  display:inline-block;
  font-size:16px;
}
.box1:after{
  content:'';
  width:0;
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

持续更新中...

1，块级格式上下文（BFC）

2, display中的 block,inline,inline-block 属性区别

3，动画

4，CSS垂直水平居中 方案

4，CSS垂直水平居中方案