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

143

Почему у нас нет 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;.

Веб-дизайнер
источник
30
"Почему у нас нет box-sizing: margin-box;?" Потому что, хотя горизонтальные поля не сжимаются, такое предложение серьезно помешает сужению вертикальных полей. В любом случае, если вы хотите предложить что-то для стандартизации, Stack Overflow - не то место. Попробуйте списки рассылки.
BoltClock
16
В определенных ситуациях это можно обойти, используя border: xxx solid transparent;, поскольку граница включена в border-box. Однако это нарушит некоторые другие вещи, например box-shadow.
Натан Осман
28
Мы закрываем сейчас все вопросы о стандартах как о «неконструктивных» ?? Это справедливый вопрос, и на него даже есть прямой ответ: у нас нет, box-sizing: margin-boxпотому что это не сработает с уменьшением маржи.
thomasrutter
@thomasrutter: На тот момент, когда я закрыл его, то есть более года назад, для этого не было более веской причины. В любом случае, слово «неконструктивное» исчезло (что означает «нет, мы больше не закрываем что-либо как неконструктивное»), и поскольку все «у меня есть идея, вот как это работает, давайте сделаем это стандартом!» вещь была удалена с тех пор, как она была закрыта в последний раз, теперь это звучит как практический вопрос: "Почему X не может работать?" вопрос. Это все еще невероятно спекулятивный вопрос (мои рассуждения выше на самом деле не более чем обоснованное предположение), но я не буду комментировать его дальше.
BoltClock
почему бы просто не иметь внутренней обертки / дел , если вы хотите интервал: codepen.io/chriscoyier/pen/eGcLw
Ashley

Ответы:

55

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

Сутулость
источник
5
Это сильно зависит от браузера. Вероятно, примерно в 2020 году ie15 будет его поддерживать, и вам также будет разрешено использовать это в своей работе :-(
peterh - Reinstate Monica
1
Кажется, не так хорошо работает в Firefox? (или что-то еще, что я сделал, не так)
Laurengineer
@Morgan Feeney: Да, но размер коробки не имеет значения, называемого margin-box (в этом весь смысл этого вопроса). Даже если такое значение было введено сейчас, как вы предлагаете внести исправления / полифиллинг / шимминг в существующие браузеры?
BoltClock
Да, но ... конкретно отвечая на ответ, предлагающий calc () в качестве обходного пути.
Морган Фини
Не уверен, что это применимо к конкретному примеру, но основным недостатком использования calc () в нашем сценарии (как в FF 53.0.3) является то, что его поведение не аналогично поведению width: X%; Из того, что мы видим, «вычисление» выполняется во время первоначального рендеринга в статический Xpx. Это означает, что, в отличие от width: X%, вычисленный столбец не изменяет размер автоматически с изменением размера контейнера.
Панчо
16

Думаю, у нас может быть 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. Печально.

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

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

Plummer
источник
9
Пример использования чего-то вроде поля-поля - включить смешивание ширины в процентах с полями в пикселях. Если вам нужны два 50% бокса с полем 1px между ними, это не может быть достигнуто с процентным полем в 1% от аналогичного - некоторые маленькие размеры экрана будут округлять 1% до 0 пикселей, и вдруг у вас не будет поля. Что нам действительно нужно, так это больше поддержки браузером для calc (), как показывает @Slouch, или модели flexbox.
1
Если это так, родительский контейнер будет меньше 100 пикселей, и я надеюсь, что некоторые элементы дизайна будут пересмотрены на этом этапе. Есть еще кое-что, что вы могли бы делать с вложенными элементами и т.п., но, да, вычисление переменных было бы довольно круто. Если вам нравятся такие вещи, как дерзость или меньше, я думаю, они делают много таких вещей. Я играл с ними, но я еще не джедай.
Plummer
2
Вы предлагаете обходной путь. Это не лучший способ писать CSS, когда вы работаете со сложными макетами. Вы предполагаете, что дизайнер или автор хочет использовать проценты в своем дизайне. Также независимо от этой проблемы, даже если вы используете функцию calc () для определения интервалов с использованием полей пикселей, она все равно ограничивает дизайнера, потому что они должны заранее определять, что такое межстрочный промежуток, а не разрешать его перезапись с помощью CSS.
limitlessloop
Я не понимаю твою точку зрения. Проблема заключалась в том, что включение пикселей и% вызывает разрывы строк, потому что маржа не включается в расчет размера. Поле не входит в размер элемента, это пространство, которое вы хотите разместить вокруг элемента. Кроме того, как margin-boxобрабатывать многомерные расчеты маржи? @mediaточки останова max-widthи min-widthработают нормально. Думаю, margin-boxможно было бы сократить навороты, но я также понимаю причины, по которым это можно считать избыточным.
Пламмер
Почему никто не упоминает, что это поле Percentage VALUE - это процент ширины по какой-то причине ... не имеет значения высота или ширина. Используется ширина родителя. Что, мягко говоря, странно ... поэтому приведенный выше код не должен работать и не работает. если вы не уравняете высоту и ширину.
Мухаммад Умер
4

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

Райан
источник
1
Приношу свои извинения, но я не понимаю, чем включение отступов, границ и полей в пространственный расчет с помощью поля «margin-box» будет концептуально отличаться от включения заполнения и границы с помощью «border-box». Неужто это всего лишь вариация на ту же тему?
Панчо
2

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

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

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

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

Сэм
источник
1

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

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

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

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

Weedy101
источник
1

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

user3236407
источник
Похоже на взлом, но подойдет.
Морган Фини
Это может оказаться полезным, если вы не хотите использовать обертки для выполнения работы.
limitlessloop
... если вам действительно не нужна граница
FrancescoMM
@FrancescoMM - немного "шумно", но вы можете сделать блок с прозрачной рамкой "ширина поля" (и, конечно, без полей) и внутри этого поместить блок с видимой рамкой той ширины, которую вы хотите отобразить (опять же без маржа)
Панчо
1
Я просто не могу следовать за таким мышлением. Что может быть более естественным, чем сказать, что я хочу, чтобы две коробки были 1pxотделены друг от друга и каждая занимала 50%свободное место? Именно так margin-boxи поступил бы. Или забудьте о поле с полями и подумайте о доступном пространстве. Не 50% родительского контейнера, а 50% того, что осталось. Никакой «калькуляции», никакой «маржи 5%», никакой такой путаницы ...
maaartinus
0

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

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

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

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

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

Дмитрий Юрченко
источник