Css之盒模型

Posted by Shen Chaoran on September 13, 2018

标准盒模型和怪异盒模型

box-sizing: content-box/border-box

垂直外边距合并

  1. 相邻兄弟元素 两个兄弟元素之间的外边距,会取两个元素外边距的最大值。
  2. 相邻父子元素 父元素的上外边距和第一个子元素的上外边距,父元素的下外边距和最后一个子元素的下外边距。
  3. 空元素的上下外边距 自己的上外边距会和自己的下外边距合并。

取消外边距合并的方法:创建BFC,将外边距控制在 BFC 内部,两个 BFC 外部就不会产生重叠。具体包括:

  • float != none
  • display != static/relative
  • overflow === auto/hidden
  • position == absolute/fixed

inline-block

具有 margin, border, padding,能设置 width/height,行内元素不能。