Question

我最近实现了一个菜单，这是菜单教程的链接：http://pepsized.com/css-only-lavalamp-like-fancy-menu-effect/，我的问题发生在：

.nav a {
    display: block; // This line here
    position: relative;
    float: left;
    padding: 1em 0 2em;
    width: 25%;
    text-decoration: none;
    color: #393939;
    transition: .7s; }
    .nav a:hover {
      color: #c6342e; }

正如您可以在此页面上查看：http://pepsized.com/demo/?id=1043（我希望您在此页面上查看的原因是您可以看到所有3个示例都有效），所以如果您删除{{1}没有任何改变，所有的工作方式与display : block的工作方式相同，所以我假设display : blcok，是旧浏览器，不同浏览器的mabye，但我不能指出原因，所以如果有人知道为什么display : block，我会非常感谢，谢谢大家，祝你有个美好的一天。

Answer 1

float: left或float: right强制display的计算值为block。

http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

这就是为什么删除display: block没有任何区别。如果您愿意，可以安全地删除它。

将其留在那里的唯一可能原因是向阅读CSS的人显示意图：您想要将元素显示为块级元素

它可能首先包括在内，因为该CSS的作者不知道float强制display: block。

Answer 2

显示：块告诉浏览器您希望某个元素显示在“块”中：它是浏览器“行”上的唯一元素（因此您不能将多个元素放在彼此旁边）。你也可以使用“内联”，这是相反的。资料来源：https://developer.mozilla.org/en-US/docs/Web/CSS/display

Answer 3

SOURCE w3c

在块格式化上下文中，框一个接一个地布局，   垂直，从包含块的顶部开始。垂直的   两个兄弟框之间的距离由'边距'决定   属性。块中相邻块框之间的垂直边距   格式化上下文崩溃。

在块格式化上下文中，每个框的左外边缘都接触到   包含块的左边缘（从右到左格式化，右边   边缘触摸）。即使在浮子的存在下也是如此（尽管如此）   盒子的内容区域可能因浮动而缩小。

并回答您的问题

position:relative或float:left/right; 使元素的行为类似于块元素。display:block;如果您使用的是position:relative;或float:left/right;

，则不会产生任何影响

Answer 4

您可以在此处找到display属性的所有值及其行为：http://www.w3schools.com/cssref/pr_class_display.asp

CSS，显示：块

4 个答案: