css 块元素、行内元素、行内块元素极其相互转换

1.元素显示模式转换

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块元素：display:inline-block;

2.块元素：

~

、

、

、

、
、
1. 等，其中
   是最典型的块元素

 块元素特点：

1. 独占一行
2. 高度、宽度、外边距以及内边距都可以控制
3. 宽度默认是容器（父级宽度）的100%
4. 是一个容器及盒子，里面可以放行内或者块级元素

  注意：

1. 文字类的元素内不能使用块级元素

2. 标签主要用于存放文字，因此

   里面不能放块级元素，特别是不能放
3. 同理，

   ~

   等都是文字类块级元素，里面不能放块级元素

3.行内元素：、、、、、、、等，其中是最典型的行内元素，行内元素也叫内联元素

  行内元素特点：

1. 相邻行内元素在一行上，一行可以显示多个
2. 高、宽直接设置是无效的
3. 默认宽度就是它本身内容的宽度
4. 行内元素只能容纳文本或其他行内元素

 注意：

    1.链接里面不能再放链接

    2.里面可以放块级元素，但是给转换一下块级模式最安全

4.行内块元素：，它们同时具有块级元素和行内元素的特点

  行内块元素特点：

1. 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
2. 默认宽度就是它本身内容的宽度（行内元素特点）
3. 高度、行高、外边距以及内边距都可以控制（块级元素特点）。

5.总结