浏览器前缀、BFC深入解析、flex布局简析、行盒line boxes对齐及vertical-align居中原理、line-height

浏览器前缀

官方文档专业术语叫做：vendor-specific extensions（供应商特定扩展）
浏览器为了防止后续会修改名字给的新的属性添加了浏览器前缀；

FC: 格式化上下文----分为BFC、IFC

元素在标准流里面都属于一个FC，块级元素的布局属于BFC（块级格式化上下文），行内元素的布局属于IFC。

标准流：就是标签按照规定好默认方式排列.

1. 块级元素会独占一行，从上向下顺序排列。
   常用元素: div、hr、p、h1~h6、ul、ol、dl、form、table
2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
   常用元素: span、a、i、em等

块级元素都是在BFC中布局的

哪些会形成新的BFC：

BFC有什么作用呢？

• 在BFC中，box会在垂直方向一个挨着一个排布；
• 垂直方向的间距由margin属性决定；
• 在同一个BFC里面，相邻盒子上下margin会折叠重合(collapse)（BFC解析结果）
• 在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的（靠左）

解决：

• 解决margin折叠问题
  两个相邻div margin折叠，设置divA的overflow不起作用：因为divA本身形成一个新的BFC，和divB还是同属于同一个BFC（html）里面；需要两个div属于不同的BFC里面才能起效果（例：设置一个新的divC包裹divA，并设置divC的overflow属性）
  即：两个盒子属于不同的BFC，那么就可以解决折叠问题。

• 解决高度塌陷问题
  浮动元素float、绝对定位元素position皆可脱离标准文档流。但BFC不能解决绝对定位元素的高度塌陷。
  float浮动元素需要清除浮动，BFC也可以解决浮动元素父元素高度塌陷问题，可以实现清除浮动的效果。父元素设置overflow:hidden；父元素::after伪元素设置clear:both；
  

flex布局-flexbox弹性盒子

flex布局由来简介：

长久以来，css布局中唯一可靠且跨浏览器兼容的布局工具只有floats 和 positioning。
但存在很多局限性，所以需要flex局部：

• 弹性盒子是一种 按行或按列布局元素的一维布局方法；（grid布局更强大，兼容性没flex布局好）
• 元素可以膨胀以填充额外的空间，收缩以适用更小的空间；

flex布局的兼容性：

可在caniuse上查询到具体的兼容性 http://caniuse.com

vertical-align居中原理

块级元素中行盒line boxes的理解：

将当前行里面的所有内容全部包裹在一起。

行盒中多种行内元素：

行盒代码：

行盒效果图：

深入理解vertical-align——line boxes

vertical-align会影响行内块元素在一个行盒中垂直方向的位置

一个div没有设置高度的时候，没有内容没有高度。有内容，内容撑起来高度。

内容撑起来高度的本质是：内容有行高（line-height），撑起来了div的高度。

行高为啥能撑起div高度呢？
1.这是因为 line boxes 的存在，并且line boxes有一个特性，包裹每行的inline level；
2.而其中的文字是有行高的，必须将整个行高包裹进去，才算包裹这个line level；

那么，如果这个div中有图片，文字，inline-block，甚至设置了margin这些属性呢？

vertical-align的baseline（默认值）及原理

对齐方式千奇百怪，其实内在规律就是每个的baseline基线对齐（文本和图片等基线对齐）；且行盒会包裹当前行中所有内容。

只有图片时，块级元素中img底部也会默认像素预留，下面会有空白部分。
处理块级元素中 img底部留白：img代码设置：vertical-aline：bottom/top/middle；

当一个inline-box中有文本时，它的基线不再是底部，基线变成最后一行文本的基线。

baseline都是谁呢？

• 文本的baseline是字母x的下方
• inline-block默认的baseline是margin-bottom的底部（没有margin就是盒子的底部）
• inline-block有文本时，baseline是最后一行文本x的下方

vertical-align的其它属性值

扩展属性（简介）：

vertical-align给谁设置？
1.box设置吗？不对
2.给行内级的元素来设置的（设置的元素按照设置属性对齐，其它元素仍然默认基线对齐）

vertical-align的middle属性

• 只针对父盒子高度更高的情况；
• 且是设置 行内级盒子的中心点与父盒基线加上x-height一半的线对齐；

父元素固定高度时，设置父元素的line-height等于父元素height（line-height：设置一行文本的高度——一个行盒的高度）可解决行内级盒子设置middle但不真正居中情况；

代码：

效果图：（图片实际下沉了一点点）

line-height详解

行内块级元素的居中和分离现象

例：