深入理解margin

css

原生js，使用offsetWidth，offsetHeight来获取元素的border-box尺寸；使用clientWidth，clientHeight来获取元素的content-box尺寸。

问题一：margin能够改变元素尺寸？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="f">
  <div class="c"></div>
</div>
<style type="text/css">
.f {
  width: 300px;
  height: 300px;
  margin: -20px;
}
.c {
  height: 300px;
  margin: -20px;
}
</style>

对于上面这样的代码来说，box f的content-box尺寸为300px-300px，但是对于box c的content-box的尺寸则为340px-300px。可以看出，margin是可以改变元素尺寸的，那么有着一个怎样的机制呢？只要元素的尺寸表现符合充分利用可用空间，无论是垂直方向还是水平方向，都可以利用margin来改变尺寸。

问题二：margin的百分比值

无论是设置水平方向还是垂直方向的margin，如果使用百分比单位的话，那么都是相对于父元素的宽度来进行计算的。