CSS学习笔记

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 {})
使用样式表：外部（用引入）、内部（在document中写）、内联样式（

）。多重样式时取更具体的样式。