5

我试图理解 CSS 上的图像精灵，一行代码看起来像这样。

#navlist li, #navlist a{height:44px;display:block;}

我只是想知道 display:block 对“a”有什么影响，我知道它是针对“a”标签的，因为如果我删除了“a”链接将不起作用，反之，如果我删除了“display:block” ，我只是想知道为什么它应该是“显示：块”。

4

2 回答 2

7

使内联元素（a、span 等）表现得像一个盒子模型元素（div、p、h1 等），换句话说，使a标签表现得像一个div标签。

内联元素可以并排存在于同一行，例如，如果您编写

<a href="example.com">Link1</a> <a href="example.com">Link2</a>

它们看起来像Link1 Link2 但盒子模型元素不能位于同一行，例如，如果你写类似

<div>Box1</div><div>Box2</div>

他们会看起来像

Box1
Box2

两个 div 将占据它们周围的整个空间（即使它们的宽度更小）。例如，在一个列表中，

<li><a href="">Home</a></li>

如果列表宽度是，300px那么 a 标签将不会覆盖 li 宽度的整个宽度，因为默认情况下a标签是inline并且 usingdisplay:block将使a元素占据整个宽度li，即使它不是那么宽。

关于这个还有很多要说的，我只是给你举了一个例子，你应该阅读更多。检查此链接并检查此示例。

于 2013-05-20T06:46:26.497 回答
3

w3schools 的解释display:block是休闲

The element is displayed as a block-level element (like paragraphs and headers)您可以在此处 检查显示行为

实际上我们主要display:block在四种情况下使用

  1. 元素不包含任何内容，但需要显示为固定大小的块。例如：与背景图像链接，但打开和关闭锚标记之间没有文本。
  2. 元素需要以固定大小显示，忽略根据内容的自动大小。
  3. 有一组元素，每个元素都应显示在每一行中（每行一个元素）。
  4. 要实现显示隐藏，我们可以使用diaply:none和display:block

display但是链接功能与or没有任何关系CSS，链接显示相互依赖，CSS 为锚标记编写，只是为链接设置样式。

这是有关https://developer.mozilla.org/en-US/docs/Web/CSS/display的更多详细信息display

于 2013-05-20T06:47:47.813 回答