块级元素、行内元素和行内块元素 三种显示模式的区别和特点

css中标签的显示模式分为三种：
块级元素block-level
行内元素inline-level
行内块元素inline-block
我们常用的标签属于什么显示模式？他们之间有什么特性？是否可以互相转化和注意事项都是要熟记的，因为在网页div+css用来布局的时候很重要

• 块级元素 block-level
  1⃣️常见的块元素有：< h1 >…< h6 >、p标签、div、ul、ol、li等等，其中div是最典型的块元素。
  2⃣️特点：1、独占一行；2、可以设置宽高；3、块元素不设置宽度width的时候，默认父元素内容区域的宽度；4、块元素不设置高度height的时候，默认高度为0，内容会撑开高度。

• 行内块元素inline-level
  1⃣️常见的行内素：< a >、< strong >、< b> 、< em >、< I >、< del >、< s >、< ins >、< u >、< span >等，其中< span >标签最典型的行内元素。
  2⃣️特点：1.在一行上显示；2.不能设置宽高；3.默认宽高为0，内容会撑开宽高；4.行内元素代码换行会生成缝隙。

• 行内块元素inline-block
  1⃣️常见的行内块元素：在行内元素中有几个特殊的标签——< img />、< input />、< td>
  2⃣️特点：1.在一行上显示；2.可以设置宽高；3.不会默认父元素的宽度；4.代码换行会生成缝隙。

• 标签显示模式的转换display
  1.块转行内：display:inline;
  2.行内转块：display：block
  3.块、行内元素转换为行内块： display: inline-block;
  ⚠️前面我们讲过，行内块的特性， 一行可以有多个， 可以设置高度和宽度， 大小是受内容的影响。
  1.可以用inline-block 转换为行内块
  2.可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
  3.绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。
  所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

• 标签的嵌套规范
  1.块元素可以嵌套块元素 、行元素、行内块元素
  ⚠️div可以嵌套任意的块元素；但是p标签不能嵌套块元素，只能嵌套行内元素和行内块元素；不推荐标题里边嵌套其他块元素，可以嵌套行内元素、行内块元素 。
  2.行内元素不能嵌套块元素、行内块元素，只能嵌套行内元素
  ⚠️经常我们需要在a标签里嵌套ul li等块元素，所以千万不要忘了给a标签转模式。
  3.行内块不能嵌套块元素，可以嵌套行内元素、行内块元素。