Jason Heylon Blog

css 基础知识回顾

January 10, 2018 | 1 Minute Read

优先级

样式位置

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

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

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

选择器

四个level:

  1. inline style
  2. ID 选择器
  3. class 选择器
  4. 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

#