the box model

130 阅读1分钟

块级盒子(block-box)

  1. 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间,在绝大数情况下意味着盒子会和父容器一样宽
  2. 每个盒子都会换行
  3. width 和 height 属性可以发挥作用
  4. 内边距(padding), 外边距(margin) 和 边框(border) 会将其他元素从当前盒子周围“推开”

内联盒子(inline-box)

  1. 盒子不会产生换行
  2. width 和 height 属性将不起作用。
  3. 内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。

我们通过对盒子display 属性的设置,比如 inline 或者 block ,来控制盒子的外部显示类型。

内部和外部显示类型

在这里最好也解释下内部 和 外部 显示类型。如上所述, css的box模型有一个外部显示类型,来决定盒子是块级还是内联。