box-sizing в CSS


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.

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) вроде и нет. Брат предпочитает общение через ВКонтакте и Скайп. Но мы все ищем через поисковик.

Илон Маск рекомендует:  Операторы vba

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

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

CSS свойство box-sizing

Свойство box-sizing устанавливает алгоритм вычисления ширины и высоты элемента.

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

CSS синтаксис

Возможные значения

Значение Описание
content-box Значение по умолчанию. Ширина (width) и высота (height) определяют только размер области содержимого. Внутренние отступы (padding) и рамка (border) элемента сюда не включаются.
border-box Ширина и высота определяется для всего элемента. Таким образом, внутренние отступы (padding) и рамка (border) элемента, но не наружние отступы (margin), находятся в пределах указанной высоты и ширины.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Устанавливаем, чтобы отступы и рамки элементов

CSS свойство box-sizing

Свойство box-sizing определяет, каким образом производить расчет свойств width и height, если эти свойства содержат padding и borders.

По умолчанию, толщина и высота элемента вычисляются следующим образом:

    w >Таким образом, когда толщина и высота элемента установлены, элемент часто отображается больше установленного (так как border и padding добавляются к заданным width и height элемента).

Значение по умолчанию content-box
Применяется Ко всем элементам, которые могут иметь толщину и высоту.
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.boxSizing = «border-box»;

Синтаксис

В этом примере отображены два

Пример

Если свойство box-sizing установлено со значением content-box , общая толщина будет больше, чем заданная толщина div элемента. А если использовано значение border-box , padding и border будут включены в width и height .


Рассмотрим другой пример с двумя граничными блоками, которые установлены рядом друг с другом:

Изменяем блочную модель, свойство box-sizing

Проблему с шириной тянущихся полей решить сложно. Идеальным вариантом было бы изменение алгоритма расчёта ширины элемента, чтобы свойство width задавало не ширину содержания, а общую ширину.

К счастью, такая возможность в CSS есть. Реализуется она с помощью свойства box-sizing .

Это свойство имеет два значения:

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

Полезная статья про box-sizing на русском — «Используйте свойство box-sizing».

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

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

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

  • Вопрос задан более трёх лет назад
  • 3253 просмотра

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

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

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

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

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

box-sizing


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

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

Тип свойства

Применяется: ко всем элементам, у которых явно указана ширина или высота.

Значения

Значением свойства box-sizing являются ключевые слова указывающие способ расчета размеров блока.

Процентная запись: не существует.

Значение по умолчанию: content-box.

a) box-sizing: content-box — заданные высота и ширина распространяются только на содержимое элемента.

б) box-sizing: border-box — заданные высота и ширина распространяются на содержимое, внутренние отступы и рамку элемента.

Синтаксис

Пример CSS: использование box-sizing

Результат. Использование свойства CSS box-sizing в браузере Opera.

Как видите, второй блок оказался меньше, так как к указанным ширине и высоте браузер не прибавил размеры рамки и внутренних отступов.

Используйте свойство 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

Свойство box-sizing определяет способ расчета ширины ( width ) и высоты ( height ) элемента (и соответствующих min-width , min-height , max-width , max-height )

Свойство box-sizing определено в спецификации CSS 3 модуль Basic User Interface Level 3 (пользовательский интерфейс, уровень 3), применяется к все элементы, для которых возможно устанавливать свойства width или height, и действует на всех визуальные носителях, его значение не наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение content-box. На данный момент в браузерах Opera поддержка данного свойства не реализована.

Box Sizing

Easily manage projects with monday.com

The box-sizing property can make building CSS layouts easier and a lot more intuitive. It’s such a boon for developers that here at CSS-Tricks we observe International Box-Sizing Awareness Day in February.

But, how is it so helpful and beloved that it deserves its own internet holiday? Time for a little bit of CSS history.

Box Model History

Since the dawn of CSS, the box model has worked like this by default:

