Question

使用css px值时，为什么我有时可以使用百分比，但有时我必须使用像素（element）或top: 25%赢得＆＃39; t回应。

例如（在给定元素上）：

top: 150px - 没有回复

px - 作品

我通常会使用百分比而非像素（%）来保持响应，但为什么百分比（btnSomeButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { // Prevent Two Click Utils.preventTwoClick(view); // Do magic } });）有时不起作用？在什么情况下每个工作最好？感谢。

Answer 1

根据the WC3 specification 百分比单位（<percentage> ^（ref））：

百分比值始终相对于另一个值，例如a 长度单位。

长度单位（<length> ^（ref））是一种CSS数据类型，表示距离值，或 relative （em）或绝对（px）长度单位中定义的值。

百分比单位（<percentage> ^（ref））是一种CSS数据类型，表示百分比值。

嵌套元素上使用的百分比单位（例如：top: 50%）如果包含元素没有长度单位，则不会适用（例如：{ {1}}）值已定义，因为百分比值始终相对于另一个值 可以在下面嵌入的代码段中观察到此行为。

代码段示范：

＆＃13;

height: 200px

＆＃13;

.fixed-height {
    height: 200px;
    background: #4cbd2f;
}

.auto-height {
    background: #d04f38;
}

.nested {
    top: 50%;
    position: relative;
}

hr {
    border: 2px dashed #d4d4d4;
    margin: 25px 0px;
}

.fixed-height, .auto-height {
    padding: 10px;
    box-sizing: border-box;
    border: 2px dashed rgba(0, 0, 0, 0.3);
}

＆＃13;

在上面的代码段中显示，百分比值将取决于长度值。因此，虽然两个嵌套元素都声明了<h3>Fixed Height</h3> <h4><code>height: 200px</code></h4> <div class="fixed-height"> <div class="nested"><code>top: 50%</code></div> </div> <hr> <h3>Auto Height</h3> <h4><code>height: auto</code></h4> <div class="auto-height"> <div class="nested"><code>top: 50%</code></div> </div>属性top，但只有嵌套在包含 length 值明确定义的50%属性的包含元素中的元素才会导致预期的行为。

注意：虽然height值也是CSS尺寸，但是可用于某些接受<percentage>值的相同属性，它们本身不是<length>值。 ref

注意：只能继承计算值。因此，即使是百分比值用于父属性，一个实际值（例如可以访问<length>值的宽度（以像素为单位）继承属性，而不是百分比值。 ref

Answer 2

尝试：

.example {
    margin-top: 10px;
    display:inline-block;
}

这有时对我来说有问题。您需要配置它以显然满足您的需求，但通过添加display:inline-block它通常可以解决问题。

使用＆＃39; px＆＃39;时，top，right，bottom，left css值的行为vs＆＃39;％＆＃39;

2 个答案: