CSS的布局中立标签?

Layout-neutral tag for CSS?

提问人:Pekka 提问时间:11/18/2009 最后编辑:Pekka 更新时间:4/28/2018 访问量:7780

问:

HTML (4) 中是否有“不可见”标签可以用来区分 CSS

tag.myclass tag.mysubclass h1 {  } 

对呈现的 HTML 没有任何视觉影响?

我的背景是,我有属于不同群体的领域。当我在灯箱中打开它们时(长话短说,涉及 DOM 操作之类的,并不重要),我不想依赖通常的元素或设置后续元素的样式,因为我必须重置此处的边距,那里的填充,等等。div class=xspan class=y

在这种情况下,布局中立的包装标签正是我所需要的。

HTML CSS格式

评论

0赞 Robert K 11/18/2009
如果您为无类和无 id 的 DIV 元素填充和边距提供了填充和边距,那么您就犯了一个错误。这个标签的目的正是你在这里所要求的。所以,如果你破坏了标签的目的......我建议你修复它并使用它。
1赞 Pekka 11/18/2009
嗯,你对边距和填充是正确的,但 DIV 是一个块元素,因此即使完全重置也不是布局中立的。默认情况下,它将始终尝试拉伸到 100% 宽度,依此类推。
0赞 codeinthehole 11/18/2009
我认为最好将添加包装器 DIV 视为可以为您带来优势的好处。您可以通过对元素进行分组,以简单的方式定位元素。DI征服;)(对不起,忍不住了)

答:

5赞 codeinthehole 11/18/2009 #1

如果要对元素进行分组,请使用 div 或 span 标记作为包装元素。将您的 id 或类应用于此,并相应地设置其样式。

编辑

没有“不可见”标签 - 但边距和填充可以很容易地重置为“margin: 0;填充:0;'

5赞 Sam DeFabbia-Kane 11/18/2009 #2

不,没有。

(那是因为这样的元素并不能真正融入 HTML 的其余部分。DIV 和 SPAN 影响周围区域的唯一原因是因为它们分别是块元素和内联元素。什么是“看不见”的元素?如果你需要一些完全独立的东西,绝对(或相对)定位它,并给它一个更高的z指数。

评论

10赞 Chetan S 11/18/2009
*咳*标签 *咳*;)<font>
10赞 Pekka 11/18/2009
不要让死人复活!:)
-1赞 Ethan Turkeltaub 11/18/2009 #3

你可以添加它。这不会显示它(显然)。display: none;

评论

1赞 Pekka 11/18/2009
不,我不是这个意思。我的意思是一个周围的标签(包装器),它本身没有可见性,但所有子元素都被渲染,就好像包装器不存在一样。
5赞 Tim Hettler 11/18/2009 #4

虽然所有浏览器都为许多 HTML 标签提供默认样式,但其核心 HTML 只描述数据,不格式化数据。

您可能要查找的是 DIV 标签,因为没有浏览器为该标签提供任何默认样式。

3赞 Alan 11/18/2009 #5

我想你想要一个<字段集>

评论

0赞 Damovisa 11/18/2009
这通常带有内存中 UI 中的一些边框......不过我可能弄错了......
0赞 Pekka 11/22/2009
是的,我认为字段集不是“不可见的”。尽管如此,出于相关目的重置和“滥用”将是一个很好的标签。+1.
1赞 Kamil Szot 4/29/2014
fieldset 充其量表现为 div,但它的行为可能更糟
0赞 Alan 5/2/2014
诚然,<fieldset>带有默认的浏览器样式,可能很难重置。
3赞 jeroen 11/18/2009 #6

我会说 span 标签是中性的。我不认为有任何浏览器应用边距或填充,它只是环绕它的内容。

评论

0赞 nu everest 8/29/2016
如果您想在其中放置 div 或其他块元素,通常不建议这样做。stackoverflow.com/questions/5432397/......虽然它似乎在我的浏览器中有效 codepen.io/nueverest/pen/grVKVJ
0赞 Kamil Szot 12/1/2010 #7

我怀疑您可以使用没有常用属性的 <object> 标签来实现此目的,但我还没有彻底测试它。它甚至在 HTML5 中(与 FONT 标签不同)。

0赞 Fernando D Jaime 4/28/2018 #8

正确的答案是使用 div 标签并为其定义一个类。下面是一个示例:

<h2 style="font-size: 14px">Project 1 - Project 2 
  <div class="username">{% if request.user.is_authenticated%} Welcome {{request.user.username}} {% endif %}</div>
</h2>

然后在你的 CSS 文件中,你可以有一个这样的类:

.username {
    color:white; 
    float:right;
    padding-right: 100px;
}

瞧!!它都属于 h2 标签,但用户名应用了不同的 css。