CSS от А до Я блочная модель и свойство box-sixing


Содержание материала:

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 53226c35daad8f01 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Используйте свойство box-sizing

Странно, но многие разработчики до сих пор не знают о таком замечательном CSS3 свойстве как box-sizing . Или знают, но почему-то не используют. А ведь используя это свойство, можно избежать вроде бы нелогичного поведения браузеров.

Например, задавая ширину и высоту блоку, чаще всего мы хотим видеть его именно таких размеров. Но выходит совсем не так. Ведь на реальные размеры блока влияет размер границ и отступов. И в итоге мы получаем совсем не то, что ожидаем.

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

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

Или проблема с формами, например, разместить

на всю ширину блока.

Используем box-sizing

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

Поддержка в браузерах

Зная это, я полностью согласен с Paul Irish. Не мучайте себя, укажите для всего документа box-sizing .

Кстати, на этом блоге именно такой способ и используется.

Какие могут быть проблемы

Проблема №1: свойство не поддерживается в IE 6-7.
Решение: подключить polyfill исправляющий поддержку свойства или использовать условные комментарии с отдельным стилевым файлом.

Проблема №2: ошибка работы min-height , max-height с box-sizing в Firefox.
Решение: помнить об этом и не использовать эти свойства с box-sizing или дождаться выхода Firefox 17 в котором этот баг (308801) уже исправлен.

Свойство box-sizing

В CSS3 встроено еще одно свойство, относящееся к структуре и традиционной блочной модели. Свойство box-sizing позволяет менять способ расчета размера элемента: например, можно заставить браузер считать ширину забивки и рамки частью исходного размера элемента.

Как уже говорилось, для вычисления общей ширины области, занимаемой элементом, браузер применяет следующую формулу: размер + поля + забивка + рамки. Таким образом, если значение свойства w >

В зависимости от вашего стиля кодирования неплохой идеей может быть внедрение значений padding и border в значение width, для того чтобы формула расчета реальной ширины упрощалась до такой: размер + поля.

Листинг 2.36. Возможность учесть забивку и рамку в исходном размере элемента

Border: 1px solid #000000;

-webkit-box-sizing: border-box; box-sizing: border-box;

Свойство box-sizing может принимать два значения. По умолчанию оно равно content-box — это означает, что браузеры прибавляют значения padding и border к размеру, задаваемому свойством width. Если же вместо этого указать значение border-box, то поведение изменится: забивка и рамка будут учитываться в размере самого элемента.

Листинг 2.36 демонстрирует применение данного свойства к элементу

Сейчас существуют только экспериментальные реализации свойства box-sizing в некоторых браузерах. Для эффективного использования в своих документах данное свойство нужно объявлять с подходящим префиксом. К этой теме мы вернемся чуть позже.

CSS Box Sizing

Размер окна CSS

Свойство CSS box-sizing позволяет нам включать заполнение и границу в общую ширину и высоту элемента.

Без CSS окно-Изменение размера свойства

По умолчанию ширина и высота элемента вычисляется так:

Ширина + отступ + граница = фактическая ширина элемента
Высота + отступ + граница = фактическая высота элемента

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

На следующем рисунке показаны два элемента


Пример

.div1 <
width: 300px;
height: 100px;
border: 1px solid blue;
>

.div2 <
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
>

Свойство box-sizing решает эту проблему.

С помощью окна CSS-изменение размера свойства

Свойство box-sizing позволяет нам включать заполнение и границу в общую ширину и высоту элемента.

Если установить box-sizing: border-box; на элементе Padding и граница включены в ширину и высоту:

Вот такой же пример, как и выше, с box-sizing: border-box; Добавлено в оба элемента

Пример

.div1 <
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
>

.div2 <
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
>

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

Приведенный ниже код гарантирует, что все элементы имеют размер в этом более интуитивно понятным способом. Многие браузеры уже используют box-sizing: border-box; для многих элементов формы (но не все, поэтому входные и текстовые области выглядят по-разному по ширине: 100%;).

Применение этого ко всем элементам является безопасным и мудрым:

Пример

Tip: Try to remove the box-sizing property from the style element and look what happens. Notice that the width of input, textarea, and submit button will go outside of the screen.

Топ-пост этого месяца:  Instagram взялся за искусственно накрученные профили

Box-sizing: управляем вычислением ширины и высоты

В предыдущем уроке мы рассказывали, по какому принципу традиционно вычисляется ширина и высота элемента. Фактическую ширину/высоту образует сумма значений width / height , padding , border и margin .

Нередко в процессе верстки возникает необходимость управлять стандартным вычислением размеров элемента. Допустим, вы хотите, чтобы ширина определенного блока

Как же сделать так, чтобы браузер учитывал отступы, а иногда и рамку, вычисляя ширину блока? На помощь приходит свойство box-sizing, которое может принимать три значения, а именно:

  • content-box — значение по умолчанию (поведение, описанное выше). Ширина и высота элемента определяется только свойствами width и height .
  • border-box — в данном случае браузер включает отступы padding и рамку border в общую ширину/высоту элемента. Это значит, что если для блока задана ширина, скажем, width: 50% , отступы (например, padding-left: 10px и padding-right: 10px ) и рамка ( border-width: 1px ), то браузер будет считать эти отступы и рамку частью ширины 50%. Ширина самого содержимого составит 50% минус 22 пикселя. Обратите внимание, что значения margin включены НЕ будут.
  • padding-box — это значение похоже на предыдущее, только в ширину/высоту элемента будут включены только отступы padding , без рамки. Значения margin также не учитываются. Значение padding-box было исключено из спецификации CSS, однако оно все еще поддерживается браузером Firefox.

Box-sizing: кроссбраузерность

Чтобы свойство box-sizing работало в браузерах Firefox, а также старых версиях Safari, Chrome и Android, следует записывать несколько его вариаций, используя соответствующие префиксы производителя:

Что же насчет поддержки браузером Internet Explorer? Хорошие новости: box-sizing работает в IE8 и выше.

Итак, CSS-свойство box-sizing поддерживается почти всеми браузерами, кроме IE6 и IE7. Это 97% используемых браузеров, согласно данным с сайта Caniuse. И если у вас нет необходимости в поддержке двух старых версий IE, вы можете смело использовать это свойство (но не забудьте про префиксы!).

Далее в учебнике: контент, выходящий за пределы необходимой области, и свойство overflow, решающее данную проблему.

Box-sizing: переключаем блочную модель

Как известно, в IE6 размеры блока считаются не так как в остальных баузерах и включают в себя не только контентную часть элемента, но и внутренние отступы с границами (см. статью Блочная модель в IE6). Но иногда такой подсчет будет весьма кстати!

Задача

Сделать, чтобы блок растягивался на 50% ширины родителя и при этом имел внутренние отступы padding и границу border.

Решение 1. Стандартное — обертка.

Добавляем дополнительный контейнер-обертку. Задаем ему ширину 50% родителя. Самому блоку задаем внутренние отступы и границы (не задавая ширину). Таким образом внутренний блок займет все доступное пространство обертки без учета внутренних отступов и границ. При изменении размеров внутренних отступов и границ, размер внешнего блока меняться не будет.

Главный недостаток метода — дополнительный контейнер.

Решение 2. Для блока с абсолютным позиционированием.

Для блоков с position: absolute можно использовать прием описанный в статье Два в одном: позиция + размеры. Код будет таким:

Преимущество — обошлись без контейнера.

Недостки — способ работает только для блоков спозиционированных абсолютно, используется expression.

Решение 3. Прогрессивное.

Как ты, конечно, догадался, речь идет о CSS3. А точнее, о CSS3 свойстве box-sizing. Это свойство позволяет переключаться между разными блочными моделями.

Это свойство по умолчанию имеет значение content-box и размеры элемента не включают внутренние отступы и границы (такая блочная модель по умолчанию принята во всех современных браузерах кроме IE6). При изменении значения на border-box размеры блока рассчитываются так как в IE6, т.е. содержат в себе внутренние отступы и границы элемента.

Теперь, чтобы добиться требуемого эффекта, для элемента нужно написать всего одну строчку:


Но это только в теории! А на практике эту строчку поймут только Opera 7+ и IE8+. Для других популярных браузеров придется использовать это свойство с вендорными префиксами: -moz-box-sizing для Firefox 1+ и -webkit-box-sizing для Safari 3+ и Chrome.

Итого для нашего блока получим:

IE6 свойство box-sizing, естественно, не поймет, но в нашем случае это и не нужно! Ведь в режиме Quirks Mode у него размеры элемента по умолчанию включают отcупы и границы.

