1

我想知道 CSS 语言使用的百分比到底是什么。我有两个问题要理解这个过程：

为什么我们必须更改不同设备分辨率的值（例如，如果我想在屏幕中间放置一个元素，为什么它不适margin-top: 50%;用于每种情况）？

有没有办法在%对孩子应用 a 时使用容器作为参考（如position relativeandabsolute过程）？

4

2 回答 2

0

答案：

  1. % 值是相对于父宽度的；margin-top: 50%;对于 1024 x 768 表示距离顶部 512，margin-top: 50%;对于 800 x 600 表示距离顶部 400。它绝对不同于不同的分辨率。

  2. ％ 为了什么？高度还是宽度？如果它的宽度已经引用了父（容器）。如果它的高度，你可以使用javascript。

于 2013-04-15T03:00:12.520 回答
0

CSS 中 % 值的有趣之处在于它完全与父元素相关。这样想：

HTML

<div id="container">
    <div id="content">Hello</div>
</div>

CSS

#container, #content { width: 50%; }

该#container元素将具有 50% 的宽度，我们看到可以假设父元素是body标签，因为我没有明确声明父元素。这个容器是浏览器窗口宽度的 50%。同时#content，它的内部#container将有 50% 的宽度到父元素 ( #container)，这已经是浏览器宽度本身的 50%。#content因此，与整个浏览器相比的总宽度为25%（50% 的 50%）。

如果你想知道 CSS 中百分比的像素值，简短的回答是......你不能. 如果你想以百分比的形式确定这个值，那么你将需要使用 Javascript。但这并不全是坏事，但您也应该明白，通过 Javascript 应用样式并不是真正的最佳实践。这应该以创建 CSS 类的方式完成，然后使用 Javascript 添加或删除这些类以更改样式。但是，如果您只是希望获得该像素值而不相应地更改任何 CSS 样式，那么我刚才提到的内容并不重要。数字是一天结束时的数字，但 CSS 的重点从来不是做算术，它是一种将样式应用于最初继承浏览器定义的样式的 HTML 元素的简单方法。Javascript 是作为一种在前端分析数据并为网站创建动态存在的方法而发明的。CSS 从来没有为此目的而创建，并且符合当今的编码标准。

于 2013-04-15T03:05:41.187 回答