На прошлой неделе я наткнулся на ingrid — CSS Framework, основанный на display: inline-block; и размер коробки: граница-коробка; принципы. Мне показалось, что дисплей: встроенный блок; и размер коробки: граница-коробка; являются правильными принципами построения простого для понимания CSS Framework.
box-sizing: border-box включает отступ и границу внутри ширины элемента. Вы можете узнать больше здесь , здесь и здесь .
отображать: встроенный блок; он похож на float: left, но дает некоторые дополнительные возможности, такие как vertical-align: top; Подробнее здесь ..
Моя ограниченная одержимость CSS Frameworks заставила меня создать еще одну CSS Framework, основанную на этих принципах.
В основном это все об этом коде:
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display:inline-block;
margin-right: -4px; /* inline-block hack */
/* You could and you should change these settings */
border-left: 15px solid #eee; /* the border can also be used as gutter */
padding-left:10px; /* padding becomes margin */
vertical-align:top;
}
У нас есть модель рамки и встроенный блок с полем справа: -4px; для лишних пробелов между элементами.
Классические CSS-фреймворки обычно имеют размер желоба (поля) по умолчанию, например, 10 или 20 пикселей, и если вы хотите изменить его, вам нужно переписать всю логику фреймворка. В этом случае единственное, что вам нужно сделать, это изменить только один номер.
Я использовал некоторые компоненты из моего предыдущего фреймворка The Golden Grid и Malo .
Сетка содержит как пиксель, так и процентысетка, то есть бесконечные комбинации и возможности сетки, и самое главное (как я уже говорил ранее) вы можете мгновенно изменить значение желоба. Сетка процента работает немного иначе, чем сетка px, вы, вероятно, будете делать это лучше всего, просто используя отступы, такие как желоб.
Не стесняйтесь изменить систему именования этой структуры и выберите семантику, которую вы предпочитаете .
Измените отступы по умолчанию и границы .
Сетка также адаптивно оптимизирована для мобильных устройств.
Весь CSS составляет около 1 КБ .
Эта структура не работает в IE6,7. Вам нужен дополнительный CSS для этого.
Загрузите этот проект на Github.
Надеюсь, вам понадобится некоторое время, чтобы понять, как работает эта система. box-sizing: border-box может отображать: inline-block — действительно мощные методы построения макетов, которые могут помочь вам создавать быстрые и простые CSS-решения.