logo标签列表

混合使用百分比和固定CSS

cssperformancebrowserrenderingcross-browser
38

以下来自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>
我经常使用混合（mixes）功能，通常没有问题。很多高流量的网站都使用它，我从来没有听说过有人说“不要那样做”。如果符合您的需求，请使用它 :) - Kyle
@Kyle，性能问题可能出现在客户端，比如一个包含大量行和嵌套表格等内容的页面，如果网站的页面只包含一两个表格，那么这种方法不会对高流量网站造成问题。 - aularon
5个回答
34
+1 好问题。您可能想看一下这篇文章：“Fixed-width, liquid, and elastic layout”，它介绍了固定宽度布局(em)和弹性布局(%)，如果单击进入下一页，则会查看“弹性-液体混合”——其中width: 设置为一种方式，而max-width: 设置为另一种方式。我知道上面链接的文章并不完全是您所要求的内容，但它是一个使用单个CSS样式中混合使用的例子。

编辑：经过进一步阅读，我发现在这个问题上存在很多相互矛盾的观点。我找到了几篇文章认为“你不能混用像素和百分比”。尽管大部分网站都已经有些过时了。当我将搜索范围缩小到过去一年内发布的文章时，情况有所改变。仍然有一些反对混用的意见，但他们通常没有解释原因，并且似乎只是基于“我总是听说这是个坏主意”的理由。

我找到的更多近期信息表明，混用百分比和固定宽度是可以接受的做法，前提是对结果有充分的了解。

参见：

完整披露：多年来，我一直在混用，但并不真正知道我的方法是否“正确”。

5

我可以帮助澄清什么情况下可以混合使用百分比和像素，以及什么情况下不行。

当您按照您的示例这样做时，混合使用百分比和像素宽度不会成为问题；

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

当你反转顺序时，它就成为了一个问题；
.container
{
    width:25%;
}
.cell
{
    width:250px;
}

在这种情况下，如果浏览器窗口（或.container的父元素）小于1000像素，则.container上的25％将小于250像素，并导致.cell溢出.container。
当您在宽度加填充的情况下混合使用百分比和像素时，这也会成为问题。
.container
{
    width:300px;
}
.cell
{
    width:100%;
    padding: 10px;
}

这将导致.cell的宽度为320像素（100% + 10像素 + 10像素），并且溢出到.container中。
如果有帮助，请告诉我。
这有所帮助，但我真正想知道的是混合可能如何混淆渐进式渲染的初始加载以及对浏览器性能的影响。 - rick schott
如果你仔细想一下，任何具有百分比宽度的元素都包含在某个“固定”宽度的HTML元素中。如果说有什么区别的话，对于旧浏览器来说，将百分比（25%的25%的50%的HTML）叠加可能比将百分比宽度放入固定宽度（25%的300px）更困难。 - Jo Sprague
4
您的写法很好。每个单元格计算为75px。只有在舍入时需要小心百分比。
例如，如果您的容器为303px，则每个单元格将计算为75.66666px并向上舍入为76px，总共为304px，这将大于容器。那一个像素会引起各种麻烦。
2
1
我没有任何证据，这很像大脚怪。 :) 我正在试图揭穿这个神话，如果它是一个神话的话，从可能知道真相的人那里了解；因为我确实不知道。 - rick schott
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接