normal flow

display属性是block、inline-block、inline block以及相对和粘附定位的盒模型构成的布局。

block box

显示特性

  • 单独一行。原理:设定盒子的margin-right值。

image.png

  • 可以设置宽高。默认宽度撑满整个包容盒。
  • margin collapse

    inline box

    显示特性

  • 不能设置宽高。宽和高自适应内容。

  • 不会单独一行
  • 水平方向上,padding和margin的属性值是有效的。

    inline-block

    显示特性

  • 不会单独一行

  • 可以设置宽高。

    盒子如何正常布局

  • 按照DOM结构的顺序。

  • 块级在竖向一个接一个摆放(因为换行的特性)。块级盒子之间竖向margin边缘接触,会发生外边距塌陷。
  • 内联盒子在横向一个接一个摆放。内联盒子横向margin接触,并不会发生外边距塌陷,但是内联盒子之间由于标签代码之间会换行所以会产生空格。