Question

我是CSS新手。我正在观察一个奇怪的CSS行为，其中一个元素具有以下CSS属性

.container .header{
  color: #FFFFFF;
  font-size: 2em;
  font-weight: bold;
  padding: 5px;
  position: relative;
  text-align: center;
  top: 21%;
}

当页面加载Mozilla和chrome时，不会应用top属性，但检查firebug会显示该属性。当我仅用1px在firebug中编辑时，元素就会正确对齐，即使我在此之后将顶值设置为21％，位置也是正确的。仅在加载时，不应用CSS属性。你能告诉我哪里出错了吗？

Answer 1

我确切地知道它现在是什么。它的风格类名称本身。经过多次测试后，我发现：

.container, .header {
  color:#ffffff;
  font-size:2em;
  font-weight:bold;
  padding:5px;
  position:absolute;
  text-align:center;
  top:21%;
}

注意.container之后的内容？一个COMMA。在每个继承了相同属性的类名后，您需要一个逗号！希望这有帮助！

Answer 2

这是因为您正在以百分比计算top值，为了实现这一点，您需要为其父级container声明一个高度。

.container, body, html {
    height:100%;
}

添加上面的规则，看看它是否有效。 FIDDLE HERE

注意 - body和html也需要声明其高度（以百分比或像素为单位），因为容器的父级为body且像这样。

页面加载时不应用css规则

2 个答案: