css - 内联块（inline-block）

Html元素分为块元素和内联元素。内联块不是内联元素(内嵌元素)。

我们划分区域的框都是矩形，90°直角的。

块元素和内联元素的区别

块元素特征：

1.在没有设置宽度时候，默认撑满一行。
2.默认块元素独占一行。
3.支持所有css样式。

内联元素特征：

1.宽高由内容撑开。
2.不支持宽高样式，自己的宽高由于内容来确定。
3.一行上可以显示连续排列显示多个同类的标签。
4.不支持上下的margin。
5.代码换行被解析为一个空格。

块元素和内联元素之间的相互转换

块元素和内联元素的转换也叫作块与内嵌的转换。

display:block    # 显示为块（使内联元素具备块属性标签的特征）

display:inline    # 显示为内嵌（使行块属性的标签具备内联元素特征）

案例分析：
我们在布局的时候有时候会碰到左右，或者左中右这样一个结构，一般我们会把划分结构的容器都使用块元素（一般是div）来划分。但是它们都是块元素，怎么才能让它们在同一行上面显示呢？刚刚我们学的块元素和内联元素，只有内联元素才能在同一行上面展示，但是内联元素不支持宽高，那么这样也不能满足我们的需求，所以就有了inline-block（内联块）的出现，来既满足可以在同一行，也可以满足块元素的属性。

---

内联块

display:inline-block;   # （不管是块元素还是内联元素都可以）转换为内联块。

那么现在，块元素，内联元素和内联块都可以相互转换。
特点：
1.多个块可以在一行显示（块级元素）；
2.行内属性标签支持宽高（内联元素）；
3.没有设置宽度的时候内容撑开宽度（块级元素和内联元素都是）。

案例使用：
翻页条。