Почему у нас нет 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;
.
box-sizing: margin-box;
?" Потому что, хотя горизонтальные поля не сжимаются, такое предложение серьезно помешает сужению вертикальных полей. В любом случае, если вы хотите предложить что-то для стандартизации, Stack Overflow - не то место. Попробуйте списки рассылки.border: xxx solid transparent;
, поскольку граница включена вborder-box
. Однако это нарушит некоторые другие вещи, напримерbox-shadow
.box-sizing: margin-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. Печально.
источник
box-sizing: padding-box
. Но другие этого не сделали, и это было удалено из спецификации. Firefox удалит его в версии 50. Печально.Парень наверху спрашивает о добавлении поля к общей ширине, включая отступы и границу. Дело в том, что маржа применяется за пределами поля, а отступ и граница - нет при использовании
border-box
.Я попытался реализовать
border-margin
идею. Я обнаружил, что при использовании маржи вы можете либо добавить класс.last
к последнему элементу (с маржей, затем применить маржу, равную нулю, либо использовать:last-child/:last-of-type
). Или добавьте равные поля по всему периметру (аналогично версии с заполнением выше).См. Примеры здесь: http://codepen.io/mofeenster/pen/Anidc
border-box
вычисляет ширину элемента + его отступ + его границу как общую ширину. Итак, если у вас есть 2div
с шириной 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
полей с%
шириной (как обычно бывает всегда) - это не кошерно, легче рассчитать, какой должна быть относительная процентная величина, потому что вам не нужно включать отступы и границы для определенной ширины.источник
margin-box
обрабатывать многомерные расчеты маржи?@media
точки остановаmax-width
иmin-width
работают нормально. Думаю,margin-box
можно было бы сократить навороты, но я также понимаю причины, по которым это можно считать избыточным.Это связано с тем, что атрибут box-sizing относится к размеру элемента после вычисления заданных значений, зависящих от измерения (отступы, границы). "box-sizing: border-box" устанавливает высоту / ширину элемента и принимает во внимание отступы, а также ширину границы. Область поля элемента больше, чем сам элемент, что означает, что он изменяет поток страницы и окружающие ее элементы, тем самым напрямую изменяя способ размещения элемента в пределах своего родителя относительно элементов-братьев. В конечном итоге значение атрибута "margin-box" вызовет серьезные проблемы и по сути то же самое, что и установка высоты / ширины элементов напрямую.
источник
Размеры блочных незамещенных элементов в нормальном потоке должны удовлетворять
При чрезмерном ограничении браузеры должны регулировать левое или правое поле. Я думаю, это означает, что ширина поля поля должна равняться ширине содержащего блока (то есть 100%).
В вашем случае прозрачные границы с
box-sizing: border-box
могут работать так же, как поля .источник
На Codrops есть пара хороших статей о влиянии полей и переполнения строк. Они предлагают использовать модуль rem или em с нормализатором css, устанавливая размер шрифта на 100% для всех браузеров, тогда, когда вы устанавливаете ширину и поля, легко отслеживать влияние на ширину строки, просто делая примечание в комментариях для общая ширина. Преобразование 16 пикселей в 1 em - это способ вычислить общее количество окон просмотра.
Работая так, по крайней мере, на этапе разработки, а затем, если вам нужны «адаптивные» шаблоны, вы можете преобразовать ширину в%, включая ширину полей.
Другой и часто более простой способ обработки желобов - это использовать псевдо-после и для
content: '';
каждой из ваших колонок, которые, как я считаю, работают очень хорошо. Если вы установите класс div, который является определенным последним столбцом, например end, вы можете настроить таргетинг на этот класс так, чтобы он не имел псевдо после или имел более широкий; который лучше всего подходит для вашего макета.Дополнительным преимуществом использования этого метода псевдоэлементов является то, что он также дает вам цель для теней, которые могут дать более трехмерный эффект и большую глубину плоскому изображению на мониторе считывателя. В настоящий момент я экспериментирую с этим эффектом, увеличивая эффекты, используемые на кнопках, «настраивая» градиенты и z-index.
источник
Возможно, установите для границы непрозрачность 0% с помощью RGBA и используйте границу в качестве поля.
источник
1px
отделены друг от друга и каждая занимала50%
свободное место? Именно такmargin-box
и поступил бы. Или забудьте о поле с полями и подумайте о доступном пространстве. Не 50% родительского контейнера, а 50% того, что осталось. Никакой «калькуляции», никакой «маржи 5%», никакой такой путаницы ...Интересная ситуация при использовании размера блока внутри содержимого тела
нет содержимого без рамки не дает никакого значения для левого и правого поля.% пересчет этих двух алгоритмов пересчета окон
.body{ box-sizing: border-box; margin:0 3%; }
Так что маржа-бокс даже не планировалась ...
источник