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>）。多重样式时取更具体的样式。
