Блочные элементы могут размещаться непосредственно внутри элемента
. Они создают разрыв строки перед элементом и после него, образуя прямоугольную область, по ширине занимающую всю ширину веб-страницы или блока-родителя (если для элемента не задано значение width).
Свойства width и height устанавливают ширину и высоту области содержимого элемента. Фактическая ширина элемента складывается из ширины полей (внутренних отступов) padding , границ border и внешних отступов margin .
Блочные элементы могут содержать как строчные, так и блочные элементы, но не оба типа элементов сразу. При необходимости, строки текста, принадлежащие блочному контейнеру, могут быть обёрнуты анонимными контейнерами, которые будут вести себя внутри блока как элементы со значением display: block; , а строчные элементы обёрнуты элементом
Блочные элементы могут содержаться только в пределах блочных элементов.
Элемент
Относится к блочным элементам, но он не может содержать внутри себя другой элемент
А также любой другой блочный элемент.
Анонимные боксы уровня блока
Как говорилось выше, блочные элементы могут содержать только блочные или только строчные элементы. В случае смешанного контента, когда блочный элемент одновременно содержит текстовое содержимое и другой блочный элемент, алгоритм визуального форматирования добавляет дополнительную обёртку для текстового содержимого — так называемый анонимный бокс. Поскольку такой контейнер не имеет названия, то к нему нельзя применить CSS-стили для оформления. Анонимные боксы наследуют свойства окружающего блока, а не наследуемые свойства принимают первоначальное значение.
Рис. 2. Анонимные боксы уровня блока
4. Строчные элементы и строчные контейнеры
Встроенные (строчные) элементы
генерируют внутристрочные контейнеры. Они не формируют новые блоки контента. Значения свойства display , такие как inline и inline-table делают элементы строчными.
, ,
, , ,
, ,
, ,
,
,
Строчные элементы являются потомками блочных элементов. Они игнорируют верхние и нижние margin и padding , но если для элемента задан фон, он будет распространяться на верхний и нижний padding , заходя на соседние строки текста.
Ширина и высота строчного элемента зависит только от его содержимого, задать размеры с помощью CSS нельзя. Можно увеличить расстояние между соседними элементами по горизонтали с помощью горизонтальных полей и отступов.
Для того чтобы верхние и нижние поля и отступы работали для строчного элемента, нужно использовать конструкцию {display: inline-block} . Элемент останется встроенным, но к нему можно будет полноценно применить поля, отступы, задать ширину и высоту.
Рис. 3. Отличие воздействия CSS-свойств padding и margin на строчные и строчно-блочные элементы
Строчные элементы могут содержать только данные и другие строчные элементы. Исключение составляет элемент , который согласно спецификации HTML5 может оборачивать целые абзацы, списки, таблицы, заголовки и целые разделы при условии, что они не содержат другие интерактивные элементы — другие ссылки и кнопки.
Анонимные строчные боксы
Любой текст, содержащийся непосредственно внутри блочного элемента и не внутри строчного элемента, рассматривается как анонимный строчный элемент. Также как и анонимные блочные боксы они наследуют свойства родительского блока, а не наследуемые свойства принимают первоначальное значение.
Рис. 4. Анонимный строчный бокс
5. Строчно-блочные элементы
Существует еще одна группа элементов, которые браузер обрабатывает как строчно-блочные {display: inline-block;} . Такие элементы являются встроенным, но для них можно задавать поля, отступы, ширину и высоту.
,
,
,
,
,
,
,
,
,
,
6. Как сделать строчный элемент блочным, а блочный — строчным
В некоторых случаях бывает необходимо, чтобы строчный элемент вел себя как блочный и наоборот. Для этого необходимо установить соответствующее значение свойства display , например:
A {
display: block;
}/*превращаем строчный элемент в блочный, благодаря чему весь блок, а не только текст ссылки, становится ссылкой*/
div {
display: inline;
} /*превращаем блочный элемент в строчный*/
В результате меняется только способ представления элемента браузером, при этом сам элемент свой тип не меняет.
7. Схлопывание вертикальных отступов
Соприкасающиеся вертикальные отступы margin объединяются. При этом ширина общего отступа равна ширине большего из исходных отступов.
Рис. 5. Два блока до и после слияния отступов
Слияние выполняется только для блочных элементов в нормальном потоке документа. Внешние вертикальные отступы строчных, плавающих и абсолютно позиционированных элементов не сливаются.
Чтобы получить желаемый промежуток, можно задать, например, для верхнего элемента padding-bottom , а для нижнего элемента — margin-top .
Если среди схлопывающихся отступов есть отрицательные значения, то браузер добавит отрицательное значение к положительному, а полученный результат и будет расстоянием между элементами.
8. Отрицательные отступы
Отрицательные отступы можно использовать, чтобы убрать пустые области между элементами. Например, необходимо расположить в ряд несколько элементов меню с заданными размерами. Для этого нужно задать для li {display: inline-block;} .
Если нужно, чтобы элементы меню прилегали друг к другу, используем отрицательный margin:
Li {
margin-right: -4px;
}
li {
border-top: 1px solid #888888; /*Убираем двойные рамки между соседними элементами*/
border-bottom: 1px solid #888888;
border-left: 1px solid #888888;
}
li:last-child {
border-right: 1px solid #888888;
}
9. Выпадание вертикальных отступов
Если внутри одного блока расположить другой блок и задать ему margin-top , то внутренний блок прижмется к верхнему краю родительского, а у родительского элемента появится отступ сверху, т.е. внутренний блок «выпадет» из родительского блока. Если у родительского элемента также был задан верхний отступ, то выберется наибольшее из значений.
Чтобы избавиться от эффекта выпадания, можно задать родительскому элементу padding-top или добавить border-top: 1px solid transparent .
В первой статье про html я приводил список тэгов, которые, по моему мнению нужно знать верстальщику. Остальные тэги, по сути, являются избыточными или даже лишними, по моему мнению. В этой статье я хотел бы рассказать об основах html и о тэгах html, head, title, body, а так же о div и span. Эти теги, по моему мнению - хорошая основа для начала изучения html.
К сожалению, современные браузеры очень лояльно относятся к веб-верстальщикам. Они пытаются интерпретировать все, что им скармливают. Незакрытые тэги, тэги в разных регистрах, непонятные тэги, теги, стоящие там, где их быть не должно и т.д. Например, лично видел сайт, где контейнер head располагался внутри body, а тег title был даже вне контейнера head. При этом, внешне сайт выглядел нормально!
Я очень надеюсь, что когда-нибудь стандарты станут жесткими, и неправильно сверстанные страницы не будут отображаться верно. Правда, для этого нужно, чтобы все браузеры обрабатывали html и CSS одинаково… Ну да меня занесло.
Как обычно в таких случаях, сначала накидаем план занятия:
Общие правила
Структура документа
Общие правила Для начала, стоит сказать, что html — довольно лояльный язык. Существует версия html, стандарт которой ужесточен, — xhtml. Я стараюсь придерживаться этого стандарта. В частности, этот стандарт предполагает, что все теги написаны в нижнем регистре и закрыты. Даже одиночные. Как — будет показано ниже. Все атрибуты написаны в нижнем регистре, а их значения заключены в двойные кавычки и имеют обозначение величины, в которой измеряется их значение. Будем придерживаться этих правил.
Стандартами предусмотрено определенное расположение некоторых элементов. Если элемент, который должен располагаться где-то, располагается в другом месте — это считается ошибкой. Вообще-то, такой документ не должен обрабатываться или должен обрабатываться с ошибкой. Но браузеры щадят нерадивых разработчиков. Точнее, своих пользователей, которые смотрят сайты, разработанные нерадивыми разработчиками.
Теперь о тегах. Теги бывают парные и одиночные. Парные теги делятся, так же, на блочные и внутристрочные. Пару тегов иногда называют контейнером.
Как можно догадаться, парные теги имеют пару, а одиночные стоят поодиночке. Пара тегов образуется из открывающего и закрывающего тега. Одиночные теги являются и открывающими и закрывающими одновременно.
Пример контейнера (парные теги):
содержимое контейнера
Пример одиночного тега
текст одной строки этот текст уже на другой строке
В примере контейнера использовалась конструкция
Это комментарий. Все, что заключено внутрь двух стрелочек не анализируется браузером и не выводится на экран. Эти комментарии иногда очень удобно использовать при верстке запутанных моментов, или для отделения логических частей макета в коде.
Блочные и внутристрочные теги Различие между блочными и внутристрочными (inline) тегами состоит в том, что блочный элемент стремится занять весь экран по ширине (если не явно не указана его ширина)
, а внутристрочный занимает ровно столько места, сколько занимает его содержимое. Кроме того, все, что следует за блочным элементом, будет отображаться с новой строки, а то, что за внутристрочным — прямо за ним. Контейнер div является по-умолчанию, блочным, а тег span - внутристрочным. (правда, это поведение легко изменить при помощи CSS). Проиллюстрируем поведение этих тегов.
Текст1. Этот текст занимает всю ширину страницы.
Этот текст идет уже ПОД первым текстом и весь тоже занимает всю страницу целиком. Но красненький текст , заключенный в тег span, не переносит следующий за ним текст на новую строку и занимает ровно столько места, сколько нужно.
Теги должны следовать логически друг за другом, соблюдая иерархичность. При включении одного тега в другой, нужно следить, чтобы соблюдался порядок закрывающих тегов.
Неправильно:
текст
Правильно:текст
Есть еще одна вещь, о которой хочу сказать: у тегов могут быть атрибуты. Атрибут задает определенное поведение или как-то дополняет тег. Атрибут пишется прямо в теге, через пробел от его названия, в формате: ИМЯ_АТРИБУТА="ЗНАЧЕНИЕ[мера]". ИМЯ_АТРИБУТА и ЗНАЧЕНИЕ, думаю, понятно что такое. А мера — это обозначение единиц измерения. Если единицы измерения нет, то и выдумывать ее не надо.
Пример применения атрибута
Здесь мы задаем атрибут высоты для контейнера div (вообще-то, это лучше делать при помощи CSS, но в данном случае, я написал это, чтобы показать как это вообще может выглядеть)
. Атрибуты могут быть назначены только в открывающих тегах. Количество пробелов не имеет значения. Можно ставить пробелы между названием тега и атрибутом, между названием атрибута и знаком равенства, между знаком равенства и кавычкой. Можно ставить пробелы в кавычках, но только не между величиной и единицами ее измерения! Кавычки не обязательно должны быть двойными, можно применять "одинарные кавычки", но только в паре. Вариант "кавычки" не прокатит. В этом случае, одинарная кавычка, как и все, что следует после, будут интерпретированы как часть значения атрибута.
Вроде, это все, что я хотел сказать, в общем. Так что, к делу!
Структура документа То, что будет описано ниже, как раз относится к разряду обязательного к соблюдению. Так что не стоит думать, что если "и так отображается", то это нормально. Это НЕ нормально.
Каждый документ должен быть заключен в теги Эти теги, как видно, парные. Так что не забывайте открывать такой тег в начале документа и закрывать в конце. По идее, все, что идет за закрвающим тегом уже не должно анализироваться брауезром. Но оно анализируется и даже отображается. Но не советую использовать это. Что примечательно, до открывающего тега может идти другое содержимое. Но в этой статье я не буду об этом говорить. Кто хочет, может
поискать про DOCTYPE.
Все остальное содержимое документа должно содержаться в контейнере html. Документ делится на две части. Одна несет управляющую функцию и дополнительную информацию для браузера. А другая — информацию для пользователя. Управляющая часть называется
, а содержательная — . Причем контейнер head должен стоят всегда перед body. Эти два контейнера не должны включать друг друга.
Каждый документ должен иметь название. Название документа является очень важным элементом страницы. Оно выводится в названии окна браузера, ему придают огромное значение поисковики. Название страницы можно задать с помощью контейнера
Название страницы . Этот контейнер должен обязательно располагаться в контейнере . Добавлю, что чем выше (по строкам) находится title, тем лучше страничка индексируется поисковиками.
Таким образом, простейший html-документ выглядит примерно так:
Название документа
Здесь тело документа
Можете скопировать этот текст в блокнот (или похожий текстовый редактор), сохранить этот файл с расширением.html и перетащить в окно своего браузера. Вы увидите, что текст, содержащийся в контейнере title, отобразился в заголовке страницы, а текст из body отобразился в пользовательской части.
Закончим рассмотрение основных тегов документа и возьмемся за теги представления содержимого.
Теги для логического разделения содержимого Для начала скажу, что теги, которые я рассмотрю ниже, могут находиться только в теге body.
Этот контейнер предназначен для того, чтобы объединять некий текст в логический блок, отделенный от остального содержимого страницы. Если вы возьмете текст нашего простейшего документа и заключите текст из тела документа в этот контейнер, то никаких внешних изменений не заметите. Однако, они, все же, есть. Для текста, заключенного в контейнер div, можно задать одно стилевое оформление. Этот блок можно сделать определенной ширины, задать для него другой шрифт, сделать выравнивание по правому краю или что угодно еще. Вот пример использования тега div (для краткости, не буду приводить весь текст документа целиком. Но вы должны помнить, что нижестоящую конструкцию вы должны вставить в контейнер body для того, чтобы увидеть ее работу.):
Небольшой текст, который я хочу, чтобы отображался в правой части страницы и был оформлен немного иначе, нежели основной текст страницы.
Основной текст страницы. Наверное, он не должен быть длинным, ведь это всего-лишь тест.
Не стоит пугаться незнакомого атрибута style и непонятных слов в нем (таких ли уж непонятных?). Просто контейнер div лучше было показать вместе с этим атрибутом. Чаще всего, в правильной верстке, для контейнеров используются атрибуты id и class, которые служат для связи тега с CSS или идентификации его для JavaScript. Но это уже забегание вперед;)
Контейнер div является блочным элементом. Но это поведение легко изменить.
Контейнер span предназначен для выделения некоторой части текста. Его использование так же, заметно только после придания тегу особых свойств. Часто, нужного эффекта добиваются при помощи CSS. Простой пример применения тега span мы видели, когда изучали разницу между блочными и внутристрочными элементами, поэтому не будем на нем останавливаться.
Итог В этой статье мы познакомились с общими правилами html, узнали о минимальной структуре документа html, о парных и непарных тегах, и о блочных и внутристрочных контейнерах. Мы увидели разницу между контейнерами разного типа, а так же, познакомились с логическими контейнерами div и span.
Если вам понравился данный мини-курс, или он вызвал вопросы или пожелания, если вы хотите поспорить о чем-то - я был бы рад вашему отзыву в комментариях или по почте.
Блочные и строчные элементы отлично дополняют друг друга при вёрстке, занимая каждый свою определённую нишу. Но возникают случаи, когда характеристик этих элементов явно недостаточно. Галерея фотографий, представленная на рис. 3.28 состоит из секций, в которые входит изображение с подписью к нему, при этом секции выстраиваются по горизонтали, занимая всю доступную ширину. При уменьшении окна браузера секции переходят на другую строку.
Рис. 3.28. Галерея фотографий
Если для формирования секций использовать тег