Для IE7 (и IE6 в режиме Almost Standards Mode) все-таки придется использовать костыль — например, такой expression:

В боевых условиях expression выносим в отдельный css файл, подключаемый с помощью условных комментариев.

Выводы

Если тебя не пугает expression для IE7, можно использовать box-sizing для решения подобных задач. Это позволит избавится от лишнего контейнера в HTML файле. Хотя, конечно, для резиновых сайтов использование такого expression вариант неудачный — оптимизированный expression сработает только один раз при загрузке докуманта, а неоптимизированный может порядочно тормозить.

Размеры блоков, или Назад в будущее

Технологии разработки сайтов меняются в корне. XHTML (Strict — мы так гордились своей работой) уступил место более свободному HTML5. Нарезанные картинки и div-обёртки заменяются гораздо более разумными (и, если повезет, семантичными) средствами HTML и CSS3, такими как border-radius , box-shadow и градиенты. Резиновая раскладка превращается в отзывчивый дизайн на медиа-выражениях. JavaScript — уже не просто игрушка, и занимает положенное место в триумвирате с HTML и CSS. Может быть, мы уже близки к получению реального инструмента разметки с помощью Flexbox. Может быть, даже почтенные единицы em будут забыты, и их заменят более предсказуемые rem , а также гибкие единицы vw и vh .

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

Но есть кое-что гораздо менее заметное, о чём бы я хотел поговорить сегодня, тоже способное по-своему изменить разработку сайтов. Это CSS-свойство box-sizing .

Те из вас, кто помнит тяжелые старые времена, помнит и неправильную блочную модель, которую IE использовал вместо стандартной модели W3C. В этой модели рамка ( border ) и отступ ( padding ) считались частью ширины ( width ) и высоты ( height ) блока, в то время как в модели W3C отступ и рамка прибавлялись к ширине и высоте при расчёте конечных размеров блока. В модели IE свойство width отражало конечную ширину блока, в то время как в модели W3C оно отражало ширину контентной части блока (то есть части блока, в которой находится непосредственно его содержимое). Чтобы заставить IE играть по правилам, мы должны были использовать хак блочной модели Тантека Челика.

CSS-свойство box-sizing существует уже некоторое время и дает нам возможность переключаться между стандартной блочной моделью box-sizing:content-box и старой блочной моделью IE box-sizing:border-box . Недавний всплеск интереса к использованию этого забытого свойства связан с выходом статьи Пола Айриша * < box-sizing:border-box >FTW.

Пора переключиться на border-box?

Если вы хотите перейти сразу к делу, пожалуйста, поучаствуйте в опросе о box-sizing , а если нет — просто читайте дальше.

Использование border-box по умолчанию никогда не будет включено в стандарт, так как это скажется на отображении слишком большого количества сайтов, но не пришло ли время переключиться на использование его для всех элементов на всех проектах с помощью универсального селектора, как предлагает Пол? Об этом я думал в последнее время.

Топ-пост этого месяца:  Как стать техническим переводчиком сайтов и компьютерных игр Мы расскажем, как!

Если дело касается только моих собственных проектов или проектов с небольшими командами разработчиков, которых я знаю и с которыми могу общаться непосредственно, я думаю, сказал бы — да, это стоит сделать. Но когда речь идет о руководстве для многих разработчиков, проектах с открытым исходным кодом или демо-материалах, доступных для просмотра большому количеству пользователей, с которыми я никогда не общался, я всё ещё сомневаюсь.

За и против

Определенно, в лагере профессионалов есть несколько наиболее известных разработчиков. Пол Айриш, несомненно, фанат своего дела. Он подытоживает разочарование от текущей модели:

Уф. Если я говорю, что ширина блока должна быть 200 пикселей, то блок должен занимать 200 пикселей по ширине, даже если у него есть отступы по 20 пикселей.

Я большой фанат этой техники, я использовал ее в некоторых мобильных веб-приложениях и все больше использую в веб-проектах.

Джереми Кит просто называет её «очень крутой». В то же время, Стефани Рюис в удивляется в комментарии:

Мы должны лоббировать смену модели W3C. Я постоянно слышу, что разработчики разочарованы.

