Ширина блока складывается из значений свойств width, padding, border и margin.

Стр 1 из 3Следующая ⇒

Урок 6

Блочные и строчные элементы

В HTML4 практически все элементы относятся к двум типам, различающихся своим поведением и свойствами — это блочные и строчные элементы. Блочные элементы (такие как <p>, <ol>, <div>) начинаются с новой строки и занимают всё доступное им пространство по ширине, независимо от содержимого, строчные (такие как <a>, <var>, <span>) являются частью строки и размеры элементов определяются их содержимым.

HTML5 отказался от разделения элементов на блочные и строчные, поскольку во многих случаях это порождает лишь путаницу и неверное использование элементов, к примеру, часто возникают ошибки с вложением одних элементов в другие.

Тем не менее, само деление никуда не делось, оно осуществляется через CSS и теперь, когда мы говорим, что элемент является блочным, это подразумевает его стилевое оформление. Само превращение элемента через стили в блочный или строчный активно применяется в вёрстке веб-страниц:

для компоновки элементов;
для изменения поведения и характеристик элементов;
для управления видом элементов.

Блочным называется элемент, который занимает всю доступную ширину и всегда начинается с новой строки. У элементов с таким поведением в стилях свойство display задано как block, list-item, table и в некоторых случаях run-in.

В HTML есть ряд элементов, у которых эти значения display установлены по умолчанию, поэтому они уже наделены свойствами блочных элементов. Вчастности, это<h1>…<h6>, <p>, <ul>,<div>идр.

Особенности блочных элементов

Для блочных элементов характерны следующие особенности.

По ширине блочные элементы занимают всё допустимое пространство.

Если элемент располагается непосредственно внутри <body>, то он будет занимать всю ширину веб-страницы. Если один элемент находится внутри другого, то он будет занимать всю ширину своего родителя. В примере 1 показано, как это получается.

На рис. 1 показан результат действия примера. Элемент <div> занимает всю ширину веб-страницы, а заголовок <h2> и абзац <p> внутри <div> занимают всю доступную ширину блока.

Рис. 1. Ширина блоков

Ширина блока складывается из значений свойств width, padding, border и margin.

В примере 1 намеренно не указано свойство width, которое определяет ширину содержимого блока. Как только мы добавляем width, то блок уже не будет занимать всё доступное пространство по ширине. При этом ширина самого блока определяется сложением значений margin-left, border-left, padding-left, width, padding-right, border-right, margin-right. Иными словами, ширина содержимого плюс значения свойств padding, border и marginслева и справа (пример 2).

В данном примере добавлено свойство width со значением 400px. В итоге, ширина самого блока будет 440 пикселей, поскольку из всего набора свойств у нас есть только width и padding (рис. 2). Не забываем, что к widthнадо добавлять левый и правый padding.

Всё это кажется довольно сложным, так что следует помнить, что width — это не ширина блока, а лишь ширина содержимого, а сам блок состоит из его содержимого, отступов, границ и полей. Для упрощения применяется свойство box-sizing, которое меняет алгоритм расчёта ширины. При значении border-box свойство widthопределяет уже ширину блока, включая padding и border, но не margin (пример 3).

div {background: #F5E8D0; /* Цветфона */box-sizing: border-box; /* Алгоритмрасчёташирины */width: 400px; /* Ширинаблока */border: 1px solid #333; /* Рамка */padding: 20px; /* Поля */}

Теперь width устанавливает не ширину содержимого, а ширину блока целиком и она равна 400px (рис. 3).

12 3 Следующая ⇒

Последнее изменение этой страницы: 2018-05-10; просмотров: 196.

stydopedya.ru не претендует на авторское право материалов, которые вылажены, но предоставляет бесплатный доступ к ним. В случае нарушения авторского права или персональных данных напишите сюда...