css 内联元素、块级元素、内联块级元素

对于display我想很多人都不陌生，然而在谈到内联元素，行内元素等词，还是会有人脑袋瓜子充满了疑问？？？我曾经自以为已经了解并懂得如何使用display，在学习vertical-align及替换元素等的时候，才深刻明白自己也就一知半解，接下来不说display各种参数的使用方法，而是谈谈display形成的各种盒模型

display

指定了元素的显示类型，包含两种用于指定元素怎样生成盒模型 => 决定了布局的方式，直接影响height

1. 外部显示类型：display:block | display:inline
2. 内部显示类型：display:flow | display:table | display:flex
3. 外部div的高度，由其内部的文档流元素的高度总和决定，并不是相等

我的个人的看法是外部显示类型主要是指在整个文档流当中此div的状态，而内部显示类型就是此div里面的内容布局，（例如现在经常使用的flex，就是此div内部的各个元素根据flexbox模型展示）

文档流

1. 如果是内联元素，文档流流动方向从左到右布局，宽度不够，换行继续流
2. 如果是块级元素，文档流流动方向从上到下布局，一个block占据一行，依次向下布局，即使一个块宽度不足以达到总宽度

内联元素inline

1. 也叫行内元素，一个行内元素只占据它对应标签的边框所包含的空间
2. 常见行内元素： | | | | | | |
3. 特点：

• 元素从左到右流动布局
• 元素的height、width、margin-top、margin-bottom不可设置
• 元素的高度就是它自身的建议行高 =>content-area的高度
• 注意点：内联元素设置行高会有位置的变化，但没有改变盒子大小（在为内联元素设置背景时，默认高度的地方有背景），inline-box行内框高度=content area内容的高度,特殊内联元素除外！！！

4. 内联元素转块级元素：display:block

块级元素block

1. 块级元素占据其父元素容器的整个空间
2. 常见块级元素：
   |
   |
   | | |
   |
   |
   |
   |

   ---

   |
   |

   -

   |

   |

   |

   | |

   |

3. 特点：

• 每个块级元素都从新的一行开始
• 元素的height、width、line-height、margin-top、margin-bottom都可以设置
• 元素width在不设置的情况下，是它本身父容器的100%（除非设定一个宽度）

4. 块级元素转内联元素：display:inline

内联块级元素inline-block =>特殊的内联元素

1. 替换元素，如 img / input / svg 等
2. inline-block 元素，以及所有 display 值以 inline- 开头的元素，如 inline-table / inline-flex
3. 处于某种特殊格式化上下文的内联元素，例如 flexbox 元素中的子元素都处于 flex formatting context（弹性格式化上下文）中
4. 特点：

• 元素的height、width、line-height、margin-bottom、margin-top都可以设置
• 行框line-box和content-area的高度可被改变

对于内联块级元素，我在看很多材料的时候，都发现很多人将其归类于内联元素或者行内元素中，则让我一度产生了很深的疑惑，为什么内联元素一会儿可以改变line-height一会儿不可以的，如果将其说成是内联块级元素，我相信很多初学者就会恍然大悟了，特别是针对替换元素，就不至于一脸懵逼两脸懵圈了～