1

我最近实现了一个菜单，这是菜单教程的链接：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 个示例的效果），所以如果您删除display : block没有任何改变，所有工作方式都与它的工作方式相同display : blcok，所以我假设display : block，对于旧浏览器，不同的浏览器来说可能是这样，但我无法指出原因，所以如果有人知道为什么display : block，我将非常感激, 谢谢大家，祝你有美好的一天。

4

4 回答 4

4

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

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

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

留下它的唯一可能原因是向任何阅读您的 CSS 的人展示您的意图：您希望元素显示为块级元素。

它可能首先被包括在内，因为该 CSS 的作者没有意识到floatforce display: block。

于 2013-08-17T10:28:29.687 回答
1

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

于 2013-08-17T10:22:32.523 回答
1

来源 w3c

在块格式化上下文中，框从包含块的顶部开始一个接一个地垂直排列。两个同级框之间的垂直距离由 'margin' 属性确定。块格式化上下文中相邻块框之间的垂直边距折叠。

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

并回答您的问题

position:relative或float:left/right;使元素表现得像块元素.. display:block; 如果您正在使用position:relative;或float:left/right;

于 2013-08-17T10:27:11.570 回答
0

在这里您可以找到显示属性的所有值及其行为：http ://www.w3schools.com/cssref/pr_class_display.asp

于 2013-08-17T10:23:26.913 回答