CSS: ширина и максимальная ширина

Ответ 1

Из моего понимания свойств:

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 не будет, если вы этого не сделаете.

Изменить: Похоже, я сказал в основном тот же ответ, что и все остальные.

Ответ 2

Предполагая, что контейнер является вашим окном браузера, если вы находитесь на разрешении экрана 1280 пикселей, то 98% будут 1254 px, что еще больше 1140 px. Значит, вы не видите разницы. Попробуйте перейти к более низкому разрешению, например 1024px

Ответ 3

Если вы установите фиксированные width и a max-width, это означает следующее:

Если ширина превышает max-width, держите ее в max-width. Если ширина ниже max-width, держите ее на width.

Он никогда не пройдет через max-width, что не означает, что он не может оставаться под ним, ключевое слово max явно указывает ограничение, а не правило.

Ответ 4

В первом примере

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

Ответ 5

Вероятно, в первом случае 98% равно или больше 1140px, поэтому он будет придерживаться 1140px.

Во втором случае, конечно, ширина 1140px, поэтому он будет придерживаться 1140px, а max-width станет бесполезным.

Обновление Попробуйте здесь http://jsfiddle.net/

Ответ 6

вот как я их понимаю. они представляют собой 2 окна → ширина и макс-ширина.

ширина не может превышать максимальную ширину, если ширина не влияет. как мудрый, если вы определили максимальную ширину ниже ширины.. ширина не влияет.

в любое время ваш браузер преобразует ваши% в наиболее вероятные пиксели но все еще действуют правила.

:

width: 98%;
max-width: 1140px;

это переводится на:

width : 1960px;
max-width : 1140px;

это означает → применяется только максимальная ширина.

width: 1140px;
max-width: 98%;

это переводится на:

width : 1140;
max-width : 1960px;

это означает → ширина 1140, но не может превышать 1960 г.

Ответ 7

Эти два параметра должны по существу производить тот же результат, даже с шириной менее 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;

Ответ 8

width - это свойство css, используемое для установки ширины (фиксированная ширина), в этом случае фиксируется ширина.

Пример:   .Property Свойство набора {      ширина: 200 пикселей;   }

Эта фиксированная ширина i.e 200px

max-width - это свойство css используется для установки ширины, но в этой ширине может быть меньше, чем установлено значение, но максимальное ограничение - это значение, заданное пользователем.

Пример:   .Property Свойство набора {      max-width: 200px;   }

Эта установленная максимальная ширина i.e 200px, что означает, что ширина может быть меньше 200px, но не более 200px

Спасибо..