为什么最大宽度不覆盖最小宽度? [英] Why doesn't max-width override min-width?
问题描述
我正在尝试创建一个响应式布局，在该布局中，如果屏幕尺寸允许，则两个框彼此相邻放置，如果不允许，则将它们置于彼此下方.如果这些框彼此位于下方，则我希望它们以它们的父级为中心.我设置了一个jsfiddle来演示该问题:
I'm trying to create a responsive layout in which two boxes sit next to each other if the screen size allows it, and have them below each other if it doesn't. If the boxes are below each other, I'd like them to be centred to their parent. I've set up a jsfiddle to demonstrate the problem:
http://jsfiddle.net/leongersen/KsU23/
width: 50%;
min-width: 350px;
max-width: 100%;
尝试将结果"窗格的大小调整为350px以下.元素将与其父元素重叠.
Try resizing the 'result' pane to below 350px. The elements will overlap their parent.
我的问题:
为什么指定的最大宽度不遵守规定，即使是在最小宽度之后?
Why isn't the specified max-width honoured, even though it comes after the min-width?
推荐答案
由于 CSS标准:
以下算法描述了这两个属性如何影响 'width'属性的使用值:
The following algorithm describes how the two properties influence the used value of the 'width' property:
- 计算出临时使用的宽度(不包括最小宽度"和 'max-width')，请遵循计算宽度和 边距".
- 如果试探性使用的宽度大于 'max-width'，以上规则将再次应用，但这一次使用 计算出的最大宽度"值作为计算出的宽度"值.
- 如果结果宽度小于最小宽度"，则上述规则 再次应用，但这一次使用'min-width'的值作为 计算出的宽度"值.
- The tentative used width is calculated (without 'min-width' and 'max-width') following the rules under "Calculating widths and margins" above.
- If the tentative used width is greater than 'max-width', the rules above are applied again, but this time using the computed value of 'max-width' as the computed value for 'width'.
- If the resulting width is smaller than 'min-width', the rules above are applied again, but this time using the value of 'min-width' as the computed value for 'width'.
因此，最小宽度总是获胜".在特定的CSS规则中，没有优先级，所有值都是原子应用的.优先级仅在不同规则都适用于同一元素时发生，即使如此，它也首先基于特定性，然后才考虑文件顺序.
As such min-width always 'wins'. Within a specific CSS rule there's no precedence anyway, all values are applied atomically. Precedence only occurs when different rules all apply to the same element, and even then it is based on specificity first before file order is considered.
这篇关于为什么最大宽度不覆盖最小宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
