CSS: ширина и максимальная ширина
Почему:
width: 98%;
max-width: 1140px;
сделать так же, как
width: 1140px;
max-width: 98%;
Первый имеет смысл в том смысле, что я говорю, что ширина составляет 98%, но ширина не должна превышать 1140 пикселей.
Второй, однако, сказал бы, что страница имеет ширину 1140 пикселей, но тогда она бы достигла размера страницы 98%, верно? Так, например, за 1140px... но, видимо, нет, так как он делает то же самое, что и первый.
Может кто-нибудь объяснить почему?
11 ответов
Из моего понимания свойств:
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 не будет работать, если вы не сделаете этого.
Редактировать: Похоже, я сказал в основном тот же ответ, что и все остальные.
Если вы установите фиксированный width и max-widthэто означает следующее:
Если ширина идет выше max-widthдержите это в max-width, Если ширина ниже max-width, держать его на width,
Это никогда не пройдет max-width, это не значит, что он не может оставаться под max Ключевое слово явно указывает на ограничение, а не правило.
В вашем первом примере
width: 98%;
max-width: 1140px;
Вы говорите браузеру, чтобы ширина экрана составляла 98%, но не превышала 1140 пикселей.
Во втором примере
width: 1140px;
max-width: 98%;
вы говорите браузеру, что он должен иметь ширину 1140 пикселей, но не больше 98% браузера.
Но, во втором случае, размер вашего экрана должен быть меньше 1140 пикселей, чтобы значение максимальной ширины появилось.
Также обратите внимание, что max-width глючит во многих старых версиях IE.
Узнайте больше здесь: http://reference.sitepoint.com/css/max-width
Предполагая, что контейнер является окном вашего браузера, если у вас разрешение экрана 1280 пикселей, то 98% будет 1254 пикселей, что по-прежнему превышает 1140 пикселей. Так что вы не видите никакой разницы. Попробуйте перейти к более низкому разрешению, например, 1024 пикселей
Вероятно, в вашем первом случае 98% равно или больше, чем 1140 пикселей, поэтому он будет придерживаться 1140 пикселей.
Во втором случае, конечно, ширина составляет 1140 пикселей, поэтому она будет придерживаться 1140 пикселей, а максимальная ширина станет бесполезной.
Обновление Попробуйте здесь http://jsfiddle.net/
Вот как я их понимаю.. это 2 коробки -> ширина и максимальная ширина.
ширина не может превышать max-width, если ширина не влияет. То же самое, если вы определили максимальную ширину ниже ширины. Ширина не имеет никакого эффекта.
в любое время ваш браузер конвертирует ваш% в наиболее вероятные пиксели, но правила, указанные выше, все еще применяются.
Примеры:
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;
anyElement {
width: 600px;
}
Это просто означает, что элемент всегда должен оставаться размером 600 пикселей независимо от того, что вокруг него происходит. Независимо от того, размер родительского элемента или окна браузера больше или меньше 600 пикселей. Он всегда будет оставаться 600px.
Max-width сообщает браузеру следующее: независимо от обстоятельств, пожалуйста, не превышайте ширину, которую я написал здесь. Я имею в виду, вы, вероятно, можете быть меньше моей выделенной ширины, когда вам нужно, но никогда не быть больше, чем ширина, которую я указал прямо здесь. Даже не рассматривай это.
width: 98%;
max-width: 1140px;
Это означает, что ширина элемента должна составлять 98% ширины его родителя, но не более 1140 пикселей. поэтому, когда ширина браузера уменьшается, ширина элемента уменьшается, и его ширина всегда составляет 98%, но когда ширина браузера увеличивается, ширина элемента увеличивается, но не более 1140 пикселей.
width: 1140px;
max-width: 98%;
Это означает, что когда ширина браузера меньше 1140 пикселей, ширина элемента уменьшается, и его ширина всегда составляет 98% от его родителя, но когда ширина браузера увеличивается, ширина элемента увеличивается, но не более чем на 1140 пикселей.
width - это свойство css, используемое для установки ширины (фиксированной ширины), в этом случае фиксированная ширина.
Пример: .property-set{ width: 200px; }
Этот набор фиксированной ширины, т.е. 200 пикселей
max-width - это свойство css используется для установки ширины, но в этой ширине может быть меньше, чем заданное значение, но max limit - это значение, установленное пользователем.
Пример: .property-set{ max-width: 200px; }
Максимальная ширина этого набора, т.е. 200 пикселей, что означает, что ширина может быть менее 200 пикселей, но не более 200 пикселей
Спасибо..
Использовать только
max-width: 1140px;
или
width: 98%;
не оба. Если вы хотите увидеть разницу, перейдите сюда.