css – 为什么最大宽度不覆盖最小宽度?

前端之家收集整理的这篇文章主要介绍了css – 为什么最大宽度不覆盖最小宽度?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试创建一个响应式布局,如果屏幕大小允许,则两个框彼此相邻,如果没有,则它们彼此相邻。如果盒子彼此相对,我希望他们以他们的父母为中心。我已经建立了一个jsfiddle来演示这个问题:

http://jsfiddle.net/leongersen/KsU23/

width: 50%;
min-width: 350px;
max-width: 100%;

尝试将“结果”窗格调整到350px以下。元素将与父母重叠。

我的问题:

为什么指定的最大宽度不能得到尊重,即使是在最小宽度之后呢?

我当然可以使用媒体查询,但我想知道为什么会发生这种情况。

解决方法

因为 CSS standards

The following algorithm describes how the two properties influence the
used value of the ‘width’ property:

  1. The tentative used width is calculated (without ‘min-width’ and
    ‘max-width’) following the rules under “Calculating widths and
    margins” above.
  2. 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’.
  3. 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规则中,无论如何,无论如何,所有的值都以原子方式应用。优先级只有当不同的规则全部适用于同一个元素时才会发生,即使在考虑文件顺序之前,它也是基于特定的。

原文链接:https://www.f2er.com/css/218564.html

猜你在找的CSS相关文章