Про порядок визначення розмірів елементу

Українська
1

Виконую лінію завдань на створення сторінки с зображенням кошенят (Cat Gallery App).

.gallery img {
  width: 100%;
  max-width: 350px;
  height: 300px;
}

В цьому блоку коду відповідно до вказівок потрібно було задати ширину та висоту зображень. Моє питання полягає в тому для чого спочатку потрібно написати width: 100%; , а потім вже визначати максимально допустиму ширину елементу. Тобто я спочатку зазначив що зараз цей елемент має повну ширину , а після вказав що максимальная його ширина може бути 350 пікселів. Чи як це працює ? Буду вдячним за пояснення.

2

max-width перевизначає width.

якщо width більш ніж max-width тоді буде використовуватися значення з max-width.

коли

.gallery img {
  width: 500px;
  max-width: 350px;
}

тоді width буде 350px

але % використовують з приблизними значеннями
100% це повна ширина контейнера.
50% це половина ширини контейнера.

і на маленькому екрані контейнер може мати ширину в 200px
а на комп’ютері може мати ширину в 1000px і width також буде 1000px.

тому коли max-width: 350px; контейнер в 1000px та width: 100% на великому екрані буде 350px а не 1000px.

p.s:
додаткова інформація в css in ua та MDN