Высота и ширина элемента являются вычисляемыми величинами. Каждый элемент веб-страницы образует прямоугольную область, которая в свою очередь состоит из нескольких областей — области контента (содержимого) , области отступов , области рамки и области полей элемента.
Между содержимым элемента и его рамкой находятся отступы padding , за рамкой элемента — поля margin . Область содержимого существует у каждого элемента, остальные области являются необязательными.
Рис. 1. Блочная модель элемента
1. Высота элемента
Свойство height задает высоту контента блочного элемента и не оказывает никакого влияния на строчные элементы display: inline; . Высота строчных элементов равна высоте их содержимого. Отрицательные значения не допускаются. Свойство не наследуется.
Синтаксис
P {height: 100px;}
2. Ширина элемента
Свойство width задает ширину контента блочного элемента и не оказывает никакого влияния на строчные элементы display: inline; . Ширина строчных элементов равна ширине их содержимого. Отрицательные значения не допускаются. Свойство не наследуется.
Синтаксис
P {width: 100px;}
3. Высота и ширина абсолютно позиционированного элемента
Задавать ширину и высоту абсолютно позиционированного элемента position: absolute; не всегда необходимо, так как в данном случае высота и ширина неявно определяются смещением элемента. Если для элемента заданы границы border и поля margin , они уменьшают размеры области содержимого на соответствующие значения.
Div {
background: #6A7690;
position: absolute;
top: 0;
bottom: 0;
left: 50%;
right: 0;
} /*в данном случае высота элемента 100%, ширина 50% от родительского блока*/
Рис. 2. Высота и ширина абсолютно позиционированного элемента
4. Отступы элемента
С помощью свойства padding можно установить отступы одновременно для нескольких сторон элемента в следующем порядке: . Если элемент имеет фон, он будет распространяться на отступы в том числе. Отрицательные значения не допускаются. Свойство не наследуется.
Если заданы три значения, например, div {padding: 10px 20px 30px;} , то они распределятся в следующем порядке: первое значение — верхний отступ, второе — правый и левый отступ, третье — нижний отступ.
Если заданы два значения, например, div {padding: 10px 20px;} , то первое задаст верхний и нижний отступ, второе — правый и левый.
Одно значение, например, div {padding: 10px;} , установит одинаковый отступ для всех сторон элемента.
Синтаксис
P {padding: 5px 10px 15px 10px;}
4.1. Отступы с одной стороны элемента
Чтобы задать отступ только с одной стороны элемента, нужно воспользоваться одним из свойств padding-top , padding-right , padding-bottom , padding-left , например:
P {padding-left: 10px;}
5. Поля элемента
Большинство элементов отделены друг от друга полями. Свойство margin — это краткая форма записи полей элемента в следующем порядке: верхнее, правое, нижнее, левое . Используется в случае, когда нужно задать поля с нескольких сторон, но не обязательно с четырех. Смежные по вертикали поля блочных элементов схлопываются, а верхние и нижние поля не оказывают никакого эффекта на строчные элементы. Отрицательные значения допускаются. Свойство не наследуется.
Если заданы три значения, например, div {margin: 10px 20px 30px;} , то они распределятся в следующем порядке: первое значение — верхнее поле, второе — правое и левое поле, третье — нижнее поле.
Если заданы два значения, например, div {margin: 10px 20px;} , то первое задаст верхнее и нижнее поле, второе — правое и левое.
Одно значение, например, div {margin: 10px;} , установит одинаковые поля для всех сторон элемента.
{margin: 0 auto;} сработает только в том случае, если ширина элемента задана явно.
Рис. 3. margin: auto; для абсолютно позиционированного элемента
Синтаксис
Div {margin: 5px 10px 2px 5px;}
5.1. Поля с одной стороны элемента
Свойства margin-top , margin-right , margin-bottom , margin-left управляют соответствующими полями с каждой стороны элемента, например:
P {margin-left: 10px;}
6. Ограничение ширины и высоты
CSS также поддерживает еще несколько свойств, связанных с установкой высоты и ширины элементов вeб-стpaниц: min-height , min-width , max-height и max-width . Эти свойства позволяют устанавливать минимальное и максимальное значения ширины или высоты элемента, давая элементу возможность заполнить доступное пространство. Свойства часто используются для адаптивного дизайна веб-страниц. Применяется для всех элементов, кроме строчных и элементов таблиц. Всегда идут после основного правила, т.е. после задания элементу height или width . Не наследуется.
Можно задавать обычные размеры при помощи одних единиц измерения, а ограничения размеров при помощи других единиц, например:
Div { width: 400px; max-width: 50%; }
Элемент будет иметь ширину 400px , только если это значение не будет превышать 50% ширины блока-контейнера, в противном случае его ширина будет уменьшена.
Описание
Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится
тег
). Высота не включает толщину границ вокруг
элемента, значение отступов и полей.
Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте overflow : auto к стилю элемента.
Синтаксис
height: значение | проценты | auto | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи высота элемента вычисляется в зависимости от высоты родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. auto устанавливает высоту исходя из содержимого элемента
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства height
Объектная модель
document.getElementById("elementID ").style.height
Браузеры
Браузер Internet Explorer 6 некорректно определяет height как min-height .
В режиме совместимости (quirk mode) Internet Explorer до версии 8.0 включительно неправильно вычисляет высоту элемента, не добавляя к ней значение отступов, полей и границ.
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
По умолчанию для блочных элементов используется автоширина. Это означает, что элемент будет растянут по горизонтали ровно на столько, сколько есть свободного места. Высота блочных элементов по умолчанию устанавливается автоматически, т.е. браузер растягивает область содержимого в вертикальном направлении так, чтобы отобразилось все содержимое. Чтобы установить собственные размеры для области содержимого элемента, вы можете использовать свойства width и height .
CSS свойство width позволяет задать ширину области содержимого элемента, а свойство height высоту области содержимого:
Обратите внимание, что свойства width и height определяют размер только области содержимого, чтобы вычислить общую ширину блочного элемента, нужно сложить ширину области содержимого, левого и правого внутренних отступов и ширину левой и правой рамки. То же самое касается и общей высоты элемента, только все значения вычисляются по вертикали:
Для данного абзаца зададим только ширину и высоту.
Этот абзац содержит, кроме ширины и высоты, внутренний отступ, рамку и внешний отступ.
Попробовать »В примере хорошо видно, что второй элемент занимает больше пространства, чем первый. Если посчитать по нашей формуле, то размеры первого абзаца - 150x100 пикселей, а размеры второго абзаца:
| Общая высота: | 5px | + | 10px | + | 100px | + | 10px | + | 5px | = 130px |
| верхняя рамка | верхний отступ | высота | нижний отступ | нижняя рамка |
то есть 180x130 пикселей.
Переполнение элементов
После того как вы определили для элемента ширину и высоту, стоит обратить внимание на один немаловажный момент - содержимое, расположенное внутри элемента, может превысить указанный размер блока. В этом случае часть содержимого будет выходить за границы элемента, чтобы избежать этого неприятного момента, можно воспользоваться CSS свойством overflow . Свойство overflow сообщает браузеру, как нужно поступить в том случае, если содержимое блока превышает его размер. Это свойство может принимать одно из четырех значений:
- visible - значение, используемое браузером по умолчанию. Указание этого значения будет иметь тот же эффект, что и отсутствие установки свойства overflow.
- scroll - добавляет к элементу полосы прокрутки по вертикали и горизонтали.
- auto - добавляет полосы прокрутки при необходимости.
- hidden - скрывает часть содержимого, которое выходит за границы блочного элемента.
В этой статье разберём, как в CSS можно установить блоку высоту в процентном отношении от его ширины. Применение этой технологии рассмотрим на примере создания карусели (слайдера) Bootstrap из изображений, имеющих различные размеры.
Создание блока с высотой, которая имеет определённый процент от его ширины
- Создать HTML структуру из 2 блоков:
Первый блок имеет 2 класса. С помощью класса item-responsive установим блоку относительное позиционирование. Это необходимо выполнить для того, чтобы 2 блок (который будет иметь абсолютное позиционирование) располагался относительно него. Кроме этого данный класс также используется для того, чтобы перед содержимым соответствующих элементов (item-responsive) добавить псевдоэлемент:before . Этот элемент будет устанавливать необходимую высоту блока относительно его ширины с помощью CSS-свойства padding-top . Трюк данного метода заключается в том, что если свойству padding указывать значение не в пикселях, а в процентах, то оно будет рассчитываться браузером относительно его ширины . Таким образом, можно получить блок с необходимой высотой. Следующее действие - это указать 2 блоку абсолютное позиционирование и выровнять его по первому блоку.
- Добавить на страницу следующий CSS код: .item-responsive { position: relative; /* относительное позиционирование */ } .item-responsive:before { display: block; /* отображать элемент как блок */ content: ""; /* содержимое псевдоэлемента */ width: 100%; /* ширина элемента */ } .item-16by9 { padding-top: 56,25%; /* (9:16)*100% */ } .item-responsive>.content { position: absolute; /* абсолютное положение элемент */ /* положение элемента */ top: 0; left: 0; right: 0; bottom: 0; } /* При необходимости (для блоков, имеющих данные классы) */ .item-4by3 { padding-top: 75%; /* (3:4)*100% */ } .item-2by1 { padding-top: 50%; /* (1:2)*100% */ } .item-1by1 { padding-top: 100%; /* (1:1)*100% */ }
Применение вышеприведённой технологии при создании карусели Bootstrap
Если вы не знакомы с Bootstrap и хотите узнать что это такое, то можете воспользоваться статьёй Введение в Bootstrap .
Рассмотрим пример, в котором вышеприведённую HTML структуру и CSS код будем использовать для отображения слайдов карусели Bootstrap .
В качестве изображений будем использовать следующие файлы:
- carousel_1.jpg (ширина = 736px, высота = 552px, соотношение сторон (высота к ширине) = 1,33);
- carousel_2.jpg (ширина = 1155px, высота = 1280px, соотношение сторон (высота к ширине) = 0,9);
- carousel_3.jpg (ширина = 1846px, высота = 1028px, соотношение сторон (высота к ширине) = 1,8);
- carousel_4.jpg (ширина = 1140px, высота = 550px, соотношение сторон (высота к ширине) = 2,07);
- carousel_5.jpg (ширина = 800px, высота = 600px, соотношение сторон (высота к ширине) = 1,33);
Изображения будем задавать как фон. Это позволит использовать в карусели Bootstrap 3 изображения с не одинаковыми соотношениями сторон.
HTML разметка карусели:
CSS код карусели:
Item-responsive { position: relative; /* относительное позиционирование */ } .item-responsive:before { display: block; /* отображать элемент как блок */ content: ""; /* содержимое псевдоэлемента */ width: 100%; /* ширина элемента */ } .item-16by9 { padding-top: 56.25%; /* (9:16)*100% */ } .item-responsive>.content { position: absolute; /* абсолютное положение элемент */ /* положение элемента */ top: 0; left: 0; right: 0; bottom: 0; background-size: cover !important; }
Большинству элементов в HTML, как правило, присваивается определённая высота и ширина. Задать данные параметры в CSS достаточно легко, а как результат - практично. Используются для этого уже известные Вам свойства height и width. Однако, в данном уроке мы ещё поговорим о не фиксированной ширине и высоте или резиновой, то есть в зависимости от ширины самого окна. Приступим)
width
Это свойство устанавливает определённую ширину HTML элемента. Значение может быть указано в пикселях, процентах (другие величины используются реже).MyBlock {
width: 400px; /* ширина 400 пикселей */
}
Или же в процентах:
MyBlockPercent50 {
width: 50%; /* ширина 50% от ширины блока или окна (если не внутри блока с фиксированной шириной) */
color: #f1f1f1; /* светло-серый блок */
}
Соответственно получаем блок, который всегда будет по ширине составлять половину от родительского.
Теперь о самом интересном. У width есть такие параметры, которые указывают максимальную или минимальную ширину. Это свойства min-width и max-width соответственно. Указывать для них значения можно также и в пикселях, и в процентах, и в других величинах. Данные свойства - это основа для создания резинового и адаптивного дизайнов ().
Пример адаптивного дизайна . Посмотри, изменяя размеры окна бразура:
Это я, конечно, забежал вперёд. Но вы должны понимать что и зачем нужно. Да и потрогать приятный результат)
Как Вы уже поняли, с помощью этих свойств можно более гибко обращаться с элементами на странице, не искажая содержимого. Как это работает? Рассмотрим код.
Block {
max-width: 800px;
background-color: #f1f1f1; /* светло-серый блок */
padding: 20px;
}
Блок с данными свойствами при ширине родителя в 200 пикселей будет принимать соответствующее значение, но если родительский блок будет больше, например, 1000 пикселей, то он уже примет свою максимальную ширину, то есть 800 пикселей. То есть он будет увеличиваться пока ширина родительского блока не будет 801 пиксель и больше. Далее блок block всегда будет иметь свою максимально разрешённую ширину в 800 пикселей.
height
Это свойство отвечает за высоту элемента. В качестве величины используются всё те же пригодные для CSS. Чаще всего те же проценты и пиксели.Info {
height: 200px; /* высота блока будет 200 пикселей */
padding: 10px; /* повторяем про отступы внутри блока =) */
}
Что логично, у высоты можно указывать минимальные и максимальные значения высоты для элемента свойствами min-height и max-height соответственно.
Info {
max-height: 360px; /* максимальная высота блока */
min-height: 120px; /* минимальная высота блока */
}
Как видите, свойства можно, а зачастую и нужно использовать в паре.
Или комбинировать величины:
Content {
height: 100%; /* высота всегда будет 100% */
width: 760px; /* а вот ширина фиксированная 760 пикселей */
}
Если остались вопросы, пишите в комментариях!
Спасибо за внимание! Успехов в вёрстке!)
