混合百分比和固定 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3600204/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Mixing percent and fixed CSS
提问by rick schott
This is a duplicate from UI.StackExchange.com:
https://ux.stackexchange.com/questions/1004/mixing-percent-and-fixed-css
这是 UI.StackExchange.com 的副本：https://ux.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?
你应该同时应用百分比和固定 CSS 吗？会不会引起问题，如果会，是什么问题？
- 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.
下面只是一个混合使用的简化示例，它可以是任何混合。 我不是在寻找对示例的验证。我听说你永远不应该做我在下面的例子中所做的，所以我试图找出以这种方式使用 CSS 是否有问题。
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>
采纳答案by S.Jones
+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 exactlywhat you asked, but it's an example of mixed use within a single CSS style.
+1 好问题。你可能想看看这篇文章：“固定宽度，液体和弹性布局”它涵盖了固定宽度布局（em）和弹性布局（％），如果你点击进入下一页它看起来在'弹性-液体混合' - 其中宽度：以一种方式设置，最大宽度：以另一种方式设置。我知道上面链接的文章并不完全符合您的要求，但它是在单个 CSS 样式中混合使用的示例。
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" ...
- “固定布局、流动布局、弹性布局：哪种布局最适合您？”（2009 年 6 月）
- “为了美丽的网络：改变人的布局”......
Full Disclosure: I've been a mixer for many years, without reallyknowing whether my approach was 'correct.'
全面披露：我做了很多年的混音师，但并不真正知道我的方法是否“正确”。
回答by Jo Sprague
This should help clear up when it is ok to mix percent and pixels and when it is not.
这应该有助于澄清什么时候可以混合百分比和像素，什么时候不能。
Mixing percent and pixel widths wouldn't be a problem when you do it as in your example;
当您按照示例进行操作时，混合百分比和像素宽度不会成为问题；
.container
{
width:300px;
}
.cell
{
width:25%;
}
When it becomes a problem is when you reverse the order;
当它成为问题时是当您颠倒顺序时；
.container
{
width:25%;
}
.cell
{
width:250px;
}
In this case, if the browser window (or the parent of .container) is less than 1000px, 25% on .containerwill be less than 250px and cause .cellto overflow .container.
在这种情况下，如果浏览器窗口（或 的父窗口.container）小于 1000px，则 25% on.container将小于 250px 并导致.cell溢出.container。
It also becomes a problem when you mix percent and pixels in the case of width plus padding;
在宽度加填充的情况下混合百分比和像素时也会出现问题；
.container
{
width:300px;
}
.cell
{
width:100%;
padding: 10px;
}
This will cause .cellto have a width of 320px (100% + 10px + 10px), and overflow .container.
这将导致.cell宽度为 320px (100% + 10px + 10px) 和 overflow .container。
Let me know if that helps clear things up.
让我知道这是否有助于解决问题。
回答by mikemerce
The way you have it is fine. Each cell calculates to 75px. The only times you have to be careful with percentages is when rounding kicks in.
你拥有它的方式很好。每个单元格计算为 75px。唯一需要注意百分比的时候是四舍五入开始时。
In your example, if you're container was 303px, each cell would evaluate to 75.66666px and round up to 76px, for a total of 304px which would be larger than the container. That one pixel causes all kinds of trouble.
在您的示例中，如果您的容器为 303 像素，则每个单元格的计算结果为 75.66666 像素并向上舍入为 76 像素，总共 304 像素将大于容器。那一个像素会引起各种麻烦。
回答by rick schott
From the research I have done, it appears how you target your CSS(id,class,universal...etc) is most important in browser render performance.
从我所做的研究来看，你如何定位你的 CSS(id,class,universal...etc) 对浏览器渲染性能来说是最重要的。
回答by Moin Zaman
I can't find any documented evidence with test cases to prove this. Could you point us to where you read about this?
我找不到任何带有测试用例的书面证据来证明这一点。你能告诉我们你在哪里读到的吗？
I find mixing the two quite useful and I see it a lot out in the wild on reputed / high traffic sites also.
我发现将两者混合使用非常有用，而且我在知名/高流量网站上也经常看到它。
The only issue that mostly affects older browsers and IE is rounding. Have a read here:
唯一主要影响旧浏览器和 IE 的问题是四舍五入。在这里阅读：
http://ejohn.org/blog/sub-pixel-problems-in-css/
http://ejohn.org/blog/sub-pixel-problems-in-css/
http://agilewebmasters.com/robert/percentage-rounding-and-sub-pixel-perfection/
http://agilewebmasters.com/robert/percentage-rounding-and-sub-pixel-perfect/
