Почему:
width: 98%;
max-width: 1140px;
сделать то же самое, что и
width: 1140px;
max-width: 98%;
Первый имеет смысл в том, что я говорю, что ширина составляет 98%, но не превышает ширину 1140 пикселей.
Второй, однако, сказал бы, что страница имеет ширину 1140 пикселей, но затем ДОЛЖНА идти так же, как и страница на 98% вправо? Так, например, в прошлом 1140px... но, по-видимому, нет, поскольку он делает то же самое, что и первый.
Может кто-нибудь объяснить, почему?
Из моего понимания свойств:
if width > max-width use max-width
if max-width > width use width
Поэтому, используя ваш пример, это должно означать, что 1140px строго соответствует 98% при разрешении экрана, который вы просматриваете.
Сократите экран своего браузера, и вы получите разные результаты.
Он несколько не связан, но я обнаружил, что max-width (и соответствующее свойство max-height) является проблемой с изображениями в Internet Explorer и нашел, что это полезно для уговоров использовать правильные значения:
img {
max-width: 150px;
max-height: 120px;
width: auto !important;
height: auto !important;
}
Без двух последних свойств большинство стандартизованных браузеров правильно поддерживают соотношение сторон, но Internet Explorer не будет, если вы этого не сделаете.
Изменить: Похоже, я сказал в основном тот же ответ, что и все остальные.
Предполагая, что контейнер является вашим окном браузера, если вы находитесь на разрешении экрана 1280 пикселей, то 98% будут 1254 px, что еще больше 1140 px. Значит, вы не видите разницы. Попробуйте перейти к более низкому разрешению, например 1024px
Если вы установите фиксированные width и a max-width, это означает следующее:
Если ширина превышает max-width, держите ее в max-width.
Если ширина ниже max-width, держите ее на width.
Он никогда не пройдет через max-width, что не означает, что он не может оставаться под ним, ключевое слово max явно указывает ограничение, а не правило.
В первом примере
width: 98%;
max-width: 1140px;
вы говорите браузеру, чтобы он дал ширину 98% экрана, но не больше 1140px.
В вашем втором примере
width: 1140px;
max-width: 98%;
вы говорите браузеру, чтобы он дал ширину 1140 пикселей, но не более 98% браузера.
Но во втором случае размер экрана должен быть меньше, чем 1140px для значения максимальной ширины.
Также обратите внимание на, что max-width ошибочно во многих старых версиях IE.
Подробнее здесь: http://reference.sitepoint.com/css/max-width
Вероятно, в первом случае 98% равно или больше 1140px, поэтому он будет придерживаться 1140px.
Во втором случае, конечно, ширина 1140px, поэтому он будет придерживаться 1140px, а max-width станет бесполезным.
Обновление Попробуйте здесь http://jsfiddle.net/
вот как я их понимаю. они представляют собой 2 окна → ширина и макс-ширина.
ширина не может превышать максимальную ширину, если ширина не влияет. как мудрый, если вы определили максимальную ширину ниже ширины.. ширина не влияет.
в любое время ваш браузер преобразует ваши% в наиболее вероятные пиксели но все еще действуют правила.
Примеры:
width: 98%;
max-width: 1140px;
это переводится на:
width : 1960px;
max-width : 1140px;
это означает → применяется только максимальная ширина.
width: 1140px;
max-width: 98%;
это переводится на:
width : 1140;
max-width : 1960px;
это означает → ширина 1140, но не может превышать 1960 г.
Эти два параметра должны по существу производить тот же результат, даже с шириной менее 1140px, например. 500px:
В первом случае:
width = min(98% * 500px, 1140px) = min(490px, 1140px) = 490px;
Во втором случае:
width = min(1140px, 98% * 500px) = min(1140px, 490px) = 490px;
Однако существует проблема с некоторыми браузерами, в частности firefox 12.0, если вы используете второй вариант в элементе fieldset. См. здесь. Перетащите окно браузера, и вы заметите, что первый элемент input, который использует процент max-width, не отвечает правильно.
Как таковой, используйте первый вариант:
width: percentage;
max-width: pixels;
width - это свойство css, используемое для установки ширины (фиксированная ширина), в этом случае фиксируется ширина.
Пример: .Property Свойство набора { ширина: 200 пикселей; }
Эта фиксированная ширина i.e 200px
max-width - это свойство css используется для установки ширины, но в этой ширине может быть меньше, чем установлено значение, но максимальное ограничение - это значение, заданное пользователем.
Пример: .Property Свойство набора { max-width: 200px; }
Эта установленная максимальная ширина i.e 200px, что означает, что ширина может быть меньше 200px, но не более 200px
Спасибо..