本文着重描述关于 margin,我们日常不太容易发现的“坑”。
盒模型
接触过 CSS 的人应该都知道 CSS 的盒模型:
由内容边缘(Content edge)包围形成的是内容盒(Content Box),类推还有内边距盒(Padding Box)、边框盒(Border Box)、外边距盒(Margin Box)。其中内容盒、内边距盒、边框盒的背景由background属性决定,而外边距盒的背景是透明的。
CSS margin 属性
关于 margin 属性,有几点可能跟我们的直觉不相符:
1、如果 margin 的值是百分比,则是相对于父元素的内容盒宽度来计算的,即使 margin-to