1

请先查看代码：html：

<!DOCTYPE html>

<html>

<head>
    <title>hello</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
    <div id="container">
        <div id="menu">
            <a href="#" class="button">HOME</a>
        </div>
    </div>
</body>

</html>

CSS：

#container
{
    width: 80%;
    margin: auto;
    height: 450px;
}

#menu
{
    background-color: #1b9359;
    height: 25%;
}

.button
{
    text-decoration: none;
    float: left;
    font: bold 1.2em sans-serif;
    line-height: 115px;
    margin-left: 20px;
    display: block;
    text-align: center;
}

.button:hover
{
    background-color: #2cd282;
}

所以我想要实现的是，当我将鼠标悬停在主页按钮上时，整个 div 会改变颜色，并且不会在缩放时扭曲或错位。一个答案告诉我，我可以使用 display: block，但正如您所见，它不起作用。但是，当菜单窗格像垂直列而不是水平列时，我确实设法使其与 display: block 一起使用。谁能解释为什么会发生这种情况，以及 css 的显示属性如何影响该元素？以及如何在没有变焦失真的情况下实现全高光？

4

1 回答 1

1

如果您使用百分比作为高度和/或宽度，那么它将是父容器的百分比。

如果您希望您的页面在使用缩放时表现良好，即。ctrl + 鼠标滚轮向上或向下，使用 em 调整页面中所有内容的大小。默认情况下 1 em = 16px。习惯使用 em。拿出一个计算器并开始转换东西。相信我，拥有一个可以直接放大而不会混乱的页面是值得的。

只要您对中心内容使用自动边距，您最外层的容器就可以使用百分比，这是使用 em 的一个例外，这样事情仍然会以所有分辨率为中心。当我说最外面的容器时，我的意思是身体......

在我告诉你如何使它工作之前，我将回答其他问题：

“......我确实设法使它与 display: 一起工作，当菜单窗格像垂直列而不是水平列时阻止。谁能解释为什么会发生这种情况，以及 css 的 display 属性如何影响该元素？”

块元素垂直堆叠在一起。这意味着在垂直排列中，如果缩放级别发生变化，这些元素将完美地占据右侧的额外空间。现在，如果它们打算水平排列，则显示块将不起作用，因为这根本不是它的作用。Display inline-block 会将它们水平堆叠，保留为容器设置的高度和宽度，令我沮丧的是，在元素之间添加微小的边距，这与使用浮动不同，这会触及前一个元素，但浮动绝对不是我想要的推荐导航菜单。

假设您有第一个链接，它是 display:block。它将开始自己的新水平线，假设在它之前没有一个 float:(side) 项目并有额外的空间来填充。在这种情况下，您可以添加 clear:both(或 :left/:right) 来克服这个问题。现在假设您要在第一个链接的右侧添加第二个链接，即 display:block。第二个可以是 display:inline-block，它与第一个处于同一级别，但如果你反过来这样做，第二个，即 display:block，将在它自己的新开始下面的行。

现在，让你的按钮做你想做的事：

为了给您一个很好的答案，我假设屏幕宽度（以像素为单位）为 1280 像素。所以其中 80% 是 64em。即 (1280px * .80)/16px = 64em，因为 1em = 16px。正如我之前提到的，我们这样做是为了让您的网站在缩放时具有弹性。

您之前已将 #container 指定为 height:450px; 所以让我们转换它。450px/16px = 28.125em（em 值可以到小数点后三位，但不能多）这很好，所以我们有一个精确的转换，而不是一个四舍五入的值。

容器现在完成了，应该是这样的：

#container
{
    width: 64em;
    margin: auto;
    height: 28.125em;
}

接下来在#menu 中更改高度。你有它作为高度：25％。那是 450px/or/28.125em 的 25% 如果我们将其保持在 25%，它会弄乱缩放。所以让我们转换。28.125em/4 = 7.03125em

这次我们必须四舍五入到小数点后 3 位。所以我们得到 7.031em。

菜单现在完成了，应该是这样的：

#menu
{
    background-color: #1b9359;
    height: 7.031em;
}

接下来是您的按钮类。

.button
{
    text-decoration: none;
    float: left;
    font: bold 1.2em sans-serif;
    line-height: 115px;
    margin-left: 20px;
    display: block;
    text-align: center;
}

在这一点上，我对 CSS 将如何反应失去了一些确定性，但我将从这个开始。不要同时使用 float:left 和 Display:anything。在这种情况下，请使用 display:inline-block。摆脱浮动：左。我不确定你为什么要设置行高。我猜这是您尝试为按钮设置高度的方式，因为它比 #menu 的高度大 2.5px（.button 的行高 = 115px，#menu 的高度 = 112.5px，我们已经转换了至 7.031em）。如果这就是你想要做的，那么你做错了。摆脱线高，使其与容器的高度相同，以便填充它。高度：7.031em；

我假设如果你正在制作一个水平菜单，你并没有试图让一个按钮占据整个宽度。如果你不给它一个宽度，它会填满整行。我会很大胆，我猜你可能希望你的按钮在宽度是高度的两倍的范围内。让我们选择 15em(240px)。宽度：15em；

最后是左边距... 20/16 = 1.25em。蛋糕。

现在我们有：

.button
{
    text-decoration: none;
    font: bold 1.2em sans-serif;
    height: 7.031em;
    width:15em;
    margin-left: 1.25em;
    display: inline-block;
    text-align: center;
}

请记住，块元素，无论是否内联，在您添加的 margin-left 顶部几乎没有内置边距。

如果您进行这些更改，您的页面应该会很好地缩放，并且您的链接将垂直填充其容器，但要保持指定的宽度以保持干净。如果要避免缩放倾斜，切勿使用 px 或百分比。body 容器默认为 100%，但它容纳了所有东西，因此中心的东西似乎向边缘向外生长，因此没有显示任何不基于 em 设置的 body 的可见效果，它也使页面自然友好，具有各种屏幕分辨率。

我希望这有帮助。

编辑：

正如我所提到的，我失去了一些确定性。该行：

font: bold 1.2em sans-serif;

删除该行是否使容器大于 7.031em 可以解决问题，但如果您坚持使用 1.2em 的字体大小，我不知道补救措施。我尝试将高度设置为 6.831em 而不是 7.031em，但它没有成功。

还有一些提示：

1）如果你仍然觉得你需要一个边距，也许 margin-right 更适合你，这样你就不会在左边有随机的松弛空间。

2) 我提供的 CSS 没有针对链接文本的垂直对齐进行调整；修复它添加 line-height:7.031em; 到 .button 类。注意：此方法只适用于单行文字！！！

于 2013-06-28T01:27:26.343 回答