为什么？

Question

TL; DR 在我的CSS中更改默认display属性是不好的做法？

问题

最近，在我们的项目中，我们必须定位2个标头标签，使它们看起来像一个。它们具有相同的字体大小和相似的样式，因此唯一的问题是如何将一个放在另一个旁边。我们对此有两个不同的想法，并讨论是否是改变默认display属性的良好做法

所以，我们非常基本的代码

<div class="container">
    <h1>Header:</h1>
    <h2>my header</h2>
</div>

我们希望得到的结果：

标题：我的标题

注意：代码需要包含2个不同的标题，因为在移动版本中我们希望在单独的行中显示它们（因此保留默认display: block）。

方法＃1：使用`display: inline`

这是非常直接的前进。块元素变为内联，因此它们位于同一行。这种方法的缺点是h1和h2的默认显示属性都发生了变化。

方法＃2：使用`float`

H1可以使用float: left属性位于左侧。这种方法使默认显示属性保持不变，但如果.container不够长，无法在单行中同时插入两个标题，则需要一些黑客攻击。

问题

这一切都导致了一个简单的问题：更改HTML元素的默认display属性是不好的做法？是否违反标准，应尽可能避免？或者它是我们的面包和黄油，它并不重要，只要代码在语义上是正确的（所以标题放在h1中，文章放在article等...）

Answer 1

回答你的主要问题：

tl; dr 在我的CSS中更改默认display属性是不是很糟糕？

NO

为什么？

答：因为它完全是关于语义的

定义HTML中的元素，属性和属性值（通过   这个规范）具有一定的含义（语义）。例如，   ol元素表示有序列表和lang属性   代表内容的语言。

这些定义允许HTML处理器，例如Web浏览器或   搜索引擎，提供和使用文档和应用程序   作者可能没有考虑过的各种各样的背景。

所以，在你的情况下，如果你真的需要 在语义上有2个标题那么你可以改变他们的风格，包括< / strong> display 属性。

然而如果您不需要 在语义上有2个标题，而仅用于纯粹的化妆品/设计（响应代码），然后你正在做错误。

看看这个例子：

<h1>Welcome to my page</h1> <p>I like cars and lorries and have a big Jeep!</p> <h2>Where I live</h2> <p>I live in a small hut on a mountain!</p>

因为HTML传达的意思，而不是演示文稿，同一页面   也可以通过手机上的小型浏览器使用，无需任何操作   切换到页面。而不是标题是大字母   例如，桌面上的移动电话上的浏览器可能会使用   整个页面的文本大小相同，但标题为   粗体。

此示例专注于标题，但同样的原则适用   HTML中的所有语义。

** 上面引用的重点是我的 **

PS - 请注意，标题 h1 - h6 不得用于标记副标题（或字幕）），除非它们应该是新章节或小节的标题。

考虑到上述所有这些，这里有一些（好的）方法：

如果您正在完成设计的两个标题，那么：

使用span使用移动优先方法（h1）或非移动方法media query在min-width内添加max-width ）。

PROs - 可以通过CSS轻松管理，只更改属性。

CONs - 使用media queries添加额外的HTML标记。

h1 { /* demo only */ background: red; margin:0 } @media (max-width: 640px) { span { display: block } }

<div class="container"> <h1>Header:<span> my header</span></h1> </div>

如果您需要在语义上使用两个标题：

使用flexbox布局。

PROs - 无需添加额外的HTML标记或使用媒体查询，这是目前CSS中最灵活的（基本上是上面提到的选项中的缺点）。

CONs - IE10及以下版本有部分支持或无支持，Can I use flexbox ?（IE10及以下版本的回退将是 CSS表格）

.container { display: flex; flex-wrap: wrap; align-items: center; /*demo only*/ background: red; } h1, h2 { /*demo only*/ margin: 0; } h2 { /*640px will be flex-basis value - can be changed as prefered */ flex: 0 640px; }

<div class="container"> <h1>Header:</h1> <h2>my header</h2> </div>

<强>来源：

W3C specs - 3.2.1 Semantics

W3C specs - 4.12.1 Subheadings, subtitles, alternative titles and taglines

Answer 2

tl; dr在我的CSS中更改默认显示属性是不好的做法吗？

没有。正如W3C自己所表达的那样; HTML conveys meaning, not presentation

作为HTML作者，构建页面是您的工作，以便页面的每个部分都带有文档所描述的预期语义，以便软件（浏览器，屏幕阅读器，机器人......）可以正确理解您的内容。

作为CSS作者，您的工作是更改正确标记的默认样式，以您希望的方式呈现它。这包括更改默认display属性，与更改默认color。

一样

但是，任何软件都可以决定某些CSS属性的使用方式会改变他们解释您网页的方式。例如，搜索引擎可以决定与其父级color具有相同background的文字对其排名系统不应具有权重。

关于子标题，it's considered incorrect标记带有<hX>元素的子标题。您应该做的是决定一个<hX>元素，将其包装在<header>中并在<p>，<span>或类似内容中包装子标题类型的文本。

以下是适当的小标题示例，取自W3C文档：

<header>
  <h1>HTML 5.1 Nightly</h1>
  <p>A vocabulary and associated APIs for HTML and XHTML</p>
  <p>Editor's Draft 9 May 2013</p>
</header>

请注意，W3C规范与WHATWG specification之间存在差异，后者使用<hgroup>元素用于此特定目的，而前者has deprecated it。我个人使用W3C的例子，但是如果您更喜欢WHATWG方法，大多数软件仍然可以理解hgroup，可能会在很多很多年内出现。事实上，some argue当规格不同时，WATC应遵循WHATWG。

但是，在您的特定示例中，我不确定您为什么选择将<h1>分成两个元素。如果您标记为<h1>的内容实际上应该是通用的＆＃34;标签＆＃34;对于标题，那么它应该被视为副标题。如果您需要将其拆分以进行样式设置，请将<span>中的两部分文本包装成：

<h1>
  <span>Header:</span>
  <span>my header</span>
</h1>

Answer 3

tl; dr在我的CSS中更改默认显示属性是不好的做法吗？

这是一个很好的做法，但要谨慎选择何时使用它，因为它可能会导致一些关键的结构错误。

为什么这是一个好习惯

display属性已更改。它使HTML变得简单和通用。 HTML元素具有与一般行为匹配的默认display值 - 您通常想要的内容。但是他们不必被保持和操纵来模仿另一个display财产。例如，考虑<div>。很明显，大多数时候你希望它有display: block;，但display: flex;偶尔会更合适。

让我们看看一个非常常见的列表示例。 <li>附带list-item的显示属性，可以打破每个新项目的行。

＆＃13;

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

＆＃13;

但水平列表也很常见。那么为什么水平列表项没有特殊元素呢？为每个常见display行为编写特殊元素会增加复杂性。相反，约定as also suggested by W3C是将<li>显示属性设置为inline。

＆＃13;

ul li {
  display:inline;
}

＆＃13;

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

＆＃13;

`display: inline-block;`替代`float`

float已在页面布局中大量使用多年。问题是它没有为此任务创建，最初设计为wrap text around elements。众所周知的float问题是非浮动元素不识别浮动子元素，因为它们正从文档的正常流中移除。您也无法集中浮动元素。你只限于左或右浮动。

display更适合布局多次。 display: inline-block;告诉浏览器将该元素内联，但要将其视为块级元素。这意味着我们可以使用inline-block而不是浮点数来并排显示一系列元素。它更直观，并且消除了浮点数<div class="clearfix"></div>，它是HTML中的additional non semantic element。

当需要浮动元素以便其他页面内容在其周围流动时，浮点数很有用。但是没有必要总是将它们压缩到复杂布局的服务中。

更改`display`

时应避免的事项

更改display属性时请记住：

设置元素的显示属性只会改变元素的显示方式，而不会改变元素的显示方式。

<span>测试用例：

在HTML早期版本中，<span>被视为内联级元素，<div>是块级。内联级元素不能在其中包含块级元素。给<span>一个display:block;并不会改变他的类别。它仍然是一个内联级元素，但仍然不能包含<div>。

