CSS рассчитывает процентную ширину и деление

Question

У меня есть меню, которое представляет собой список из трех элементов списка:

<ul class="menu_container">
  <li class="item">Item1</li>
  <li class="item">Item2</li>
  <li class="item">Item3</li>
</ul>

Ширина элемента ul изменяется по мере изменения размера браузера, и я пытаюсь использовать calc для определения ширины элементов, чтобы они были равны. Первый и третий элементы списка имеют левую и правую границу шириной 2 пикселя.

В инструментах разработчика Chrome ширина menu_container составляет 636 пикселей. Если я проверю первый элемент списка и сделаю width: 100% он показывает 640 пикселей. Но если я сделаю calc((100% - 12px) / 3) это показывает 212px для ширины. Почему это не (640 - 12) / 3 = 209,333?

Answer 1

Box-проклейки: граница-бокс

С помощью box-sizing:border-box размер рассчитывается следующим образом: ширина = граница + отступ + ширина содержимого и высота = граница + заполнение + высота содержимого.

пример

ширина = 100px + 2px граница с обеих сторон = 4px + обивка 5px с обеих сторон = 10px

Всего будет 100px + 4px + 10px знак равно 114px

С box-sizing:borderbox имущество

Всего будет 100px поскольку border а также padding дается изнутри