Блочный элемент
Данный элемент отображается в виде прямоугольника.К блочным элементам относятся контейнеры <div> <h1> и <p>.
Разрешается вкладывать один блочный элемент внутрь другого,а также размещать внутри них встроенные элементы(<span>).Запрещено добавлять внутрь встроенных элементов блочные.
Ширина
В спецификации CSS указано,что ширина складывается из суммы:
—ширина блока(width)
—отступов(margin)
—полей(padding)
—границ(border)
Пример
|
div{ width:200px;/*ширина слоя*/ margin:5px;/*значение отступов*/ padding:5px;/*поля вокруг текста*/ border:2px solid black/*параметры границы*/ background:green;/*цвет фона*/ } |
|---|
Пример Пример Пример |
|---|
Высота
Браузер Internet Explorer(также Opera) за высоту слоя принимает значение параметра height,а Firefox добавляет к нуму margin,padding и border.
Встроенные элементы
Встроенными называются элементы ,которые являются непосредственной частью другого элемента.К встроенным элементам относятся теги <span>,<a>,<code> и др.В основном они используются для изменения вида текста или его логического выделения.
Встроенные элементы можно превращать в блочные с помощью свойства displayи его значения block(display:block;).Также возможно обратное (display:inline;).
Выравнивание слоя по центру
Отличие веб-страниц от листа бумаги заключается в их размерах.Если лист имеет фиксированную ширину и высоту,то веб-документ отображается в окне браузера и может изменять свои размеры в зависимости от настроек операционной системы,типа монитора,установленного разрешения и т.д.
При использовании слоев имеется несколько способов выравнивания
—с помощью отступов
—через позиционирование
—используя параметр align тега <div>
Отступы
Если добавить отступ слева(margin-left),то слой сместится вправо.Если ширина слоя 40%,то для того,чтобы слой располагался в центре высчитываем значение margin-left:
(100%-40%):2=30%
Можно не указывать ширину,а задать одинаковые отступы слева и справа.
Также можно задать отступы слева и справа для слоя равным auto
margin:0 auto
0—нулевой отступ сверху и снизу
auto—выравнивание по горизонтали
Абсолютное позиционирование слоя
Координаты слоя вычисляются относительно левого верхнего угла браузера или родительского элемента.Положение определятся с помощью стилевого атрибута z-index.
Вначале задаем ширину и высоту слоя (width и height).Далее задаем абсолютное позиционирование через аргумент position:absolute.
Положение следует определить на 50% по горизонтали и вертикали(left и top).
Для точного выравнивания следует добавить параметры margin-left и margin-top с отрицательными значениями.Их величина должна быть равна половине ширины слоя.Чтобы высота слоя не менялась из-за его контента,должен быть включен параметр overflow:auto(добавляет полосы прокрутки).
position:absolute;
width:300px;
height:200px;
left:50%;
top:50%;
margin-left:—150px;
margin-top:100px;
overflow:auto;
Параметр align
<div align="center"></div>
