时间戳

首页 > 解决方案 > 显示类型被未知来源覆盖

html - 显示类型被未知来源覆盖

问题描述

我有一个包含三个元素的容器：一个图像和两个 div：

在此处输入图像描述

我希望所有图像都是内联块，并在他们的类中指定：

 .first_image {
        display: inline-block;
        height: 20px;
        width: 20px;
 }
 .first_div {
        width: 100%;
        display: inline-block;
 }
 .second_div {
        width: 52px !important;
        height: 40px !important;
        display: inline-block;
        background-color: #3798D4;
 }
 .container {
        display: inline-flex;
 }

但是，当我运行和检查时，这些是实际属性：

  1. 容器（类 case-input 是 .container）

在此处输入图像描述

  1. 第一张图片

在此处输入图像描述

  1. 第一个 div

在此处输入图像描述

  1. 最后一个 div（这个有类.edit_pen_container并包含一个按钮）

在此处输入图像描述

问题是 1. 显示为flex虽然应该是inline-flex2.、3. 和 4. 显示为block虽然它们应该是inline-block。我真的不明白为什么它会改变。此外，该属性没有被划掉，所以它似乎没有被覆盖。

顺便说一句，所以你可以理解我的逻辑，img将留在那里，div 1 的宽度为 100%，因为它必须占用 div 的其余部分。当用户将鼠标放在 div 1 中时，会出现 div 2 并将采用固定宽度（52px），并且 div 1 将缩小以允许 div 2 占据它需要的空间。也许我的逻辑是错误的，但这就是我想要做的。

所有 HTML 元素都是通过 javascript 添加的，所以我没有要显示的 DOM 层次结构。

标签： htmlcssflexbox

解决方案

你写了：

问题是 1. 显示为flex虽然它应该是inline-flex2.、3. 和 4. 显示为block虽然它们应该是inline-block......此外，该属性没有被划掉，所以它似乎没有被覆盖。

所以让我们澄清一下：

  • 元素 #1 ( .container) 是一个弹性容器。您是说问题在于您声明display: inline-flex了 ，但浏览器将元素呈现为display: flex.

  • 元素#2、#3 和#4 是#1 的流入子元素。这意味着它们是弹性项目。您是说问题在于您已将这些项目设置为display: inline-block，但浏览器将它们呈现为display: block.

好的。让我们一一讨论这两点。

为什么要display: inline-flex计算display: flex？

因为这是 flexbox 规范所要求的。

§ 3. Flex Containers：flex和inline-flex显示值

如果一个元素的指定display是inline-flex，那么它的 display属性flex在某些情况下计算为：CSS 2.1 第 9.7 节中的表格被修改为包含一个额外的行，inline-flex在“指定值”列和flex“计算值”列中。

因此，在某些情况下inline-flex计算为flex，如上面摘录中链接到的表中所述。这就是您的代码中发生的事情。从技术上讲，它不是一个覆盖，这就是为什么你没有看到被inline-flex划掉的原因。

为什么要对弹性项目进行display: inline-block计算？display: block

同样，因为这是 flexbox 规范所要求的。

§ 4. 弹性物品

弹性项目的display值是块化的：如果指定display的生成弹性容器的元素的流入子项是内联级值，则它计算为其块级等效值。

另请注意，您无法控制display弹性项目的值。一旦你让一个元素成为一个弹性容器，display弹性项目的属性就由弹性算法控制。display浏览器会忽略对弹性项目设置规则的尝试。这就是您在代码中看到的内容：display: inline-block被忽略（但同样，技术上没有被覆盖，这就是为什么inline-block没有被划掉）。

推荐阅读