height + padding + border = actual visible/rendered height of an element’s box

This can be a little counter-intuitive, since the width and height you set for an element both go out the window as soon as you start adding padding and borders to the element.


Back in the old days of web design, early versions of Internet Explorer ( The box at the top shows the default box model. The box at the bottom shows what was once the «quirks mode» interpretation of the box model.

Some people preferred this «quirky» interpretation of the box model and considered it more intuitive. It’s a valid point. Having the actual visible width of a box turn out differently from what you declared in the CSS is a bit mind bending.

But, in the days of fixed-width design, it wasn’t particularly complicated to work with the default box model once you understood it. You could do a bit of arithmetic to figure out how many pixels you needed to trim off of an element’s declared width or height to accommodate its padding and border. The problem for present-day developers is that those absolute pixel lengths don’t translate to responsive design, so the same math doesn’t apply anymore.

As responsive design (or, as it was once known, «fluid» or «liquid» layout) started to gain popularity, developers and designers wished for an update to the box model. The great designer Jon Hicks, known for his excellent fluid width designs, had this to say on the subject in the CSS Wishlist we put together in 2008:

I would love a different box model! I find it bizarre that padding and border add the width of an object, and would love to be able to give something like a textarea 100% width and 3px padding without worrying what it’s going to do the layout. Perhaps something like padding-inside as a new selector?

In that vein I also wish I could specify a 100% width for an element, minus a set fixed width. Again, very useful when creating fluid designs with form elements!

Present-Day box-sizing

Those wishes were granted when the box-sizing property was introduced in CSS3. Though box-sizing has three possible values ( content-box , padding-box , and border-box ), the most popular value is border-box .

Today, the current versions of all browsers use the original «w >box-sizing: border-box; , we can change the box model to what was once the «quirky» way, where an element’s specified width and height aren’t affected by padding or borders. This has proven so useful in responsive design that it’s found its way into reset styles.

At this point you may be asking yourself, «Is it possible that Old IE did something right?» Plenty of people think so.

This demo shows how border-box can help make responsive layouts more manageable. The parent div ‘s width is 50%, and it has 3 children with different widths, padding, and margins. Click the border-box button to get all the children in the right place inside the parent.

Good, Better, and (Probably) Best box-sizing Reset Methods

The «Old» border-box Reset

The earliest box-sizing: border-box; reset looked like this:

This works fairly well, but it leaves out pseudo elements, which can lead to some unexpected results. A revised reset that covers pseudo elements quickly emerged:

Universal Box Sizing

This method selected pseudo elements as well, improving the normalizing effect of border-box . But, the * selector makes it difficult for developers to use content-box or padding-box elsewhere in the CSS. Which brings us to the current frontrunner for best practice:

Universal Box Sizing with Inheritance

This reset gives you more flexibility than its predecessors — you can use content-box or padding-box (where supported) at will, without worrying about a universal selector overriding your CSS. We went into more depth on this technique and the reasoning behind it in «Inheriting box-sizing Probably Slightly Better Best Practice». One potential gripe with it is that box-sizing isn’t normally inherited, so it’s specialized behavior, not quite the same as something you’d normally put in a reset.

Vendor Prefixes

Every current browser supports box-sizing: border-box; unprefixed, so the need for vendor prefixes is fading. But, if you need to support older versions of Safari ( -webkit and -moz , like this:

Known Issues

box-sizing: border-box; is supported in the current versions of all major browsers. The less-commonly used padding-box is only supported in Firefox at the moment. There’s more comprehensive information about browser support in our box-sizing almanac entry.

There are a few issues with older versions of Internet Explorer (8 and older). IE 8 doesn’t recognize border-box on elements with min/max-width or min/max-height (this used to affect Firefox too, but it was fixed in 2012). IE 7 and below do not recognize box-sizing at all, but there’s a polyfill that can help.

Илон Маск рекомендует:  Input - Переменная Delphi
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL