Как максимальная ширина и ширина элемента html работают вместе?

max-width и width — это 2 разных свойства CSS, которые хорошо сочетаются друг с другом. Если вы хотите установить фиксированную ширину для большинства размеров экрана, но все же хотите установить максимальное ограничение, при котором вы хотите остановить рендеринг этой фиксированной ширины, вы можете использовать оба этих свойства вместе. Например: допустим, у меня есть заголовок, который я хочу иметь 100% ширины для большинства небольших экранов, но для гораздо больших экранов я не хочу покрывать 100% ширину. Скорее, я хочу ограничить его определенной шириной, скажем, 1200 пикселей. Тогда я могу написать коды ниже. Вы увидите, что он будет покрывать 100% ширины для небольших экранов, но когда ширина окна просмотра становится больше, он остановится на 1200 пикселей и больше не будет покрывать 100% экрана.

*{
    margin: 0;
    padding: 0;
}

header{
    max-width: 1200px;
    width: 100%;
}

<header style = "background-color: red; height: 100px; margin: 0 auto;"></header>

Например, в этом коде CSS:

.content { 
  width: 100%;
  max-width: 1200px; 
  margin: 0 auto; 
} 

.content всегда будет стремиться быть такой же ширины, как и его контейнер (из-за width: 100%). Но как только контейнер превысит 1200 пикселей, .content больше не будет расти из-за max-width: 1200px. margin: 0 автоматически центрируется .content, когда ширина экрана превышает 1200 пикселей.

По сути, width: 100% гарантирует, что элемент будет гибким на небольших экранах, а max-width гарантирует, что он останется красивым и не слишком сильно растянется на больших экранах.

Надеюсь, что вы ясно с этим.

Отношения и эффект использования width: 100% с max-width зависят от контекста, в котором оно используется. Значение по умолчанию для элементов блочного уровня — width: 100%, поэтому это объявление является избыточным, если только оно не отменяет другое унаследованное значение.

Возможный сценарий может включать замену элементов, таких как изображения. Ширина по умолчанию — это его внутреннее значение (даже если указано display: block). Чтобы придать изображению адаптивную форму и сохранить его внутреннее соотношение сторон, присвойте ему width: 100% (height: auto используется по умолчанию, и его не нужно объявлять, если только не отменяется другое унаследованное значение.)

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

Используя этот пример:

• родительский элемент width: 500px и не отвечает
• дочерний элемент width: 100% и max-width: 300px

Дочерний элемент либо уменьшит, либо увеличит свою ширину, что эквивалентно использованию width: 300px. Он всегда будет шириной 300 пикселей.

Однако, если родительский элемент является адаптивным (например, элемент flexbox), то и дочерний элемент будет адаптивным и может уменьшаться до размера менее 300 пикселей при сохранении соотношения сторон. Это показано во фрагменте.

section {
  display: flex;
  background-color: aliceblue;
}

div {
  width: 500px;
}

img {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: auto;
}

p {
  padding: 1em;
}

<section>
  <div>
    <img src = "//picsum.photos/400" alt = "placeholder photo">
  </div>
  <p>The randomly-generated placeholder photo has an intrinsic size of 400px by 400px. However, its rendered size is limited to 300px and is allowed to shrink in narrow viewports.</p>
</section>