混合百分比和固定CSS

Question

这是来自UI.StackExchange.com的重复:https://ux.stackexchange.com/questions/1004/mixing-percent-and-fixed-css

您是否应该将百分比和固定CSS应用在一起？它会引起问题,如果有的话会是什么类型的？

• 混合会降低浏览器渲染性能吗？
• 使用渐进式渲染浏览器,混合会在初始加载时给出奇怪的结果吗？

下面只是混合使用的一个愚蠢的例子,它可以是任何混合物. 我不是在寻找示例的验证. 我听说你永远不应该在下面的例子中做我所拥有的,所以我试图找出以这种方式使用CSS是一个问题.

混合使用示例:

<style>
.container
{
    width:300px;
}
.cell
{
    width:25%;
}
</style>

<table class="container">
     <tr>
        <td class="cell"><td>
        <td class="cell"><td>
        <td class="cell"><td>
        <td class="cell"><td>
     </tr>
</table>

Answer 1

+1好问题.你可能想看看这篇文章:" 固定宽度,液体和弹性布局 "它超过固定宽度布局(em)和弹性布局(%),如果你点击进入下一页它看起来在'弹性液体混合' - 其中宽度:设置为单向,最大宽度:设置另一个.我知道上面链接的文章并不完全是你提出的问题,但它是在单一CSS样式中混合使用的一个例子.

编辑:在进一步阅读之后,我确实发现了很多关于这个主题的矛盾观点.我发现有几篇文章认为" 你不能混淆像素和百分比 ".虽然,在大多数情况下,这些网站相当过时.当我将搜索范围缩小到仅过去一年内提出的文章时,情况发生了一些变化.仍然有一些反对混合的意见,但他们通常没有解释为什么,似乎"我总是听到这是一个坏主意"的变化.我在这个主题上发现的大多数最新信息似乎都表明混合百分比与固定宽度是一种完全可以接受的做法,只要它是在理解结果的情况下完成的.

看到:

• " 固定与流体与弹性布局:适合你的是什么？ "(2009年6月)
• " 为了一个美丽的网络:改变人的布局 "......

全面披露:我已经很多年混频器,没有真正了解我的做法是否"正确".

Answer 2

这可以帮助清除混合百分比和像素的时间,以及何时不是.

在您的示例中执行此操作时,混合百分比和像素宽度不会成为问题;

.container
{
    width:300px;
}
.cell
{
    width:25%;
}

当它成为一个问题是当你颠倒顺序;

.container
{
    width:25%;
}
.cell
{
    width:250px;
}

在这种情况下,如果浏览器窗口(或其父项.container)小于1000px,则25%on .container将小于250px并导致.cell溢出.container.

在宽度加填充的情况下混合百分比和像素时也会出现问题;

.container
{
    width:300px;
}
.cell
{
    width:100%;
    padding: 10px;
}

这将导致.cell宽度为320px(100%+ 10px + 10px)和溢出.container.

如果这有助于澄清问题,请告诉我.