外边框合并

外边距合并：两个盒子靠在一起的时候（不管是上下靠在一起，还是左右靠在一起）。两个盒子的距离并不是 marginA + marginB。而是max(marginA, marginB)

内敛边框（border-box）

1
2
3
4
5
.block {
  float: left;
  width: 33.3%;
  border: 1px solid;
}

当因为border有1px，导致最后一个（第三个）盒子没办法分到33.3%，此时这个盒子会被挤到下一行，此时可以添加一个box-sizing: border-box

每次使用float后，一定要清除浮动

  1. html中添加一个<div class="clearfix"></div>
  2. css中给clearfix标签添加clear: both
1
2
3
4
5
6
7
8
9
10
11
<div class="block">
  <p>adasdasdasdasdasdasdasdasda</p>
</div>
<div class="block">
  <p>adasdasdasdasdasdasdasdasda</p>
</div>
<div class="block">
  <p>adasdasdasdasdasdasdasdasda</p>
</div>

<div class="clearfix"></div>
1
2
3
4
5
6
7
8
9
10
.block {
  float: left;
  width: 33.3%;
  border: 1px solid;
  box-sizing: border-box
}

.clearfix {
  clear: both;
}

position in css

  • static : 静态定位
  • relative : 相对定位
  • absolute : 绝对定位
  • fixed : 固定定位
  • Sticky : 一开始随着页面滚动，等滚到一定程度，就粘在某个位置