HeiLiu

html代码如下：

    <div class="book">
            <div class="front-cover">
               
            </div>
    </div>

Css居中方法（敲黑板）重点
- 首先将元素设置成为绝对定位，然后距顶部和左各50%，此时的元素还不是居中的，因此需要通过一定的偏移将其移到理想位置，两种方法的主要思想都是一样的，第一种通过margin-left和margin-top移动元素自身宽高的一半，另一种通过css3的属性transform的translate方法平移元素自身宽高的一半，代码展示如下：
```css
body {
color: #ffffff;
background: #444444;
}
.book {
```
 width: 300px;
 height: 300px;
 position: absolute;
 top: 50%;
 left: 50%;
 /* 第一种 */
 /* 兼容性 未使用css3, ie678 */
 /* margin-left: -150px; */
 /* margin-top: -150px; */
 /*第二种*/
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
```
}
```

两种方法第一种的兼容性更加的好一些，因为其中没有使用Css3的属性对于ie678的兼容比较友好

混合书写(Mixins)

变量

在stylus中可以将常用的样式像表达式中变量赋值一样保存给一个变量、如下：

/*进行变量的声明*/
bg_color = #123456;
box_size = 100px;
/* 使用 */
.box
    background-color bg_color
    width box_size
    height box_size

编译后：

.box {
   background-color: #123456;
   width: 100px;
   height: 100px;
 }

属性查找
Stylus有另外一个很酷的独特功能，不需要分配值给变量就可以定义引用属性。下面是个很好的例子，元素水平垂直居中对齐（典型的方法是使用百分比和margin负值），如下：
#logo position: absolute top: 50% left: 50% width: w = 150px height: h = 80px margin-left: -(w / 2) margin-top: -(h / 2)
在stylus中可以不使用这里的变量w和h, 而是简单地前置@字符在属性名前来访问该属性名对应的值：
#logo position: absolute top: 50% left: 50% width: 150px height: 80px margin-left: -(@width / 2) margin-top: -(@height / 2)
混合书写
混合书写和函数定义方法一致，但是应用却大相径庭。

例如，在书写Css3样式时我们经常要进行兼容性处理，需要在属性前加上相应的前缀，下面有定义的border-radius(n)方法，其却作为一个mixin（如，作为状态调用，而非表达式）调用。

    bg_color = #123456;
    box_size = 100px;

    /*定义mixin*/
    border-radius(n)
        -webkit-border-radius n
        -moz-border-radius n
        -ms-border-radius n
        -o-border-radius n
        border-radius n
    .box
        background-color bg_color
        width box_size
        height box_size
        border-radius(5px)
```  
进一步，我们可以利用arguments这个局部变量，传递可以包含多值的表达式,这样就可以給属性传递多个值。  
```css
border-radius()
        -webkit-border-radius arguments
        -moz-border-radius arguments
        -ms-border-radius arguments
        -o-border-radius arguments
        border-radius arguments

Stylus支持通过使用{}字符包围表达式来插入值，其会变成标识符的一部分。例如，-webkit-{‘border’ + ‘-radius’}等同于-webkit-border-radius.

再进一步，在stylus中我们还可以对border-radius再做进一步的处理类似与js中的函数封装，如下(这样对于任何需要做兼容性处理的属性我们只需要调用两次mixin出入所需参数，大大的简化了一下琐碎代码工作):

 vendor(prop,args)
    -webkit-{prop} args
    -moz-{prop} args
    -ms-{prop} args
    -o-{prop} args
    {prop} args

border-radius(n)
    vendor('border-radius',arguments)
box-shadow(n)
    vendor('boa-shadow',arguments)
.box
    background-color bg_color
    width box_size
    height box_size
    border-radius(5px)

编译后：

 .box {
  background-color: #123456;
  width: 100px;
  height: 100px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
  -moz-box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
  -ms-box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
  -o-box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
}

让div在屏幕上居中（水平居中+垂直居中）的方法总结

stylus之变量与mixin

混合书写(Mixins)

变量

混合书写