定位与BFC

• BFC

  • 形成（4种）

    1. float
    2. absolutely positioned elements：

    positione: absolute, fixed;
    

    3. block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes,

    display: inline-blocks, table-cells, table-captions;
    

    4.block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

    overflow: auto, hidden, scroll
    

  • 同一个BFC中的元素遵守下列规则

  1. 从上到下排列
  2. 垂直外边距合并
  3. 重叠浮动元素
  • BFC之间的规则
  1. BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
  • 按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。
  • 因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠
  2. BFC不会重叠浮动元素
  3. BFC可以包含浮动

• 定位机制

  • CSS有三种基本的定位机制：普通流，浮动，绝对定位(absolute,fixed)
  1. 普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，这也是我们最常见的方式，其中position: static与position:relative属于普通流的定位方式
  2. 浮动定位
  3. 绝对定位包括 absolute和 fixed

  2和3 元素都会脱离文档的普通流
  注意：position:relative 属于普通流，元素位置会发生偏移，但是并不会影响其他元素的布局

• 绝对定位宽度

  • 绝对定位宽度是收缩的，如果想撑满父容器，可以设置 width: 100%

• transform: translate, scale

• 布局

  • 消除两个按钮之间的空隙
    1. 让标签之间没有空隙
    2. 先display为inline-block，再父元素font-size设置为0，子元素不为0即可
    3. 用浮动，即先用一个块级元素包裹住按钮。然后让两个按钮浮动，清除浮动后再让新添加的块级元素居中

    1和2不要用，只在面试时候回答即可。布局中尽量不用inline-block（除非是inline-block的元素是独一无二的，没有兄弟）

• flex

  • 这可能有些容易混淆，但align-content决定行之间的间隔，而align-items决定元素整体在容器的什么位置。只有一行的时候align-content没有任何效果