CSS - display:(inline | block)和display:box之间的区别？

CSS display:(inline | block)和display:box之间的区别如下：

display:(inline | block)

1. display:inline：

• 行内元素，如<a>，<b>，<i>，<u>，<h1>到<h6>，<p>，<div>，<span>，<img>，<input>，<button>等。
• 不允许更改元素在文档中的布局。元素按照文档流排列，不可对其应用宽度、高度、行高以及浮动等属性。
• 继承父元素的字体和字符属性（如font-size，font-family，text-decoration等）。
• 可以使用<span>和<i>标签对文本进行样式修饰。

1. display:block：

• 块级元素，如<p>，<div>，<h1>到<h6>，<ul>，<ol>，<li>等。
• 默认宽度为100%。可以通过width或者padding等属性进行设置。
• 在默认情况下，块级元素在垂直方向上堆叠，可以通过float或者position（尤其是absolute或relative）进行水平布局。
• 可以使用<div>，<p>，<h1>到<h6>等标签进行页面布局。

display:box

• display:box 是 CSS Flexbox 布局体系的一部分，用于创建灵活和响应式的布局。
• 它可以轻松地创建自适应的盒装布局，从而让内容在父容器中沿水平方向排列。
• display:box 与 display:flex 相当类似，但针对旧版本的浏览器可能需要进行前缀，如display: -webkit-box。

总结来说，这三种显示模式都有各自的应用场景和优劣。选择适当的显示模式取决于项目需求和兼容性要求。