CSS3 размер окна: поле поля; Почему нет?

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

Пример:

Скажем, у меня есть макет страницы в 2 столбца. Оба столбца имеют ширину 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;.

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

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

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

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

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

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

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

Парень наверху спрашивает о добавлении поля к общей ширине, включая отступы и границу. Дело в том, что маржа применяется за пределами поля, а отступ и граница - нет при использовании 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

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

Я уверен, что все это очевидно, но я все равно его напечатаю, потому что ... ну, мне нужно упражнение. Будет ли следующий результат не таким эффективным, как 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полей с %шириной (как обычно бывает всегда) - это не кошерно, легче рассчитать, какой должна быть относительная процентная величина, потому что вам не нужно включать отступы и границы для определенной ширины.

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

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

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

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

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

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

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

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

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

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

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

нет содержимого без рамки не дает никакого значения для левого и правого поля.% пересчет этих двух алгоритмов пересчета окон

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

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

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