Чем отличаются max-width от width?

Я сейчас спрашиваю не о семантическом значении каждого из них. Я уже знаю то, что width четко указывает ширину. Например: 100px и не больше.
А max-width в отличие от width может принимать и другие значения, НО не может быть больше того значения, которое мы укажем.
Вопрос не в этом)

Я не понимаю вот что. Если мы записываем max-width и width в процентах, то разницы между ними я вообще не вижу. При уменьшении и увеличении окна сайта, все одно и то же.
Max-width и width имеют разницу только тогда, когда записываются через пиксели (я имею в виду не семантически, а просто по отображению на странице)?

И вообще с процентами непонятно получается. Если:
Width: 100% max-width: 600px
100% от чего? Вроде пишется, что проценты вычисляются от "родителей", если родителей нет, то от окна браузера.
Но если я, например, задаю body width.
И потом от него дочернему элементу, то высвечиваются данные только body.
Например:
HTML:
<body>
	<p class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia ducimus neque quas aut, similique, autem eius officiis, odio, molestiae sint excepturi numquam nesciunt soluta perferendis natus! Natus nesciunt eaque ducimus.</p>
	<p class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum totam distinctio illo eveniet earum, recusandae aliquam ut. Cum non vitae repellendus voluptatem dolores dolorum. Quas cupiditate harum culpa nisi rerum!</p>
</body>

CSS:
body {
	width: 100px;

.one {
	width: 80%;
}


В этом случае два блока текста получаются одинаковыми. Заранее спасибо за объяснение
  • Вопрос задан
  • 1001 просмотр
Решения вопроса 2
wapster92
@wapster92 Куратор тега CSS
В этом случае два блока текста получаются одинаковыми.
глазомер хромает посмотри цифры в девтулзах
Width: 100% max-width: 600px
это значит блок 100% от ширины родителя, но ограничение не даст ему увеличиться в 600px.
Если мы записываем max-width и width в процентах, то разницы между ними я вообще не вижу.
даже не знаю где бы такое пригодилось.
Ответ написан
Комментировать
dimovich85
@dimovich85 Куратор тега CSS
https://u-academy.net/
Ширина блока от родителя, все верно. Если даете для body ширину, то: https://codepen.io/dimovich85/pen/XWXJvPy
Ширина явно разная. Вы на глаз 100 и 80 пикселей не различили.
Давайте логически: ширина 100 процентов, но не больше 30 процентов?
Дайте мне полный стакан воды, но наполовину полный. Это если Вы оптимист;)
Конечно в процентах разницы не будет.
И еще - у width и max-width разные приоритеты, почитайте, и думаю все на полочки ляжет.
PS: удобно написать модалке width: 100%; max-width: 600px, ведь на мобилках модалка на весь экран, а на десктопе - как на макете, всего 600, так что полезные сочетания свойств;)
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@mexsmg
Если просто, max-width - это максимальный размер для блока. Если установить max-width: 1000px, а width: 100%, то на мониторах больше чем 1000px ширина блока будет 1000px, а на мониторах меньше, будет занимать ширину монитора.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы