Вычисление ширины блока через box-sizing
В CSS3 появилось свойство , смысл которого в способе вычисления ширины HTML-блока браузером. Но, прежде чем переходить к его рассмотрению, сначала давайте вспомним, как обычно браузер производит расчет ширины блока элемента в HTML-разметке?
Вычисление всегда выполняется по формуле: . То есть, если ширина контента задана в 200px, равен 25px, равен 10px, а равен 15px; то результирующая ширина блока будет равна 300px.
Такой способ вычисления ширины блока делают все современные браузеры:
Однако, были времена, когда не все браузеры вычисляли размеры блока элемента подобным образом. Существовал Internet Explorer версии 5/6, который ширину блока считал несколько иначе: из заданной ширины блока вычитались padding и border, получалась результирующая ширина области content. В те времена веб-разработчики “показывали пальцем” на этот браузер и говорили, что это ошибка и недочет разработчиков IE5/6.
Но теперь времена изменились благодаря появлению адаптивного ( ) дизайна. Причины возникновения адаптивного дизайна — в огромном количестве устройств с разными размерами экранов, по большей части мобильных. Задача адаптивного дизайна в “подстраивании” одного и того же дизайна сайта под различные размеры мониторов. При таком “подстраивании” важной становиться задача вычисления ширины блоков элементов, чтобы верстка не “разваливалась”.
Чтобы такого не произошло, как раз и становиться удобным “возврат” к той модели расчета ширины блока, какая присутствовала в IE5/6. Для этого было разработано свойство , с помощью которого можно управлять подобной моделью расчета.
| Свойство принимает три значения (три модели вычисления ширины блока): **content-box | padding-box | border-box**. |
Свойство box-sizing: content-box
Первая модель является способом вычисления ширины блока по умолчанию, принятым в современных браузерах:
Ширина блока равна сумме:
Свойство box-sizing: padding-box
Вторая модель заключается в том, что ширина блока включает в себя ширину контента ( ) и ширину . Остальные — и — приплюсовываются к заданной ширине, как обычно. Данная модель, хоть и заявлена в спецификации CSS3, не поддерживается на сегодняшний день почти никакими браузерами; так что о ней можно забыть (пока забыть):
Ширина блока равна сумме:
Свойство box-sizing: border-box
Третья модель очень похожа на предыдущую модель . Но, в данном случае, ширина блока включает в себя еще и ; то есть ширина блока включает в себя область , и . Область прибавляется к ширине блока элемента, как обычно.
Ширина блока равна сумме:
Практический пример свойства box-sizing
Теперь не мешало бы продемонстрировать на практике, каким образом браузеры выполняют вычисления ширины блоков элементов под управлением свойства . Допустим, у нас имеется блок-обертка , внутри которого расположены два плавающих блока-потомка и .
HTML-разметка представлена ниже:
… и CSS-таблица, обычная для такого случая. Единственное “новое” правило в этом коде — это свойство , указанное с вендорными префиксами. Обычно его можно не указывать, так как у браузеров по умолчанию свойство установлено в значении (как уже упоминалось ранее). Но в нашем случае понадобится явно указать это свойство. Для блоков-потомков здесь намерено мы не указываем (пока не указываем) , и :
Блоки-потомки четко вписываются в блок-родитель, так как у них нет , и ; ширина блоков-потомков точно равна половине ширине блока-родителя.
Теперь добавим для блоков-потомков :
Картина будет заранее предсказуемая — один из блоков-потомков опуститься вниз из-за добавления к обоим блокам:
Настало время применить свойство со значением . Браузер сразу же пересчитает ширину обоих блоков и картина, как по волшебству, изменится:
Даже если добавить к блокам-потомкам границу , то картинка останется прежней:
Но если прибавить к блокам и правило , то наша разметка снова “сломается”:
Это происходит потому, что в модель вычисления поля не входят. Поле размером 5px прибавляется к ширине блока-потомка. Суммарная ширина обоих блоков-потомков превышает ширину блока-родителя и один из них выходит из его, опускаясь (снова) вниз:
В этом примере мы не применили к свойству значения , потому что [браузеры не понимают этого значения][1] и свойство работать не будет в этом случае.
Заключение
Вот и все, что можно сказать о свойстве . Понимание этого свойства понадобиться еще, когда придет время изучать адаптивный (responsive) дизайн.
Основой для данной статьи послужила замечательная “Большая книга CSS3 Д. Макфарланд (3-е издание).
| [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing “MDN | CSS — box-sizing” |
box-sizing css
Красивая функция trackBy
Пример красивой функции trackBy для Angular. Функция понравилась своей лаконичностью:<% highlight typescript %>public trackByNumber = (_. … Continue reading
How to Calculate the Width of an Element with the CSS calc() Function
In this snippet, you can find some examples, where we calculate the width of an element with the CSS calc() function. As we know, this function allows us to do simple calculations and determine the values of CSS properties right in CSS.
The calc() function is especially useful when you need to mix units. In our examples, we’ll mix percentages and pixels.
Let’s see the calc() function in use.
Example of using the calc() function:
Result
In the example above, we set the display property of the container to “flex”. For the right <div> element, we specified the width, while for the left <div>, we used the calc() function to calculate its width.
Example of using the calc() function for the <div> element with the CSS display property:
Let’s see one more example, where we specify the float properties for each individual <div>. Then, we add the clear property with its «both» value to the «content-container» class.
Determining the dimensions of elements
There are several properties you can look at in order to determine the width and height of elements, and it can be tricky to determine which is the right one for your needs. This article is designed to help you make that decision. Note that all these properties are read-only. If you want to set the width and height of an element, use width and height or the overriding min-width and max-width , and min-height and max-height properties.
How much room does it use up?
If you need to know the total amount of space an element occupies, including the width of the visible content, scrollbars (if any), padding, and border, you want to use the HTMLElement.offsetWidth and HTMLElement.offsetHeight properties. Most of the time these are the same as width and height of Element.getBoundingClientRect() , when there aren’t any transforms applied to the element. In case of transforms, the offsetWidth and offsetHeight returns the element’s layout width and height, while getBoundingClientRect() returns the rendering width and height. As an example, if the element has width: 100px; and transform: scale(0.5); the getBoundingClientRect() will return 50 as the width, while offsetWidth will return 100.
What’s the size of the displayed content?
If you need to know how much space the actual displayed content takes up, including padding but not including the border, margins, or scrollbars, you want to use the Element.clientWidth and Element.clientHeight properties:
How big is the content?
If you need to know the actual size of the content, regardless of how much of it is currently visible, you need to use the Element.scrollWidth and Element.scrollHeight properties. These return the width and height of the entire content of an element, even if only part of it is presently visible due to the use of scroll bars.
For example, if a 600×400 pixel element is being displayed inside a 300×300 pixel scrollbox, scrollWidth will return 600 while scrollHeight will return 400.
Как узнать ширину блока css
Размеры элементов задаются с помощью свойств width (ширина) и height (высота).
Значение по умолчанию для этих свойств — auto , то есть браузер сам определяет ширину и высоту элемента. Можно также явно задать размеры с помощью единиц измерения (пикселей, em) или с помощью процентов:
Пиксели определяют точные ширину и высоту. Единица измерения em зависит от высоты шрифта в элементе. Если размер шрифта элемента, к примеру, равен 16 пикселей, то 1 em для этого элемента будет равен 16 пикселям. То есть если у элемента установить ширину в 15em, то фактически она составит 15 * 16 = 230 пикселей. Если же у элемента не определен размер шрифта, то он будет взят из унаследованных параметров или значений по умолчанию.
Процентные значения для свойства width вычисляются на основании ширины элемента-контейнера. Если, к примеру, ширина элемента body на веб-странице составляет 1000 пикселей, а вложенный в него элемент <div> имеет ширину 75%, то фактическая ширина этого блока <div> составляет 1000 * 0.75 = 750 пикселей. Если пользователь изменит размер окна браузера, то ширина элемента body и соответственно ширина вложенного в него блока div тоже изменится.
Процентные значения для свойства height работают аналогично свойству width, только теперь высота вычисляется по высоте элемента-контейнера.
В то же время фактические размеры элемента могут в итоге отличаться от тех, которые установлены в свойствах width и height . Например:
Как видно на скриншоте, в реальности значение свойства width — 200px — определяет только ширину внутреннего содержимого элемента, а под блок самого элемента будет выделяться пространство, ширина которого равна ширине внутреннего содержимого (свойство width) + внутренние отступы (свойство padding) + ширина границы (свойство border-width) + внешние отступы (свойство margin). То есть элемент будет иметь ширину в 230 пикселей, а ширина блока элемента с учетом внешних отступов составит 250 пикселей.
Подобные расчеты следует учитывать при определении размеров элементов.
С помощью дополнительного набора свойств можно установить минимальные и максимальные размеры:
min-width : минимальная ширина
max-width : максимальная ширина
min-height : минимальная высота
max-height : максимальная высота
В данном случае ширина элемента равна 50% ширины элемента-контейнера, однако при этом не может быть меньше 200 пикселей и больше 300 пикселей.
Переопределение ширины блока
Свойство box-sizing позволяет переопределить установленные размеры элементов. Оно может принимать одно из следующих значений:
content-box : значение свойства по умолчанию, при котором браузер для определения реальных ширины и высоты элементов добавляет берет соответственно значения свойств width и height элемента
В данном случае элемент будет иметь ширину в 200 пикселей и высоту в 100 пиксей.
padding-box : указывает веб-браузеру, что ширина и высота элемента должны включать внутренние отступы как часть своего значения. Например, пусть у нас есть следующий стиль:
Здесь реальная ширина внутреннего содержимого блока будет равна 200px (width) — 10px (padding-left) — 10px (padding-right) = 180px.
Стоит отметить, что большинство современных браузеров не поддерживают данное свойство.
border-box : указывает веб-браузеру, что ширина и высота элемента должны включать внутренние отступы и границы как часть своего значения. Например, пусть у нас есть следующий стиль:
Здесь реальная ширина внутреннего содержимого блока будет равна 200px (width) — 10px (padding-left) — 10px (padding-right) — 5px (border-left-width) — 5px (border-right-width) = 170px.
Например, определим два блока, которые отличаются только значением свойства box-sizing:
В первом случае при определении размеров блока к свойствам width и height будут добавляться толщина границы, а также внутренние и внешние отступы, поэтому первый блок будет иметь большие размеры: