常用样式

display

inline-block实现网格效果

.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

inline-block.png

position

static -- 默认
relative -- 控制多个position: relative视图之间的相对位置
fixed -- 对于整个视图的固定位置
absolute -- 控制对于上个position视图的相对位置

例子 position-example

.container {
  position: relative;
}
nav {
  position: absolute;
  left: 0px;
  width: 200px;
}
section {
  /* position is static by default */
  margin-left: 200px;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 70px;
  background-color: white;
  width: 100%;
}
body {
  margin-bottom: 120px;
}

效果：

position.png

flexbox

1. 使用 Flexbox 的居中布局

.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

2. 使用 Flexbox 的牛逼布局

.container {
 display: -webkit-flex;
 display: flex;
}
.initial {
 -webkit-flex: initial;
         flex: initial;
 width: 200px;
 min-width: 100px;
}
.none {
 -webkit-flex: none;
         flex: none;
 width: 200px;
}
# initial和none 剩余空间的1/3
.flex1 {
 -webkit-flex: 1;
         flex: 1;
}
# initial和none 剩余空间的2/3
.flex2 {
 -webkit-flex: 2;
         flex: 2;
}