文章目录

  • CSS 选择器的权重与优先级
  • 盒子模型
  • 浮动 Float

CSS 选择器的权重与优先级

对于一个元素，如果存在多个选择器,那么会通过各个类选择器的权重来计算其优先级。

权重分为 4 级，分别是：

  1. 代表内联样式，如 style=”xxx”，权值为 1000；
  2. 代表 ID 选择器，如#content，权值为 100；
  3. 代表类、伪类和属性选择器，如.content、:hover、[attribute]，权值为 10；
  4. 代表元素选择器和伪元素选择器，如 div、p，权值为 1。

需要注意的是：通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为 0。 权重值大的选择器其优先级也高，相同权重的优先级又遵循后定义覆盖前面定义的情况。

盒子模型

  • 盒子宽度

在盒子模型中，我们设置的宽度都是内容宽度，不是整个盒子的宽度。而整个盒子的宽度是：内容宽度 + padding 宽度 + border 宽度 + margin 宽度。

为盒子指定样式box-sizing:border-box可以让盒子内容宽度变为：实际内容宽度 + padding 宽度 + border 宽度。这样，整个盒子的宽度就是：盒子内容宽度 + 盒子 margin 宽度。

  • 纵向 margin 重叠

margin 有纵向重叠这一特性。如<p>的纵向 margin 是 16px，那么两个<p>之间纵向的距离是多少？按常理来说应该是 16 + 16 = 32px，但是答案仍然是 16px。因为纵向的 margin 是会重叠的，如果两者不一样大的话，大的会把小的“吃掉”。

浮动 Float

  • 误解和误用

float被设计出来的初衷是文字环绕效果。即一个图片一段文字，图片float:left之后，文字会环绕图片。但是，后来大家发现结合 float + div可以实现之前通过 table 实现的网页布局，因此就被“误用”于网页布局了。

  • 破坏性

float 会破坏父标签的原本结构，使得父标签出现了坍塌现象。导致这一现象的最根本原因在于：被设置了 float 的元素会脱离文档流。

  • 包裹性

普通的 div 如果没有设置宽度，它会撑满整个屏幕。为 div 设置了 float 之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。div 设置 float 后出现包裹性的原因是为了让文字能环绕 div。

注意，此时 div 虽然体现了包裹性，但是它的 display 样式是没有变化的，还是 display: block。

  • 清空格

这一特性的根本原因是被设置了 float 的元素会导致节点脱离文档流结构。它都不属于文档流结构了，那么它身边的什么换行、空格就都和它没了关系，它就尽量往一边靠拢，能靠多近就靠多近，这就是清空格的本质。

  • clearfix

清除浮动的方法：

1
2
3
4
5
6
7
8
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}
.clearfix {
    zoom: 1;
}

使用：

1
2
3
4
<div class="clearfix">
    <img src="image/1.png" style="float: left"/>
    <img src="image/2.png" style="float: left"/>
</div>