Question

我理解div的区别。

但是在svg：

<svg>
    <rect display="block" id="svg_3" height="57" width="52" y="20" x="41" stroke-width="5" stroke="#000000" fill="#FF0000"/>

     <rect display="inline" id="svg_3" height="57" width="52" y="20" x="120" stroke-width="5" stroke="#000000" fill="#0000BB"/>
</svg>

似乎产生相同的结果......（'无'隐藏元素tho）这是jsfiddle： https://jsfiddle.net/foreyez/3c7va377/

有什么区别，什么是默认值，内联或阻止？

Answer 1

根据SVG specification

display：none的值表示不应直接呈现给定元素及其子元素（即，渲染树中不存在这些元素）。除none或inherit之外的任何值都表示给定元素应由SVG用户代理呈现。

所以除了none之外的所有东西都被完全相同。

SVG不是HTML，它没有回流的概念（即一个元素的位置变化不会影响除文本中的tspan和tref之外的其他元素。）

Answer 2

之所以进行搜索，是因为页面中有一个svg，其中周围元素的高度比svg的实际高度高5px。

据我所知，如果您使用display="none"，display="block"或display="inline"，确实有所不同。

就像图像一样，svg下方有空间。因为默认情况下它们是内联块元素（在某些浏览器中为内联）。因此，它们与文本并排放置：在svg下可见的空间是字母'p'和'q'的后代。

这可以通过在div中放置svg来看到。如果svg是24px。高，则div的高度（例如）为29像素。

display="block"将阻止svg保留该空间，因此放置svg的div将具有相同的高度。

Answer 3

在我的实践中，当我使用<svg>标记时-浏览器（Google Chrome版本80.0.3987.100（正式版本）（64位））将其解释为 内联元素默认情况下。它表现为标准的内联元素。如果它符合display: block CSS属性-它的行为就像标准 block元素

如果我们进行了一些研究并落入dev工具中任何svg-child元素上的 computing 标签中，那么我们将看到它具有display inline属性。即使我们将svg display: block设置为默认值，svg-child元素仍将保留为内联元素

显示内联和svg元素上的块之间的区别

3 个答案: