html - CSS3 显示为 block

Question

好吧，我不小心将无序列表显示为

block 样式，如下所示:

li{
  display: block;
}

而且我意识到，当我输入该样式时我的元素符号被隐藏了，所以我不需要添加列表样式，如下所示:

li{
  display: block;
  list-style: none;
}

但是，问题是:显示为 block 的结果是什么？因为我认为，默认情况下

和大多数 HTML 标记显示为 block ，所以首先，我同意无论是否添加“显示: block ”，这都没有任何意义，除了 HTML5 的新标签，例如

<header>、<footer> 等，我确信这是早期浏览器所必需的。提前致谢。

Answer 1

出于同样的原因，您可能希望 li 成为 display: inline，您可能希望 a(这是一个内联元素), 成为display: block。

简单示例:

a {
  display: block;
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 2px dashed red;
}

<a href="#">I'm big!</a>

请注意更大的区域是如何可点击的，您将无法在内联上设置宽度和高度，因此 display: block(或 display: inline-block) 非常适合这个目的。