块级盒子(Block box) 和 内联盒子(Inline box)

一个被定义成块级的(block)盒子会表现出以下行为:

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

如果一个盒子对外显示为 inline,那么他的行为如下:

  • 盒子不会产生换行。
  • width 和 height 属性将不起作用。
  • 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
  • 水平方向的内边距、外边距以及边框会被应用而且也会把其他处于 inline 状态的盒子推开。


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

参考文章:https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model(还有许多其他内容可以参考原文)

Last modification:July 26th, 2021 at 10:46 am
如果觉得我的文章对你有用,请随意赞赏