1. display: block ，display：inline和display：inline-block 区别。
display: block;
这是大多数 HTML 元素的默认值，它使元素以块级方式显示，即元素会独占一行，从上到下排列。
使用场景：适合用于创建页面结构的容器元素，如 <div>、<p> 等。
区别：与 display: inline; 相比，display: block; 元素会独占一行，并且可以设置宽度、高度、内外边距等属性。
display: inline;
这使元素以行内方式显示，即元素不会独占一行，可以与其他行内元素在同一行显示。
使用场景：适合用于一行内显示的元素，如文本链接 <a>、<span> 等。
区别：与 display: block; 相比，display: inline; 元素不会独占一行，不可以设置宽度、高度等块级元素特有的属性。
display: inline-block;
这使元素以行内块级方式显示，即元素不会独占一行，但可以设置宽度、高度等块级元素特有的属性。
使用场景：适合需要在一行内设置宽度、高度等属性的元素，如按钮、图片等。
区别：与 display: inline; 相比，display: inline-block; 元素可以设置宽度、高度等块级元素特有的属性。
display: none;
这使元素不会显示，并且在文档流中不占据空间。
使用场景：适合需要动态控制元素显示与隐藏的情况，可以通过 JavaScript 来改变元素的 display 属性。
区别：与 visibility: hidden; 相比，display: none; 会从文档流中移除元素，不占据空间，而 visibility: hidden; 会隐藏元素但仍占据空间。
2. flex 布局（flexBox)
（参考文献： https://blog.csdn.net/agonie201218/article/details/125382378）
display:flex 设置为块级弹性容器
display:inline-flex 设置为行内的弹性容器
display:flex：
这个属性将指定元素的容器以弹性盒子的形式显示。它使得容器的子元素能够灵活地调整大小、顺序和对齐方式。子元素默认会按照水平方向排列，如果需要垂直排列，可以通过设置flex-direction属性来实现。display:flex将使得容器元素成为一个块级元素，它会占据一行的全部宽度。
display:inline-flex：
这个属性与display:flex类似，但是它将使得容器元素成为一个内联元素。内联元素只会占据其内容所需的空间，而不会独占一行。这意味着display:inline-flex可以将多个容器元素水平排列在同一行上。
因此，主要区别在于它们对容器元素的显示行为不同。display:flex会使容器元素成为块级元素，占据一行的全部宽度，而display:inline-flex会使容器元素成为内联元素，只占据所需的空间。
网友评论