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. 常见行内元素：

   <a></a> | <abbr></abbr> | <em></em> | <strong></strong> | <span></span> | <img> | <script></script> | <label></label>

3. 特点：

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

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

块级元素block

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

   <div></div> | <address></address> | <article></article> | <audio></audio> | <canvas></canvas> | <dd></dd> | <dl></dl> | <footer></footer> | <form></form> | <hr> | <header></header> |<h1>-<h6> | <ol></ol> | <p></p> | <section></section> | <table></table> | <ul></ul> | <video></video>

3. 特点：

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

1. 块级元素转内联元素：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一会儿不可以的，如果将其说成是内联块级元素，我相信很多初学者就会恍然大悟了，特别是针对替换元素，就不至于一脸懵逼两脸懵圈了～