优先级

样式位置

外部link引用
在当前页面head中
inline写在标签内style属性中
使用!important的

相同位置内，写在文件更后面的样式会覆盖前面的样式。

如果没有冲突，样式会merge。

选择器

四个level:

inline style
ID 选择器
class 选择器
element 选择器

每个level得分初始值为0

  0, 0, 0, 0

例子

  p { color: #fff; }                    // 0, 0, 0, 1
  .desc { color: #ddd; }                // 0, 0, 1, 0
  #calendar { color: #e1e1e1 }          // 0, 1, 0, 0

  <h1 style="color: #000;">Jason Heylon</h1>   <!-- 1, 0, 0, 0 -->

  p { color: #000 !important; }         // 最大

  .desc p.article { color: #fff; }          // 0, 0, 2, 1
  .desc ul li.active { color: #98c7d4; }    // 0, 0, 2, 2


  #calendar table td.foo { color: #444245; }    // 0, 1, 1, 2
  #my-page #calendar td { color: #444245; }     // 0, 2, 0, 1  win

清除浮动

.clear-fix:before,
.clear-fix:after {
  content: "";
  display: table;
}
.clear-fix:after {
  clear: both;
}
.clear-fix {
  zoom: 1; /* IE6&7 */
}

<div class="clear-fix">
  <img src="test.jpg" alt="right!" />
  <p>left</p>
</div>

盒模型

content-box: content
padding-box: content + padding
border-box: content + padding + margin

css 基础知识回顾

优先级

样式位置

选择器

清除浮动

盒模型