Чому Bootstrap 3 перейшов на розмір коробки: border-box?

Я мігрую свої теми Bootstrap з v2.3.2 на v3.0.0, і одне, що я помітив, - це те, що багато розмірів обчислюються по-різному, завдяки наступним стилям у bootstrap.css.

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Хто-небудь може пояснити, чому Bootstrap перемикає розмір коробки всіх елементів на рамку? Я підозрюю, що це стосується нової системи сітки на основі відсотків, але вищевказаний селектор не стосується явно елементів сітки.

Здається, трохи радикальним імхо :-)

Хтось хоче подбати про щось?

— Олександр Рехштайнер
джерело

Дякуємо за фрагмент CSS; це саме те, що я шукав, щоб застосувати це до проекту без завантаження. :)

— berto

Хтось знає, для чого потрібні *: до і *: після?

— limscoder

@limscoder *:beforeі *:afterнеобхідні також застосувати цю модель коробки до :beforeі :afterпсевдо-елементів.

— buschtoens

Селектор * утрудняє розробників для використання вмісту або padding-box в інших місцях CSS. Найкраща практика, коли починати новий проект з нуля, html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

— Jarek Przygódzki

102

Нотатки до випуску повідомляють вам: ( http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ )

Краща модель коробки за замовчуванням. Все в Bootstrap набирає розміри коробки: рамки для полегшення розмірів і розширену систему сітки.

Особисто я думаю, що більшість переваг припадає на систему сітки. У Twitter Bootstrap всі сітки є текучими. Стовпці визначаються у відсотках від загальної ширини. Але жолоби мають фіксовану ширину в пікселях. За замовчуванням прокладка розміром 15 пікселів з обох боків стовпця. Поєднання ширини в пікселях та відсотках може бути складним. З border-boxцим обчисленням легко, тому що border-boxзначення (на відміну від типового поля вмісту) робить остаточне віконене поле оголошеною шириною, а будь-які рамки та прокладки вирізаються всередині поля. ( http://css-tricks.com/box-sizing/ )

Читайте також: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

— Бас Йобсен
джерело

Простий приклад: Спробуйте поставити рамку розміром 1 пікселя на розділ 100% ширини, за допомогою content-box. Тепер у вас є щось 100% + 2 пікселя. Із border-boxцією проблемою у вас немає, її все ще на 100%.

— порожні стіни

Хороша додаткова дискусія та обґрунтування цього в цьому випуску .

— yuvilio

Також варто зазначити, що найкраща практика впровадження розмірів поля була оновлена, щоб не заважати стороннім бібліотекам. Я не впевнений, чи планує Bootstrap оновити оновлення, але вони повинні: css-tricks.com/…

— jbyrd

Особисто я ніколи не змінював модель коробки з IE6. Це було ТІЛЬКО, що я знав краще. І так, сьогодні у вас є calc (), щоб обійти ці 100% плюс 2 піксельні проблеми, але шлях самураїв ЗАВЖДИ був коробкою з включеною рамкою та прокладкою. Ось як людський мозок уявляє коробку. Я люблю бачити цю «нову тенденцію», маю для них напій для прийому.

— dkellner