Question

我想知道CSS语言使用％的参考是什么。我有2个问题需要理解这个过程：

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

在对儿童应用%时，是否可以使用容器作为参考（例如position relative和absolute进程）？

Answer 1

答案：

％value是相对于父宽度的;对于1024 x 768，margin-top: 50%;表示从顶部开始为512，对于800 x 600，margin-top: 50%;表示从顶部开始为400。它与不同的分辨率完全不同。
％为什么？身高还是高度？如果它的宽度已经引用了父（容器）。如果它的高度，你可以使用javascript。

Answer 2

CSS中％值的有趣之处在于它完全相对于父元素。想一想：

<强> HTML

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

<强> CSS

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

#container元素的宽度为50％，我们看到可以将父元素视为body标记，因为我没有明确说明父元素。此容器是浏览器窗口宽度的50％。同时#content位于#container内的父元素（#container）的宽度为50％，已经是浏览器宽度的50％。因此，#content与整个浏览器的总宽度为25％（50％的50％）。

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

关于使用CSS的％

2 个答案: