CSS3 box-sizing: margin-box; Почему нет?

Почему мы не имеем box-sizing: margin-box;? Обычно, когда мы помещаем box-sizing: border-box; в наши таблицы стилей, мы действительно имеем в виду первое.


Пример:

Скажем, у меня есть макет страницы с двумя столбцами. Оба столбца имеют ширину 50%, но выглядят уродливо, потому что нет ни одного водостока (промежуток посередине); Ниже приведен CSS:

.col2 {
    width: 50%;
    float: left;
}


Чтобы применить водосточный желоб, вы можете подумать, что мы могли бы просто установить правый край в первом из двух столбцов; что-то вроде этого:

.col2:first-child {
    margin-right: 24px;
}

Но это приведет к тому, что второй столбец будет перенесен на новую строку, потому что верно следующее:

50% + 50% + 24px > 100%

box-sizing: margin-box; разрешит эту проблему, включив маржу в вычисленную ширину элемента. Я бы нашел это очень полезным, если не более полезным, чем box-sizing: border-box;.

ОТВЕТЫ

Ответ 1

Не могли бы вы использовать width: calc(50% - 24px); для ваших cols? Затем установите свои поля.

Ответ 2

Я думаю, мы могли бы иметь box-sizing: margin-box. Модель css box точно показывает, каковы позиции полей кадров.

Есть небольшие проблемы - например, поля полей могут перекрываться, но их нетрудно решить.

Я думаю, что ситуация такая же, как мы можем видеть с комбинациями overflow-x и overflow-y, с абсолютными позиционированными div в ячейках таблицы с комбинацией min | max-width | height с размер окна и т.д.

Есть функции, действительно простые функции, которые разработчики браузеров просто не разрабатывают.

IMHO, box-sizing: margin-box были очень полезной функцией. Еще одна полезная функция - box-sizing: padding-box, она существует по крайней мере в стандарте, но она не была реализована ни в одном из основных браузеров. Даже в новейшем хром!

Примечание: комментарий @Oriol: Firefox действительно реализовал размер окна: padding-box. Но другие не сделали этого, и он был удален из спецификации. Firefox удалит его в версии 50. Грустный.

Ответ 3

Парень наверху спрашивает о добавлении поля к общей ширине, включая отступы и границы. Дело в том, что поля применяются вне поля, а отступы и рамки - при использовании border-box.

Я пытался реализовать идею border-margin. Я обнаружил, что при использовании маржи вы можете либо добавить класс .last к последнему элементу (с полем, затем применить нулевое поле или использовать :last-child/:last-of-type). Или добавьте одинаковые поля полностью (как в версии с отступом выше).

Смотрите примеры здесь: http://codepen.io/mofeenster/pen/Anidc

border-box вычисляет ширину элемента + его отступ + его границу как общую ширину. Так что если у вас есть 2 div шириной 50%, они будут смежными. Если вы добавите к ним отступ 8px, то у вас будет желоб 16px. Объедините это с оберточным элементом - который также имеет отступ 8px - у вас будет хорошо выложенная сетка с одинаковыми желобами вокруг.

Посмотрите этот пример здесь: http://codepen.io/mofeenster/pen/vGgje

Последний мой любимый метод.

Ответ 4

Я уверен, что все это очевидно, но я все равно его напечатаю, потому что... ну, мне нужно упражнение. Будет ли следующий результат не столь эффективным, как box-sizing: margin-box;:

.col2 {
    width: 45%;
    height: 90%;
    margin: 5% 2.5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

http://jsfiddle.net/Fg3hg/

box-sizing используется для управления, с которого точка и граница оцениваются с общим размером элемента. Таким образом, хотя кошерно не включать поля px с шириной % (как это обычно бывает всегда), легче вычислить, что такое относительная процентная сумма, потому что вам не нужно включать отступы и границы к определенная ширина.

Ответ 5

Это связано с тем, что атрибут box-sizing относится к размеру элемента после вычисления данных конкретных значений (дополнений, границ). "box-sizing: border-box" устанавливает высоту/ширину элемента и учитывает заполнение, а также ширину границы. Объем поля элемента больше, чем сам элемент, что означает, что он изменяет поток страницы и ее окружающих элементов, поэтому прямо изменяет способ, которым элемент соответствует его родительскому элементу относительно его родственных элементов. В конечном итоге значение атрибута "margin-box" вызовет серьезные проблемы и, по сути, будет таким же, как установка высоты/ширины элементов напрямую.

Ответ 6

В Codrops есть несколько хороших статей о влиянии полей и строки, вынужденных переполнять. Они предлагают использовать модуль rem или em с нормативом css для установки размера фильтра на 100% для всех браузеров, тогда, когда вы устанавливаете ширины и поля, легко отслеживать влияние на ширину строки, просто делая заметку в комментариях для общая ширина. Преобразование 16px в 1 em - способ вычислить целевые видовые экраны всего witdh.

Работайте, как минимум, на этапе dev, а затем, если вы хотите "откликать" шаблоны, вы можете преобразовать ширину в%, включая ширину поля.

Другим и зачастую более простым способом, который они предлагают обрабатывать водосточные желоба, является использование псевдо-после и content: ''; для каждого из ваших столбцов, которые, как я считаю, работают очень хорошо. Если вы установите класс div, который является указанным последним столбцом, например end, вы можете настроить таргетинг на этот класс, чтобы не иметь псевдо или после него; который лучше всего подходит для вашего макета.

Добавленный бонус использования этого метода псевдоэлементов - это также дает вам цель для теней, которые могут дать больше 3D-эффекта и большую глубину для плоского изображения на мониторе считывателей. Я экспериментирую с этим эффектом в настоящий момент, увеличивая эффекты, используемые на кнопках, "настраивая" градиенты и z-индекс.

Ответ 7

Размеры блок-уровень, незаменяемые элементы в нормальном потоке должны удовлетворять

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = ширина содержащего блока

При чрезмерном ограничении браузеры должны корректировать либо левое, либо правое поле. Я думаю, это означает, что ширина поля поля должна равна ширине содержащего блока (т.е. 100%).

В вашем случае прозрачные границы с box-sizing: border-box могут работать как поля.

Ответ 8

Возможно, установите границу с непрозрачностью 0% с помощью RGBA и используйте границу в качестве поля.

Ответ 9

Интересная ситуация возникает при использовании размера блока внутри содержимого тела

Нет содержимого Нет рамки не дает никакого значения для левого-правого поля% пересчета этих двух полей пересчитать алгоритмы

  .body{
    box-sizing: border-box;
    margin:0 3%;
  }

Версии Firefox до 57 также поддерживали значение поля заполнения для размер коробки, хотя это значение было удалено из спецификации и более поздние версии браузера.

Так что маржинальная коробка даже не планируется...