display flex inline-block区别

display属性用于设置元素的显示类型。其中，flex和inline-block是两种常用的显示类型。

1. flex:
- flex是一种弹性布局，用于创建灵活的盒子模型。通过设置display: flex，可以将容器元素设置为弹性容器。
- 弹性容器中的子元素（即弹性项目）可以通过设置各种flex属性来调整它们的大小、顺序和对齐方式。
- 弹性容器中的弹性项目会自动填充可用空间，并根据设置的flex属性进行伸缩。

2. inline-block:
- inline-block用于将元素设置为内联块级元素。
- 内联块级元素与普通的内联元素类似，会在同一行内显示，但可以设置宽度、高度、内外边距等属性。
- 内联块级元素之间会保留换行符产生的空白间隙，需要通过设置父元素的字体大小为0或使用注释等方式来消除空白间隙。

总结：
- display: flex用于创建弹性布局，子元素具有伸缩能力。
- display: inline-block用于创建内联块级元素，可以在同一行内显示，并具有设置大小的能力。

相关问题

overflow: hidden;display: flex;display: inline-flex;display: inline-block;position: absolute;position: fixed;

这是一些CSS属性，可以用来控制HTML元素的布局和位置。具体如下：

- overflow: hidden： 当元素内容超出其高度和宽度时，隐藏额外的内容。
- display: flex：用于弹性布局，可以使元素在同一方向上对齐，能够轻松控制元素的宽度、高度、间距和排序。
- display: inline-flex：与flex相似，但是它是在行内而不是块内。
- display: inline-block：行内块元素，与默认的行内元素相似，但可以设置宽度和高度。
- position: absolute：基于最近的非 static 定位祖先元素的位置来确定元素自身位置，不会改变其他元素的位置。
- position: fixed：元素相对于视口的位置而不是相对于文档的位置进行定位，即无论滚动条如何滚动，元素的位置都不会改变。

范例：

假设我有一个div元素，它的id为myDiv，并且我希望它始终在浏览器窗口的右下角，宽度为200px，高度为100px，同时不显示溢出的内容，并且在内部使用弹性布局。我会这样设置CSS属性：

#myDiv{
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 100px;
  overflow: hidden;
  display: flex;
}

html中display: flex;和display:inline-block;区别

display: flex;和display:inline-block;都可以让块级元素在同一行显示，但是它们之间还是有一些区别的。

display: flex;是CSS3中的新属性，它可以让元素的子元素在一个可伸缩的容器中布局。使用flex布局可以更加方便地实现水平和垂直居中、等高布局等效果。而且，flex布局可以很好地解决浮动元素导致的高度塌陷问题。另外，flex布局还可以通过设置flex-wrap属性来控制子元素的换行。

display:inline-block;可以让元素在同一行显示，并且可以设置元素的宽度、高度、内边距和外边距等属性。但是，使用inline-block布局时，需要注意元素之间的空格和换行符会导致布局出现问题，需要通过设置父元素的font-size: 0;和子元素的font-size: 初始值;来解决这个问题。

综上所述，display: flex;适用于需要更加灵活的布局，而display:inline-block;适用于简单的水平布局。