Розмір розміру коробки 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 box точно показує, якими є позиції поля кадрів.

Є невеликі проблеми - наприклад, поля з полями можуть перекриватися - але їх важко вирішити.

Я думаю, ситуація така ж, як ми бачимо з overflow-x& overflow-yкомбінаціями, з абсолютними позиціонованими знаками в осередках таблиці, з комбінацією min | max-width | висоти з розміром поля тощо.

Є функції, дійсно прості функції, які розробники браузерів просто не розробляють.

ІМХО, box-sizing: margin-boxбули дуже корисною функцією. Ще однією корисною функцією було те box-sizing: padding-box, що воно існує принаймні в стандарті, але воно не було реалізовано в жодному з основних браузерів. Навіть у новітньому хромі!

Примітка: коментар @Oriol: Firefox реалізував розмір коробки: padding-box. Але інші цього не зробили, і це було вилучено із специфікації. Firefox видалить його у версії 50. Сумно.

Хлопець вгорі запитує про додавання поля до загальної ширини, включаючи прокладку та облямівку. Річ у тому, що поле застосовується поза коробкою, а прокладки та облямівка - ні при використанні border-box.

Я намагався досягти border-marginідеї. Я знайшов, що якщо використовуючи 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: border-box" встановлює висоту / ширину елемента і враховує обшивку, а також ширину рамки. Обсяг поля елемента є більшим, ніж сам елемент, тобто він модифікує потік сторінки та оточуючих її елементів, отже, безпосередньо змінюючи те, як елемент вписується в його батьківщину щодо своїх братів. Зрештою, значення атрибута "поле для поля" може спричинити великі проблеми і по суті таке саме, як безпосередньо встановити висоту / ширину елементів.

На Codrops є кілька хороших статей на тему ефекту поля і ряду змушені переповнюватись. Вони пропонують використовувати блок rem або em з нормалізатором css, встановивши розмір шрифту 100% для всіх браузерів, тоді, коли ви встановлюєте ширину і поля, легко відстежувати ефект на ширину рядка, просто робивши примітку в коментарях до загальна ширина. Перетворення 16 пікселів в 1 ем - це спосіб вирахування цільових вікон перегляду загальної кількості витдх.

Працюючи так, як мінімум, на етапі розробки, а потім, якщо ви хочете "чуйні" шаблони, ви можете конвертувати ширину в%, включаючи ширину поля.

Інший і часто простіший спосіб, яким вони пропонують обробляти жолоби, - це використовувати псевдо після та content: '';на кожному з ваших стовпців, який, як я вважаю, працює дуже добре. Якщо ви встановите клас div, який є визначеним останнім стовпцем, таким як кінець, ви можете націлити на нього, щоб не мати псевдо після або ширший; що завжди найкраще підходить для вашого макета.

Додатковий бонус від використання цього методу псевдоелементів полягає в тому, що він також дає ціль для тіней, які можуть дати більш 3d ефект і більшу глибину плоскому зображенню також на моніторі читачів. На даний момент я експериментую з цим ефектом, розширюючи масштаби ефектів, які використовуються на кнопках, 'налаштовує' градієнти та z-індекс.

Розміри елементів , що не замінюються, на рівні блоку в нормальному потоці повинні задовольняти

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = ширина блоку, що містить

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

У вашому випадку прозорі межі з box-sizing: border-boxможе працювати так само, як і поля .

Можливо, встановіть кордон на 0% непрозорості за допомогою RGBA і використовуйте кордон як запас.

Існує цікава ситуація при використанні розміру коробки всередині корпусу

відсутність вмісту, поле без кордону не дає жодного значення на лівому правому полі% перерахунок цих алгоритмів перерахування двох вікон

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

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

Так що маржинажна коробка навіть не планується ...