Flexbox布局

学习自：http://www.cnblogs.com/myzhibie/p/4318904.html

Flexbox的主轴、侧轴

.flex-container {
    /*关键两行代码*/
    display: flex; 
    flex-direction: row;
    flex-wrap: wrap;
    /*上面两行代码可简化为 flex-flow: row wrap*/

    background-color: #007cd1; 
    color: #ffffff;
    padding: 5px 5px;
    justify-content: space-between;
    align-items: center;
    height: 300px;
    align-content: space-between
}

.flex-item {
    background-color: #7CDF90;
    width: 76px;
    height: 76px;
    margin: 5px;
}

display: flex（块级元素）, inline-flex（内联元素）
flex-direction: row(-reverse), column(-reverse)
justify-content（主轴上调整内容布局）: flex-start, flex-end, center, space-between（两边不留空，空间仅预留给item之间）, space-arouond（空间预留给两边和item之间）
align-content（侧轴）: 同上
align-items（可伸缩item在侧轴上的对齐方式）: flex-start, flex-end, center, baseline, stretch
align-self（设置可伸缩item在侧轴上的对齐方式）: 可选项和align一致
order（排列可伸缩item，默认值为0）: 0, 1, 2

“盒子模型”布局

四层从外至内：margin, border, padding, content
margin: auto （自动将可用空间设置成margin）

width: 200px;
margin: 30px;
border: 10px solid #007CD1
padding: 10px;

border的样式

实线边solid、点线框dotted、虚线框dashed、双线边double，其它groove, ridge, inset, outset。
单独设置每个边的样式也是可以的，如：

p {
  border-top-style: solid;
  border-right-style: dashed;
  border-bottom-style: dotted;
  border-left-style: double;
}

上述可简写为：border-style: solid, dashed, dotted, double（上右下左，省左随右，省下随上，先上下后左右）
border的简写：border: 10px solid #007CD1

颜色

字体 color
背景色 background-color

字体

字体：font-family: "Times New Roman", serif; （如果Times New Roman不支持则使用serif）
字号：font-size: 28px, 2em; （1em=16px）
斜体： font-style: normal, italic;
粗细：font-weight: bold, lighter;
突出大写字母：font-variant: normal, small-caps
简写属性：font: italic bold 16px/30px "Times New Roman",serif
更多：http://www.runoob.com/cssref/pr-font-font.html

段落

对齐方式：text-align: center, right, left, justify
下划线及位置：text-decoration: none, overline, line-through, underline
文本缩进：text-transform: uppercase, lowercase, capitalize
text-indent: 50px;
字符间距：letter-spacing: -3px;
行间距：line-spacing: 200%；
不换行：white-space: nowrap;
单词之间的间距：word-spacing: 30px;

图片

vertical-align: text-top, text-bottom （对齐到文字顶部、底部）

链接

四种状态（有序性）：link, visited, hover（鼠标移动到链接上）, active（点击时）。一般结合text-decoration来使用。

选择器：id + # 或 class + . (p.className {})
使用样式表：外部（用<link>引入）、内部（在document<style></style>中写）、内联样式（<p style="color:red;margin-left:20px"></p>）。多重样式时取更具体的样式。