К слову о «неправильной блочной модели», как мы привыкли её называть. Я думаю, проблема в том, что вы не можете управлять контентной областью блока, и любое изменение отступа или рамки окажет на нее влияние. Я понимаю, что людям может быть проще оформлять блоки таким способом, но это не волшебная палочка, и вам придется смириться с другими сложностями«.

Спецификация недостаточно подробно описывает, как это должно работать, чтобы реализовать это при помощи CSS3 Box, вот что я могу сказать.

В то время как Дэвид Барон (тоже представитель Mozilla, а также рабочей группы CSS) заявляет:

Насколько я вижу, «за» и «против» таковы:

  • Гораздо проще рассчитывать размер элемента. Это тот размер, который я задаю, вне зависимости от того, какую толщину рамки или какой отступ я указываю.
  • Мы можем указывать ширину блока в процентах для тянущихся макетов, продолжая использовать em или px для указания размеров полей. При использовании традиционной модели нам понадобится свойство calc для решения этой проблемы. Читайте отличный пост Криса Койера о box-sizing с описанием этого случая.
  • Если вы собаку съели, разрабатывая под IE, то вы уже знаете, как использовать такую модель.

Против

  • Если вам требуется поддерживать IE7 и ниже, то у вас нет другого варианта, кроме как использовать специальные библиотеки или переводить IE в Quirks Mode (не лучшая идея). Firefox потребует использования префиксов, и вам потребуется префикс -webkit , если вы заботитесь об относительно свежих версиях Webkit. Смотрите список браузеров, поддерживающих свойство box-sizing .
  • Всё ещё есть баги в поведении Firefox, особенно при работе с min- и max-width/height(к счастью, уже исправленные — прим. редактора).
  • Вы теряете контроль над размерами контентной области блока, что может привести к непредсказуемым последствиям. Например, что будет, если размер поля равен или больше ширины или высоты блока? (Самые дотошные могут открыть спецификацию и поискать правильный ответ).
  • Пожалуй, наибольшая проблема для меня — ожидания разработчиков. Если я использую * < box-sizing:border-box; >в коде, который должен использоваться и расширяться другими разработчиками, я уверен, что они с большей вероятностью будут ожидать блочной модели W3C, и их стили будут вести себя не так, как они ожидают. Более того, если речь идет о разработчиках-новичках, то они могут быть вообще незнакомы с моделью IE, что потребует от них изучения дополнительных материалов перед началом работы, даже если они поймут причину такого поведения.

Что вы думаете?

С учетом всего сказанного и других причин, которые, я уверен, найдутся, — что вы думаете по этому поводу? Если бы вы участвовали в проектах, где другие разработчики будут работать с вашим кодом, вы бы использовали box-sizing:border-box ? Я создал опрос, так что вы можете дать мне об этом знать, и после получения результатов я сделаю отчет о том, что выбирают люди.

Через неделю в блоге появилась еще одна запись, уже с результатами оригинального опроса. Мы решили опубликовать перевод записи с результатами здесь же.


Результаты опроса

Прошла неделя с того дня, как я создал опрос об использовании box-sizing:border-box . За это время форму заполнили 256 человек. Результаты оказались такими:

Используете ли вы или будете использовать box-sizing:border-box ? Да Нет
В текущем личном проекте 71% 29%
В будущем личном проекте 88% 12%
В будущем «командном» проекте 85% 15%
В будущем «публичном» проекте 60% 40%

В приведённой таблице под «командным проектом» понимается проект, в котором разработчики знакомы с человеком, принимающем решение об использовании модели border-box — например, группа разработчиков в одной компании или группа друзей, с которыми вы близко общаетесь в ходе работы. Под «публичным проектом» понимается проект, в котором разработчиком может быть кто угодно, с кем вы, вероятно, не можете лично согласовать выбор модели — проект с открытым исходным кодом или публичное API.

Хотя это не окончательные результаты голосования, есть признаки того, что разработчики комфортно чувствуют себя при использовании модели border-box (или планируют её использовать) и рады использовать ее в «командных проектах». Меня немного удивило количество разработчиков, уже использующих эту модель. Число разработчиков, предпочитающих применять модель border-box в «публичных проектах» ниже, но все равно на 20% выше, чем число тех, кто не планирует этого делать. Если результаты опроса что-то значат, не удивляйтесь, если встретите все больше проектов, использующих модель, формально считающуюся неправильной.

Хотя разработчики в большинстве своем предпочитают использовать box-sizing:border-box , многие заявили, что будут делать это только при необходимости, не применяя его ко всем элементам с помощью универсального селектора. Многие обратили внимание, что использование может нарушить работу некоторых jQuery-плагинов, и это способно ограничить применимость модели на сайтах, активно использующих jQuery. Другие сообщили, что применяли бы эту модель, если бы она была документирована, как это было с KSS-комментариями (это хороший подход при работе в команде или даже в личных проектах, если вам требуется затем поддерживать собственный код).

Я оставлю опрос открытым в надежде собрать больше ответов. Но поскольку соотношение результатов в box-sizing:border-box; составило 60 к 40 в течение недели, я не жду, что результат значительно изменится.

Вы все еще можете принять участие в опросе. К сожалению, результаты опроса сейчас скрыты. Но это только подогревает наше любопытство. Расскажите: а что вы думаете о возможности выбора блочной модели? Используете box-sizing:border-box; в текущих проектах? Планируете использовать?

Перевод оригинальных записей «Sizing Boxes (Back to the Future)» и «Box-sizing: border-box; the results are in» Дэвида Стори (David Storey), опубликованных на сайте Genetated Content. Переведено и опубликовано с разрешения автора.

Зачем указывать box-sizing для всех элементов?

Часто вижу конструкцию типа

я не спорю в полезности border-box, но какие могут быть аргументы в пользу того, что бы обозначить все элементы так?

  • Вопрос задан более трёх лет назад
  • 3241 просмотр
Топ-пост этого месяца:  Как в TypeScript функция возвращает массив пример кода и компиляция в JavaScript

Потому что по умолчанию стоит модель content-box, и она убога.
Хотя для того, чтобы например его можно было переопределить в плагинах, предпочитаю такой способ

UPDATE: Решил посмотреть, как влияет применение универсального селектора на производительность.
Взял статью frontender.info/css-performance-revisited-selector. , и оттуда код

Также использовал 1000 идентичных кусков данной разметки

Проверял 2 способа: с пустым css файлом, и с CSS кодом

Пока только на последнем хроме. Запускал страницу по 50 раз и вычислил средние значения:
В первом случае, без css кода, это оказалось 124ms, во втором — 121ms.
Понятно, что это статистическая погрешность, поэтому пришел к выводу, что разницы никакой нет.
Если предложите другие варианты тестирования — буду очень рад.

box-sizing | CSS

Блочная модель CSS

По умолчанию margin , padding и border увеличивают коробку элемента и прибавляются к width , если width не имеет значение auto , или height .

изменить margin : (внешний отступ от границы элемента)
изменить border : (граница)
изменить padding : (внутренний отступ от содержимого до границы)

Как сделать, чтобы блок не выходил за границы родителя

Нужно уменьшить width на padding-left и padding-right , а height — на padding-top и padding-bottom : нажать

Как работает свойство box-sizing

При box-sizing: border-box; [w3.org] коробку не растягивают padding и border , они включены в width / height . Есть исключения.

width: 100%; и padding или border

Наиболее частый пример: нажать

box-sizing не работает

При box-sizing: border-box; блок всё же будет расширяться на величину, равную положительному числу из

  • padding-right + padding-left + border-right-width + border-left-width — width
  • padding-top + padding-bottom + border-top-width + border-bottom-width — height

изменить height :

5 комментариев:

Ivan Это чай сурьезно. А вот вчара спутник запустили. Только там нет моих сайтов)). NMitra Даже думать не хочу что там с факторами ранжирования, но результат вроде отличается от Яндекса и Гугл. У тех есть то, что нет у Спутника — статистика переходов в виде браузеров и счетчиков на сайтах.

Хорошо, что поисковиков много. Главное, чтобы все одинаково читали мета-теги, robots.txt и т.п.

Вебмастера будут ориентироваться на тот, где число посетителей больше. Например, у меня с mail.ru в день идёт около 50 человек (0,6% от общего трафика). Я даже не помню логин от Вебмастера.

Посетители будут посещать чаще тот, у кого выше качество выдачи, и тот, кто рекламирует себя активнее. То есть по телику теперь чаще будем видеть рекламу поисковиков. Вспомним хотя бы Авито.ру. Гугл, например, заключает контракты с учебными заведениями, чтобы те использовали Blogger, чтобы молодёжь привыкала к бренду. Автор Пользоваться будут всегда тем поисковиком, у которого стартовая страница, а стартовая страница там, где основная почта. То есть почта и есть главное для поисковика. Поэтому бинги, спутники и дюк дюк пока в пролете будут. Спутнику ничего не светит пока нет почты и нет нормального индекса. У них свой алгоритм поиска, но очень пока неразвит совсем. NMitra Ой, не всегда так. У меня, например, да — почта основной инструмент. В него стекается инфо из комментариев блога, из оставленных сообщений в соц. сетях, обновления сайтов (я про RSS) и т.д. У многих он есть, но они им (инструментом) не пользуются. Например, у меня муж открывает свою почту раз в ээээ. У отца стартовая страница в браузере — РБК. А у мамы его (email) вроде и нет. Брат предпочитает общение через ВКонтакте и Скайп. Но мы все ищем через поисковик.

И потом, вроде самый большой процент зарегистрированных сидит на mail.ru.

Хотя согласна — почта — это один из сильных инструментов подсадить человека на свои сервисы, такой же как Карта или Новости. Автор Сам Яндекс как то проговорился, не помню где, что почта это основа для поисковика. Они очень трепетно относятся к почте, так как по статистике почта является главным условием работы поисковика. Майловским поиском не особо пользуются, потому что он очень плохой. Хорошо что появился спутник..Это уменьшит монополию яндекса, с их наглыми алгоритмами. В интернете много вранья и мошеничества со стороны их.

Андрей Аносов

CSS → Удобная блочная модель с box-sizing: border-box

Эта заметка — вольный перевод статьи Пола Айриша * < box-sizing: border-box >FTW.

Неудобная и нелюбимая многими особенность CSS — это связь width и padding в блочной модели. Потому что эта самая особенность заставляет нас при верстке высчитывать и подгонять значение ширины блока (width), с учетом отступов внутри него (padding). Ведь если нам нужно сверстать блок шириной 200 пикселей с отступом внутри него в 20 пикселей со всех сторон, то нужно подгонять css-свойства так, чтобы width был равен 160px, а padding: 20px.

Гораздо удобнее было бы, чтобы общая ширина блока равнялась 200 пикселям даже если мы укажем width: 200px и padding: 20px. Но, как вы знаете, блочная модель в CSS работает не так. О истории развития блочной модели можно почитать здесь.

И для того, чтобы блочная модель работала так, как мы хотим, рекомендуется указать следующие css-свойства:

Это даст такую блочную модель, которую мы желаем увидеть, при этом она будет применена ко всем DOM-элементам. К слову, многие браузеры уже применяют такую блочную модель к некоторым элементам, например к и

. И применение такой блочной модели ко всем элементам — это прекрасный подход.

Если учитывать поддержку box-sizing: border-box браузерами, то все вышеописанное рекомендуется для проектов, которые не поддерживают IE версии 7 и ниже. С остальными браузерами проблем не возникнет, но нужно учитывать, что для относительно старых версий Firefox потребуется указывать css-свойство с префиксом -moz, а для большинства мобильных браузеров — с префиксом -webkit. Если же очень нужно применить такую блочную модель для IE6-7, то стоит обратить внимание на js-полифил для box-sizing.

Вы спросите, насколько это безопасно использовать в своих проектах? Абсолютно безопасно. jQuery прекрасно работает с такой блочной моделью. Поддержка браузерами превосходна. Многие проекты уже работают с такой блочной моделью по умолчанию.

Одна из распространенных в верстке задач, для которой идеально подходит такая блочная модель — это колонки. Если вы хотите использовать в макете колонки с процентным соотношением ширины (например, 30% — 50% — 20%), да еще и задать внутри колонок отступы (padding), то макет расползется, потому что суммарная ширина колонок будет больше 100%. А с border-box такой макет легко сверстать. Другой хороший пример использования такой блочной модели — когда элементу нужно задать ширину 100% и padding.

Многие могут отметить, что использование универсального селектора приведет к большой потере производительности в браузере. Но это не совсем так. Использование универсального селектора * настолько же быстро, как например использование селектора h1. Универсальный селектор будет медленным, если вы его используете, например так: .foo > *. О производительности селекторов можно прочитать в этой статье.

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

Добавить комментарий