混合％，而固定的CSS [英] Mixing percent and fixed CSS

问题描述

这是从UI.StackExchange.com重复：

<一href=\"http://ui.stackexchange.com/questions/1004/mixing-percent-and-fixed-css\">http://ui.stackexchange.com/questions/1004/mixing-percent-and-fixed-css

如果你曾经使用比例和固定CSS在一起吗？它会引起问题，如果是什么样的？

• 混合是否降级的浏览器渲染性能？


• 将混合给你初始加载奇怪的结果与渐进式渲染的浏览器？

下面只是混合使用的简单化向下例如，它可以是任何混合物。 我不是在寻找的例子验证。我听说你永远不应该做的事情我在下面的例子中，所以我试图找出如果以这种方式使用CSS是一个问题。

示例混合用法：

 ＆LT;风格＆GT;
。容器
{
    宽度：300像素;
}
。细胞
{
    宽度：25％;
}
＆LT; /风格＆GT;＆LT;表类=容器＆GT;
     ＆所述; TR＆GT;
        ＆所述; TD类=小区＆GT;＆下; TD＆GT;
        ＆所述; TD类=小区＆GT;＆下; TD＆GT;
        ＆所述; TD类=小区＆GT;＆下; TD＆GT;
        ＆所述; TD类=小区＆GT;＆下; TD＆GT;
     ＆LT; / TR＆GT;
＆LT; /表＆gt;
 

解决方案

+1问得好。你可能想看看这篇文章：固定宽度，液体和弹性布局它越过固定宽度布局（EM）和弹性布局（％），如果你点击进入它着眼于弹性液混合型的下一个页面 - 其中width：被设置的一种方式，以最大-width：设置其它。我知道联系到上面的文章是不是的究竟的你问，但它是一个单一的CSS样式内混合使用的例子。

---

编辑：一些进一步的阅读后，我确实发现关于这个问题的不少矛盾的意见。我发现了几个文章，举办理念，即你就不能混淆像素和百分比。虽然，在大多数情况下，这些位点相当过时。当我缩小搜索只已经投入了过去一年内物品，事情改变了一点。仍然有对混合了一些意见，但它们通常没有解释为什么，似乎的我一直听说这是个坏主意的品种。
我已经在话题中发现的大多数较新信息似乎表明，具有固定宽度比例混合是一个完全可以接受的做法，只要它的结果的理解完成。

请参阅：

• <一个href=\"http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/\">Fixed与流体与弹性布局：？什么是适合你的（2009年6月）


• 一个美丽的网络：改变人类布局
  ...

披露：'正确的'我已经很多年混频器，没有的真正的知道我的做法是否是

This is a duplicate from UI.StackExchange.com:
http://ui.stackexchange.com/questions/1004/mixing-percent-and-fixed-css

Should you ever apply percentage and fixed CSS together? Will it cause problems, and if so what kinds?

• Does mixing degrade browser render performance?
• Will mixing give you weird results on initial load with progressive rendering browsers?

Below is just a dumbed-down example of mixed usage, it could be any mixture. I am not looking for validation of the example. I have heard you should never do what I have in the example below, so I am trying to find out if using CSS in this manner is an issue.

Example mix usage:

<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>

解决方案

+1 Good question. You may want to have a look at this article: "Fixed-width, liquid, and elastic layout" It goes over fixed width layout (em) and elastic layouts (%), and if you click to go to the next page it looks at 'Elastic-liquid hybrid' - where width: is set one way, with max-width: set the other. I know the article linked to above isn't exactly what you asked, but it's an example of mixed use within a single CSS style.

---

Edit: After some further reading I did find a quite a few contradictory opinions on the subject. I found several articles that held the idea that "you just can’t mix up pixels and percentages". Though, for the most part, these sites were fairly dated. When I narrowed the search to only articles that have been put up within the past year, things changed a bit. There were still a few opinions against mixing, but they typically didn't explain why, and seemed to of the "I always heard it was a bad idea" variety. The majority of more recent information that I've found on the topic seems to indicate that mixing percentage with fixed widths is a perfectly acceptable practice, as long as it's done with an understanding of the results.

see:

• "Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?" (Jun 2009)
• "For A Beautiful Web: Changing Man Layout" ...

Full Disclosure: I've been a mixer for many years, without really knowing whether my approach was 'correct.'

这篇关于混合％，而固定的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！