Что такое box sizing в css

box-sizing | 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 не работает

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

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

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

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

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

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

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

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

box-sizing

Применяется для изменения алгоритма расчета ширины и высоты элемента.

Согласно спецификации CSS ширина блока складывается из ширины контента ( width ), значений отступов ( margin ), полей ( padding ) и границ ( border ). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.

Синтаксис

box-sizing: content-box | border-box | padding-box | inherit

Значения

HTML5 CSS3 IE Cr Op Sa Fx

В данном примере ширина первого слоя будет равна 324 пиксела, поскольку она складывается из значения ширины контента ( width ), полей слева и справа ( padding ) и толщины границ ( border ). Ширина второго слоя равняется 300 пикселов за счет применения свойства box-sizing . Результат примера в браузере Opera показан на рис. 1.

Ширина блоков

Рис. 1. Ширина блоков

Браузеры

Firefox поддерживает нестандартное свойство -moz-box-sizing .

Safari до версии 5.0, Chrome до версии 10.0, Android до версии 4.0 и iOS Safari до версии 5.0 поддерживают нестандартное свойство -webkit-box-sizing .

Internet Explorer, Chrome, Opera и Safari не поддерживают значение padding-box .

Свойство box-sizing

Свойство box-sizing может принимать одно из двух значений – border-box или content-box . В зависимости от выбранного значения браузер по-разному трактует значение свойств width/height .

Значения box-sizing

Для большей наглядности посмотрим на картинку этого div в зависимости от box-sizing :

В верхнем случае браузер нарисовал весь элемент размером в width x height , в нижнем – интерпретировал width/height как размеры внутренней области.

Исторически сложилось так, что по умолчанию принят content-box , а border-box некоторые браузеры используют если не указан DOCTYPE , в режиме совместимости.

Но есть как минимум один случай, когда явное указание border-box может быть полезно: растягивание элемента до ширины родителя.

Пример: подстроить ширину к родителю

Задача: подогнать элемент по ширине внешнего элемента, чтобы он заполнял всё его пространство. Без привязки к конкретному размеру элемента в пикселях.

Например, мы хотим, чтобы элементы формы ниже были одинакового размера:

Как сделать, чтобы элементы растянулись чётко по ширине FORM ? Попробуйте добиться этого самостоятельно, перед тем как читать дальше.

Попытка width:100%

Первое, что приходит в голову – поставить всем элементам INPUT ширину width: 100% .

Как видно, не получается. Элементы вылезают за пределы родителя.

Причина – ширина элемента 100% по умолчанию относится к внутренней области, не включающей padding и border . То есть, внутренняя область растягивается до 100% родителя, и к ней снаружи прибавляются padding/border , которые и вылезают.

Есть два решения этой проблемы.

Решение: дополнительный элемент

Можно убрать padding/border у элементов INPUT/SELECT и завернуть каждый из них в дополнительный DIV , который будет обеспечивать дизайн:

В принципе, это работает. Но нужны дополнительные элементы. А если мы делаем дерево или большую редактируемую таблицу, да и вообще – любой интерфейс, где элементов и так много, то лишние нам точно не нужны.

Кроме того, такое решение заставляет пожертвовать встроенным в браузер дизайном элементов INPUT/SELECT .

Решение: box-sizing

Существует другой способ, гораздо более естественный, чем предыдущий.

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

Мы сохранили «родную» рамку вокруг INPUT/SELECT и не добавили лишних элементов. Всё замечательно.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *