全栈工程师成神之路--CSS

@wanqiuz 2018-07-11 14:34:54发表于 wanqiuz/blog-articles 全栈工程师成神之路

⭐️ BFC

BFC是什么?

Block fomatting context = block-level box + Formatting Context
BFC直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

BFC的生成

BFC是一块渲染区域,那这块渲染区域到底在哪,它又是有多大,这些由生成BFC的元素决定,CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。

  • 根元素
  • float的值不为none
  • overflow的值不为visible
  • display的值为inline-block、table-cell、table-caption

display:table也认为可以生成BFC,其实这里的主要原因在于Table会默认生成一个匿名的table-cell,正是这个匿名的table-cell生成了BFC

⭐️ 水平居中和垂直居中的完整攻略