HTML5介绍content models。每个HTML元素都有一个内容模型：元素预期内容的描述。 HTML元素必须具有与元素内容模型中描述的要求相匹配的内容。 <span> can contain only phrasing content。这意味着您仍然无法在<div>内嵌套<span>（流内容）。给<span> display:block; {仍然不会改变它。

<强>避免：

span {
  display:block;
}

<span>
  <div>
    Still Illegal!
  </div>
<span>

总之，更改默认display属性无疑是我们的佼佼者。请记住，它只会更改元素的显示方式，而不会更改元素的类型并正确使用它。

现在关于原来的两个标题问题：

关于评论：

为了问题，我们假设我们需要有两个标题。或者让我们暂时忘记标题。 - 由作者

还有评论：

这个问题不是关于全局重置显示值。运用隐含了仅针对特定元素的选择器。该问题是我们应该在选择后对这些元素做些什么。 - 设置赏金的人

并排的两个标题不仅可以处理移动布局的变化，还可以通过多种方式完成。原始示例简单而正确，因此它实际上是一种很好的方式。

＆＃13;

h1, h2 {
  display: inline;
}

＆＃13;

<div class="container">
    <h1>Header:</h1>
    <h2>my header</h2>
</div>

＆＃13;

遵循HTML规则，不需要任何额外的黑客攻击。

Answer 4

确实更改默认行为是多余的，甚至可以达到性能。作为一种主观的解决方案，建议使用flex（但我不确定它的性能，尽管你可以谷歌），它得到了广泛的支持，并没有改变任何元素css属性，它只是一个布局的东西，检查出来

＆＃13;

.container {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: baseline;
}
.container.mobile {
  flex-direction: row;
}

＆＃13;

web
<div class="container">
  <h1>Header:</h1>
  <h2>my header</h2>
</div>
<hr />
mobile
<div class="container mobile">
  <h1>Header:</h1>
  <h2>my header</h2>
</div>

＆＃13;

请注意，h1样式保持不变

Answer 5

更改默认的css属性不是一个好主意，应该避免使用以防止标记中出现不必要的缺陷。相反，您应该为要自定义的所有html元素提供“id”或更好的“class”，并为这些元素设置样式。

此外，使用css如“h1”，“div”等是引擎尝试在页面中找到所有元素的最慢方式。

在你的例子中，只要你给你的h1元素一个css类，使用display或float就没关系了。

此外，使用正确的html元素以获得更好的语义可能对SEO等有用。

Answer 6

更新

似乎我可能已经掩盖了Plunker，因为Anthony Rutledge显然没有看到（或忽略了审查）它。我提供了一个屏幕截图，其中提供了一些有关如何使用Plunker的提示。

PLUNKER - Embed

PLUNKER - iNFO

PLUNKER - Preview

Q＆amp;甲

这一切都导致了一个简单的问题：改变HTML元素的默认显示属性是不好的做法？

不，一点也不。事实上，它是Web开发人员（包括我自己）的一种非常常见的做法，不仅要改变元素的属性，还要改变属性，以及它的内容等等。

是否违反了标准，应尽可能避免？

不，但也许这样做的方式可能会破坏代码本身，IMO比标准更受关注。当然，标准起着重要的作用，但不是必不可少的。如果是这种情况，那么网络浏览器应符合一套通用的标准（我跟你说IE：P）。脱离我的头脑，这是应该避免的事情：

使用table元素作为布局

 <table>
   <tbody>
       <tr>
        <td><img></td>
        <td><input type="button"/></td>
       </tr>
 ...

使用inline styles

  <div style="display: inline-block"></div>

使用inline event handlers

  <div onclick='makeASandwich();'></div>

或者它是我们的面包和黄油并且它并不重要，只要代码在语义上是正确的（因此标题放在h1中，文章放在文章中等等......）

更改元素的显示属性是Web开发的一个非常小但基本上必不可少的方面。所以是的，我认为它可以被认为是面包和黄油，它会使语义用作装饰并且从未吃过的欧芹。 Semantics is subjective，一种思维方式，它不是标准。我相信一个新手应该意识到它的重要性（或至少它对其他人的重要性），但不应该在语义上<article>和<section>之间进行教诲。比使用<main>和<aside>更好。在适当的时候，语义只会感觉正确。

方法＃1：使用display：inline

我从未找到使用display: inline的正当理由，因为display: inline-block is a far better choice。

方法＃2：使用float

花车是脆弱的古董。就像处理奶奶的骨瓷餐盘一样，如果您打算使用它们，您必须采取一些预防措施。请注意如何clear floats并且不要将它们扔进洗碗机。

基本上，如果只给出这两个选项，方法＃1是更好的选择，特别是如果使用inline-block。我远离floats，他们反直觉并容易打破。我记得只使用过一次，因为客户希望文本环绕图像。

CSS＆amp; CSS / JS

提供了一个包含3个演示的片段：

利用display: flex的纯CSS解决方案。
利用display: table-row/table-cell的纯CSS解决方案。
利用display: inline-block和classList API

这些演示中的每一个在表面上都是相同的：

HTML

  <section id="demo1" class="area">
    <!--==Pure CSS Demo #1==-->
    <!--======Flexbox=======-->
    <header class="titles">
      <h1>Demo 1 -&nbsp;</h1>
      <h2>display: flex</h2>
    </header>
   </section>

这是原始标记，包含以下更改：

div.container现在是header.titles
h1文字为：＆＃34;演示 #n ＆＃34;
h2文字为：＆＃34; prop ： value ＆＃34;
section#demo#n.area包裹着一切。

这是语义的一个很好的例子：一切都有意义

您会在视口底部注意到按钮。每个按钮对应一个演示。

有关每个演示如何工作以及优缺点的详细信息，请参见位于Plunker左侧菜单中的以下文件（参见屏幕截图）：

demo1.md flexbox
demo2.md disply: table
demo3.md classList

PLUNKER

进一步说明

演示1和演示2由伪类:target提供支持。点击其中任何一个都会触发click 事件它类似于一个事件，因为它被click调用，但无法控制，或知道捕获或冒泡阶段，如果它确实存在。在进一步点击第一和第二按钮时，它将表现出奇怪的行为，例如：切换另一个按钮然后最终变得不起作用。我怀疑:target的缺点是CSS以完全不同的方式处理事件，很少或没有与用户交互。

Answer 7

最佳做法是将hgroup中的两个标题分组，并使用@media查询更改移动设备和其他视图的显示属性。

<hgroup class="headingContainer">
  <h1>Main title</h1>
  <h2>Secondary title</h2>
</hgroup>

HTML元素（HTML标题组元素）代表一节的标题。它定义了一个参与的单一标题文档的大纲作为隐式或显式的标题它所属的部分。

由于hgroup为某个部分定义了一个标题，因此更改hgroup中的展示属性并非惯常做法。

Answer 8

您应该使用：

$('element').css('display','');

根据当前的CSS级联，将显示设置为元素的默认值。

例如：

<span></span>

$('span').css('display','none');

$('span').css('display','');

将导致span display: inline。

可是：

span { display: block }

<span></span>

$('span').css('display','none');
$('span').css('display','');

Answer 9

您也可以使用弹性框来排列元素，例如

<div class="container" style="display: flex;">
    <h1>Header:</h1>
    <h2>my header</h2>
</div>

尝试阅读有关flex的本教程，它非常好用且易于使用 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

更改默认显示属性是一种好习惯吗？

问题

方法＃1：使用`display: inline`

方法＃2：使用`float`

问题

9 个答案:

NO

为什么？

如果您正在完成设计的两个标题，那么：

如果您需要在语义上使用两个标题：

为什么这是一个好习惯

`display: inline-block;`替代`float`

更改`display`

更新

Q＆amp;甲

方法＃1：使用display：inline

方法＃2：使用float

CSS＆amp; CSS / JS

HTML

进一步说明

更改默认显示属性是一种好习惯吗？

问题

方法＃1：使用display: inline

方法＃2：使用float

问题

9 个答案:

NO

为什么？

如果您正在完成设计的两个标题，那么：

如果您需要在语义上使用两个标题：

为什么这是一个好习惯

display: inline-block;替代float

更改display

更新

Q＆amp;甲

方法＃1：使用display：inline

方法＃2：使用float

CSS＆amp; CSS / JS

HTML

进一步说明

方法＃1：使用`display: inline`

方法＃2：使用`float`

`display: inline-block;`替代`float`

更改`display`