Расчет ширины и высоты блока




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

Ширина блока это комплексная величина и складывается из нескольких значений свойств:

width — ширина контента, т.е. содержимого блока;

padding-left и padding-right — поле слева и справа от контента;

border-left и border-right — толщина границы слева и справа;

Margin-left и margin-right — отступ слева и справа.

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

Если значение width не задано, то оно по умолчанию устанавливается как auto. В этом случае ширина блока будет занимать всю доступную ширину при сохранении значений полей, границ и отступов. Под доступной шириной в данном случае подразумевается ширина контента у родительского блока, а если родителя нет, то ширина контента браузера.

Допустим, для слоя написан следующий стиль.

width: 300px; /* Ширина контента */

margin: 7px; /* Значение отступов */

border: 4px solid black; /* Параметры границы */

padding: 10px; /* Поля вокруг текста */

Ширина блока согласно этой записи будет равна 342 пиксела, эта величина получается складыванием значения ширины контента плюс отступ слева, граница слева и поле слева, плюс поле справа, граница справа и отступ справа. Суммируем все числа.

Ширина = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342

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

В браузере Internet Explorer в режиме совместимости (когда не указан доктайп) алгоритм блочной модели меняется автоматически и ширина всего блока устанавливается равной width. Остальные браузеры так просто не меняют алгоритм.

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

Табл. 1. Поддержка браузерами свойства box-sizing
Браузер Internet Explorer Chrome Opera Safari Firefox
Версия 8.0+ 2.0+ 7.0+ 3.0+ 1.0+
Свойство box-sizing -webkit-box-sizing box-sizing -webkit-box-sizing -moz-box-sizing

В табл. 1 приведена поддержка браузерами этого свойства.

Пример 3. Ширина блока

XHTML 1.0CSS 3IE 7IE 8+CrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Ширина блока</title>

<style type="text/css">

div {

width: 100%; /* Ширина */

background: #fc0; /* Цвет фона */

padding: 20px; /* Поля */

-moz-box-sizing: border-box; /* Для Firefox */

-webkit-box-sizing: border-box; /* Для Safari и Chrome */

box-sizing: border-box; /* Для IE и Opera */

}

</style>

</head>

<body>

<div>Ширина блока 100%</div>

</body>

</html>

Данный пример будет работать во всех браузерах, указанных в табл. 3.1, однако невалиден в CSS3 из-за применения нестандартных свойств начинающихся на -moz и -webkit. Ширина блока составляет 100% с учетом значений padding. Без свойства box-sizing в браузере появится горизонтальная полоса прокрутки.

Использование свойства box-sizing всем хорошо, кроме того, что не работает в старых версиях IE. Если вы верстаете сайт с учетом IE7 и IE6, вам подойдёт старый проверенный метод с вложением слоев. Идея простая — для внешнего блочного элемента задаётся только необходимая ширина, а для вложенного блока всё остальное — поля, границы и отступы. Поскольку по умолчанию ширина блока равна доступной ширине родителя, получится, что блоки в каком-то смысле накладываются друг на друга, при этом фактическая ширина такого комбинированного элемента будет чётко задана. В примере 4 показано использование вложенных слоев.

Пример 4. Вложенные слои



Поделиться:




Поиск по сайту

©2015-2024 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование.
Дата создания страницы: 2016-08-08 Нарушение авторских прав и Нарушение персональных данных


Поиск по сайту: