Управление шириной элементов в CSS3

Свойство CSS3 box-sizing потрясающе полезно при создании колонок с float-ами. Оно позволяет выбрать вид задания размеров: т.е. включать в размер внутренние и внешние отступы и рамки или же нет.

Это полезно, так как упрощается установка ширин в процентах, когда вам необходимо также задавать отступы и/или рамки. Распространенный пример этого - формы, которые могут стать настоящей головной болью, в случае когда вы задаете ширины в процентах.

Свойство box-sizing принимает два значения:

Пример формы

Допустим, у вас есть такой HTML код:

Расположим два элемента input и элемент label (впредь я буду называть их колонками) на одной строке с помощью свойства float. Это легко. Но нам еще нужно, чтобы ширина текстовых полей была гибкой и зависела от ширины элементов-родителей. Это необходимо для того, чтобы можно было помещать их в разные лэйауты, при этом особо не мучаясь с подсчетами пикселей на ширину.

Вот простенький CSS код, решающий эту задачу:

Без проблем тут не обойтись

Это довольно-таки маленькая проблема (даже две), но всё-таки проблема:

• Так как ширина относится только к самому элементу, ширины колонок будут по 49% от ширины их родителя 2em для правого и левого внутреннего отступа (padding). Возможно, 2em - это шире, чем 1%, и в результате, колонки станут шире и не будут соответствовать друг-дружке.
• То же самое касается и ширины полей для ввода (input). width: 100% означает, что их ширина будет такой же, как у основного контента их родителей. Но дополнительно к этому значению есть еще 16 пикселей горизонтальных отступов и 4 пикселя горизонтальных границ, так что они будут на 20 пикселей шире желаемого значения.

box-sizing спешит на помощь

Вот где без box-sizing не обойтись. Он легко решит эту проблему. Просто пропишем это свойство полям ввода (input):

Теперь ширины обеих колонок и полей ввода включают ширины своих отступов и границ. В результате, получаем симпатичную, резиновую строку формы, без перекрываний и переходов на следующую строку.

Я создал простенькую страничку, демонстрирующую эту технику.

Поддержка браузерами и решение возможных проблем

Как обычно, говоря о CSS, и особенно о CSS3, возникает вопрос насчет поддержки браузерами его свойств. Так вот, box-sizing достаточно хорошо поддерживается всеми браузерами. Просмотрите эту статью. Оказывается, он не поддерживается только в IE7. Самое смешное в том, что в IE6 все отображается корректно.

Чтобы обеспечить поддержку всеми браузерами, добавьте в код следующее:

Теперь приступим к IE7. В принципе, все зависит от того, в какой части возникла проблема, посетителей вашего сайта и вашего отношения (и/или заказчика) к использованию старых браузеров. Так что можно даже ничего не исправлять. В случае, если это форма, то ее будут видеть многие пользователи, так что нужно, чтоб она выглядела идеально.

Есть несколько опций для IE7:

• используйте поведение box-sizing
• воспользуйтесь условными комментариями или специальными фичами CSS, предназначенные специально для IE7. Поменяйте ширины полей ввода и колонок, тем самым увеличив внешние отступы.

На моей страничке есть примеры обоих способов. box-sizing работает изящно, но проблемы могут возникнуть с внутренними отступами (если они заданы не в em), а также с вложенными элементами, для которых задано свойство box-sizing:border-box. Так, в примере №3 box-sizing применяется только к колонкам, но не к полям ввода. Чтобы поля ввода не становились шире своих родителей, я задал меньшую ширину для IE7. Пример №4 показывает, как выглядит форма без применения box-sizing. Я всего лишь уменьшил ширину колонок и полей ввода, чтобы они не становились слишком широкими.

В заключение хочу предупредить о том, что несмотря на то что box-sizing поддерживается достаточно хорошо, в IE7 и ранних версиях могут возникнуть проблемы. Убедитесь в том, что в данных браузерах ваши формы отображаются не намного хуже, и если что, подправьте их с помощью CSS.

Хотите быстро изучить JavaScript и jQuery?

Предлагаю использовать самый эффективный и современный метод обучения - видеокурс .

За счет получения информации сразу по двум каналам (зрение и слух) эффективность обучения значительно превосходит обучение по книгам. А домашние задания и онлайн-тесты позволят вам постоянно думать на изучаемом языке и сразу проверять свои знания!

Более 100 видеоуроков на одном DVD.

Видеокурс "HTML с нуля"

Если вы давно хотите как следует изучить HTML, то у меня для Вас есть отличная новость!

Вы можете совершенно бесплатно получить полноценный курс по HTML из моего платного сборника. 33 видеоурока от Евгения Попова!

Видеокурс "CSS с нуля"

Если вы уже изучили HTML и хотите двигаться дальше, то следующим шагом будет изучение технологии CSS.

Так же, как и в случае с HTML, вы можете совершенно бесплатно получить полноценный курс по СSS из моего платного сборника. Вас ждет 45 подробных видеоуроков от Евгения Попова!

Видеокурс "Домен и хостинг"

Если вы хотите разобраться с понятиями домена и хостинга, научиться создавать базы данных, закачивать файлы сайта на сервер по FTP, создавать поддомены, настраивать почтовые ящики для своего сайта и следить за его посещаемостью, то этот курс создан специально для вас!

Получать новые уроки на E-mail: