Что здесь действительно делают CSS max-width и cal c ()?

Question

Я пытаюсь понять, что cal c () и max-width на самом деле здесь. Из того, что я прочитал из MDN , он берет параметр одного выражения и вычисляет это значение.

Так, например, если бы я должен был создать веб-сайт, скажем, теперь ширина моего окна составляет 2200px .

max-width: calc(1600px+10%);
margin: 0 auto;
padding-left: 5%;
padding-right: 5%;

Из того, что я понимаю, моя максимальная ширина должна быть

1600 + 2200 * 10% = 1600 + 220 = 1820

, в результате чего

• отступ слева: 5% = 1820 * 5% = 91px
• отступ справа: 5% = 1820 * 5% = 91px
• размер элемента: 1820 - оба отступа (182) = 1638px
• margin-left, right: 190px каждое

Но когда я открываю веб-сайт из этого кода, он дает мне

• padding-left: 99.361px
• padding-right: 99.361px
• ширина элемента: 1599.998px
• margin-left, right: 94.276px каждый

Почему это показывает другое значение, чем я ожидал? Что означает 10% в кал c, когда они вычисляют 10%?

Answer 1

Полагаю, вы получаете значения из инструментов разработчика. padding рассчитывается с использованием размера родителя, поэтому 5% padding будет фактически 2200 * 5% = 110.

Во-вторых, ширина элемента не включает поля или отступы, поэтому 1820 будет размером элемента, исключая набивка.

См. fiddle

Как видно из изображения ниже, с родительской шириной ~ 2200 пикселей (мне пришлось уменьшить масштаб, так что это не совсем 2200), все измерено правильно. Убедитесь, что нет других правил, которые изменяют элемент.