Пример красивых контейнеров css html. DiV верстка — Создаем блоки для двухколоночного макета в HTML, определяем их размеры и задаем позиционирование в CSS. Блочные и строчные контейнеры
Здравствуйте, уважаемые читатели блога сайт. В , я попытался начать рассказывать о ее принципах, но, к сожалению, пришлось сильно отвлечься на объяснение базовых понятий вебмастеринга.
Очень мне не хотелось обходить вниманием эти основополагающие вещи, и очень извиняюсь перед теми, кто все это уже знал, а хотел услышать именно разговор о и не услышал.
В этой статье постараюсь наверстать и исправиться. Надеюсь, что сильно отклоняться от основной темы не придется. Ну вот, с извинениями и покаяниями будем считать, что покончено, и пора, наконец, переходить непосредственно к делу.
Создаем макет сайта в 2 колонки на основе DIV верстки
Итак, в предыдущей статье мы создали на своем хостинге (хотя для этих целей вполне см. обзор его возможностей) папку TEST, в которую положили два основных файла нашего будущего макета: Index.html и Style.css. Собственно, они и будут составлять наш простейший вариант каркаса.
Опять, наверное, придется немного отвлечься от непосредственной верстки, т.к. не всем может быть понятно, как создать папку TEST в корневом каталоге, расположенного на реальном хостинге. А так же, что это такое — корень сайта и где его искать при доступе по ФТП. А ведь действительно, вопрос не тривиальный для пользователя, впервые столкнувшегося с хостингом.
Так вот, вам нужно будет сначала подключиться по протоколу FTP. Данные для подключения по FTP вам должен был сообщить вам хостинг провайдер (читайте вообще, а ).
После того, как вы подключитесь по FTP (я пользуюсь для этой цели программой FileZilla — про нее вся правда написана, и именно на ее примере буду все рассказывать), то в правом окне данной программы вы увидите содержимое каталога, который выделил хостер под ваши сайты, скрипты и тому подобные вещи.
Но этот каталог не будет являться корневой папкой. В корне должен лежать файл Index.php, а так же и все остальные файлы и папки используемого вами движка.
Для этой цели используется отдельная директория, правда, ее название, в зависимости от конкретного хостинга, может отличаться. Структура внутренних папок в основном каталоге (открывающемся при подключении к сайту по FTP) так же может отличаться, но суть остается прежней.
Например, можете увидеть следующую картину:
Файлы движка вы должны копировать не в эту самую верхнюю директорию, доступную вам по FTP, а в так называемую, корневую папку. Как узнать, какая из присутствующих там директорий является корневой?
Ну, на крайний случай можно спросить у самого владельца хостинга. А что, они обязаны помогать вам в таких вопросах. Но вообще-то, она чаще всего будет называться либо PUBLIC_HTML, либо HTDOCS .
Если вы таких директорий не обнаружили, то нужно задавать вопрос владельцу хостинга, а если что-то подобное есть в наличии, то это и есть пресловутый корень и именно в нем вы должны будете создать нашу многострадальную папку TEST, ради которой я написал, а вы, надеюсь, прочитали эти несколько абзацев.
Как создать каталог с помощью программы FileZilla? Да, очень просто. Вам достаточно будет открыть в правой части программы коневую директорию и щелкнуть по пустому месту правой кнопкой мыши, а из контекстного меню выбрать пункт «Создать каталог».
Уф, создали папку TEST в коревом каталоге сайта. И на том спасибо. В общем-то, можно было с этим и не заморачиваться. Как так? А вот так. Директорию TEST можно было бы создать и в какой-нибудь внутренней папке вебсайта, но проще все же будет в корне.
Для локального сервера Денвер вам нужно будет создать директорию TEST в следующем каталоге:
C:\server\home\localhost\www\
Вместо диска «С» нужно указать диск на вашем компьютере, где установлен локальный сервер. Тогда, для просмотра создаваемого нами на основе Div верстки макета в 2 колонки, нужно набрать следующий путь в адресной строке браузера:
Http://localhost/test/
Блин, если все так подробно рассказывать, то получится небольшая книга по блочной верстке, причем, бОльшая ее часть будет посвящена основам вебмастеринга, но я уже по другому писать не могу, привык разбирать все нюансы по полочкам. Не взыщите, достаточно подкованные вебмастера, которым все это уже далеко не в новинку.
Продолжим разговор о макете . В файле Index.html мы будем задавать сами DIV-контейнеры, на которых и будет строиться наш каркас, а в файле Style.css — описывать положение и внешний вид этих DIV-контейнеров. Это в двух словах, а как оно будет на деле, вы увидите немного погодя.
Для того, чтобы наблюдать в браузере результаты наших трудов, мы будем периодически обращаться из адресной строки браузера к папке TEST, расположенной на вашем хостинге или же на локальном сервере. В случае реального хоста, в адресной строке браузера вам нужно будет набрать что-то вроде этого:
Https://сайт/test
Но тут есть два «но». Во-первых, вместо https://сайт/ вам нужно ввести свой Урл, а во-вторых, обратите внимание на регистр латинских букв, которые составляют название вашей директории TEST.
Если вы написали название папки заглавными буквами, то и в адресной строке нужно набирать название папки заглавными (я написал здесь TEST в верхнем регистре, только лишь с целью его выделения на фоне остального текста).
Дело в том, что на реальном хостинге в большинстве случаев сервера работают под управлением UNIX подобной операционной системы, в которой заглавные и строчные буквы различаются (в отличии, от Windows, работать с которой мы привыкли).
Начинаем верстать макет сайта в 2 колонки на дивах
Как я уже упоминал, для начала мы попробуем создать макет в две колонки, который схематично можно представить так:
Все элементы поместим в один большой Div-контейнер для того, чтобы можно менять размеры и выравнивание всего макета через свойства этого контейнера. Внутри основного Div будут находиться контейнеры, отвечающие за формирование отдельных блоков (шапки, левой колонки, области для контента, футера).
Мы зададим им размеры и настроим позиционирование на странице с помощью CSS. Итак, приступим.
Начнем с Index.html. Откройте его на редактирование в удобном для вас редакторе (я пользуюсь для этой цели лучшим из бесплатных текстовых редакторов Нотепад++ — ).
Для того, чтобы привыкать к правильному оформлению HTML документов, давайте сразу пропишем стандартную часть (на этом я как раз останавливался в предыдущей статье. Там будет DOCTYPE () и все остальные верхние теги, которые браузер в случае их отсутствия может добавить и сам (умны они стали — жуть):
Значение всех строк в этом коде я подробно объяснял в предыдущей статье (см. ссылку в самом начале этой публикации), поэтому сейчас остановлюсь лишь на строке:
Эта строка говорит браузеру, где ему искать и как называется файл каскадных таблиц стилей (он имеет расширение CSS), который нужен браузеру для корректного отображения задуманного нами оформления шаблона будущего сайта. В нашем случае он называется Style.css (), а искать его нужно в той же папке, где лежит Index.html (собственно, в котором и прописана эта строчка).
Почему именно в этой же папке? Потому, что если вы не прописываете никакого пути до файла (указываете только его название), то браузер будет его искать в той же директории, где лежит исполняемый сейчас (в нашем случае это Index.html). Т.е. отсутствие пути будет равносильно тому, как если бы я прописал путь до Style.css в виде:
Но первый вариант записи короче и более универсальный, т.к. там напрямую не указывается путь до папки с файлами, а значит можно будет поместить файлы Index.html и Style.css в другую директорию, обратиться к Index.html из адресной строки и все равно будет подгружен Style.css. Подробнее про относительные и абсолютные ссылки ).
В связи с этим хочу заметить, что вы вообще можете не заморачиваться с хостингом или же с локальным сервером. Просто создайте на своем компьютере любую папку и поместите в нее наши Index.html и Style.css. Пропишите в первом из них путь до файла Style.css в виде:
И все. Теперь вы сможете открыть Index.html (двойной щелчок мышью по нему) в браузере, назначенном по умолчанию для открывания файлов с расширением HTML у вас на компьютере, и при этом будет автоматически подгружен Style.css.
Этот способ удобен на этапе обучения, но все же, все что я вам говорил о работе на реальном хостинге или локальном сервере, вам тоже в дальнейшем обязательно пригодится. А сейчас работа из папки на своем компьютере может быть даже более удобной, чем на хостинге. Хотя, кому как.
Прописываем нужный набор блоков в index.html
Теперь нам нужно будет создать четыре DIV контейнера для всех частей нашего 2 колоночного макета (шапки, левой колонки, области для контента, футера) и заключить их в один большой Div.
Внутрь Div контейнеров для частей макета можно будет заключить для наглядности названия этих блоков. Все это мы будем писать между открывающим и закрывающим Html тегами Body. Получится примерно такой код в Index.html:
Т.е. сразу за открывающим тегом Body мы прописали открывающий тег основного Div контейнера макета:
В котором задали ID (в нашем случае id="maket"). В последствии для этого ID (), в файле каскадных таблиц стилей Style.css, мы допишем CSS свойства, позволяющие определить размер и выравнивание основного Div.
После открывающего тега основного Div мы прописали код четырех контейнеров, которые станут элементами макета.
Всем этим четырем Div мы назначили свои индивидуальные ID, для которых затем в Style.css мы пропишем CSS свойства, помогающие настроить размер и взаимное размещение (позиционирование) этих контейнеров. Для наглядности, внутри них я прописал их назначения. Ну, и перед закрывающим тегом Body мы поставили закрывающий тег основного Div для всего макета:
Теперь, если открыть созданный нами Index.html в браузере, мы увидим просто перечисление в столбик названий частей 2 колоночного макета. Если вы откроете Index.html в браузере и выберите из меню этого плагина пункты «Контуры» — «Контур элементов уровня блоков», то увидите примерно следующую картину:
Т.е. все получилось именно так, как мы и хотели — четыре Div заключены в одном основном контейнере. Но почему же тогда все выглядит не так, как мы наметили на структурной схеме макета на основе блочной верстки? Просто мы еще ничего не написали в наш Style.css, который поможет чудесным образом (с помощью свойств CSS) расставить все дивы по своим местам.
Прописываем CSS свойства для блоков
Открываем в удобном для вас редакторе Style.css и прописываем стили CSS для только что созданных контейнеров. Сначала в Style.css стоит прописать правило для тегов Body и Html, которое позволит сбросить отступы макета сайта от внутренних и внешних границ экрана (для соблюдения кроссбраузерности):
Body, html { margin:0px; padding:0px; }
Вы, наверное, уже слышали или видели, что макеты бывают фиксированной ширины (например, 800px), а могут быть, или же бывают, резиновые — ширина его подстраивается под разрешение экрана посетителя.
Второй вариант (резиновый) довольно часто используется на форумах, а для сайтов чаще всего применяют макет фиксированной ширины. Особенно это актуально сейчас, с появление широкоформатных мониторов с большим разрешением экрана (резиновый будет смотреться на таком мониторе не очень здорово).
Поэтому мы пропишем для нашего основного Div ряд CSS свойств в Style.css, которые позволят создать макет фиксированной ширины (например, 800px) и выровнять его по центру относительно краев экрана (в Index.html для основного контейнера мы прописали ID под названием maket) :
Итак, давайте разберем эту запись. Вы, наверное, уже поняли, что #MAKET () говорит о том, что данная запись в CSS файле будет применена только к Div, в котором прописан ID="MAKET". В фигурных скобках записываются свойства CSS со своими значениями. Общий синтаксис конструкции записи в CSS файле выглядит так:
Селектор { свойство1: значение; свойство2: значение; ... }
Что примечательно, код CSS будет одинаково хорошо работать вне зависимости от регистра символов, добавления или не добавления между элементами его кода переноса строк, пробелов или табуляции — в общем пишите так, как вам будет удобнее.
Но об этом я планирую подробно рассказать в серии статей, посвященной работе со стилями для начинающих вебмастеров. Давайте рассмотрим каждое свойство отдельно.
Первое CSS свойство двухколоночного макета:
Width:800px;
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
DIV верстка - Как прижать футер (footer, подвал) к низу экрана в нашем макете сайта
HTML (Hyper Text Markup Language) : язык гипертекстовой разметки, используется для создания интернет-страниц. Страница, написанная таким образом, представляет собой обычный текстовыи документ, в котором при помощи тегов определяются расположение и оформление текста, графики и др. Все теги пишутся в угловых скобках (< , >)
Все теги делятся на 2 группы:
-
требующие закрывающего тега (контейнеры
);
-
не имеющие закрывающего тега (одиночные).
Теги-контейнеры записываются так:
<тег>
подопытный объекттег>
. Косая черта (символ /) говорит о том, что тег закрывающий.
Одиночные теги записывают так:
одна хрень<тег>
другая хрень
Тег может иметь параметры. Параметры тега записываются после него, внутри его угловых скобок через пробел. Например,
Ниже приведены основные html-теги и их применение.
Обязательные теги
- тег-контейнер, открывающий тег пишется в самом начале документа; закрывающий- в самом конце. Заключает в себе всё содержимое документа и сообщает компьютеру, что это действительно html-документ.
- контейнер, заключает в себе голову html-документа, где пишутся специальные теги. Начинается сразу после , заканчивается между и
Простой текст, написанный внутри этого контейнера, в браузере никак не отобразится.
- контейнер внутри контейнера
Предназначен для написания в нём заголовка страницы.
- тело документа, где находится основное содержание. Контейнер должен распологаться между и .
Имеет много параметров:
text
-цвет текста на странице,
bgcolor
-цвет фона страницы,
link
-цвет ссылок на странице,
На этом список обязательных тегов заканчивается. Идём дальше...
Теги - контейнеры
-необязательный, но необходимый тег. Имеет ценнейший параметр
href
, без использования которого не обходится ни один сайт. Оно и понятно, ведь сочетанием a href
образуется ссылка
, а какой же сайт без ссылок?!
Пример:
текст, который увидит посетитель
-устаревший, но надёжный тег для текста. Вот его параметры:
color
-цвет шрифта,
size
-размер шрифта (в относительных единицах, от 1 до 7)
и др.
-используется для выравнивания текста и других объектов по горизонтальному центру страницы
-предназначен для написания заголовка внутри страницы. Текст внутри тега отображается большим жирным шрифтом и устанавливается по центру. Вообще-то на месте цифры 2 в моём примере может стоять цифра от 1 до 6 - получаются заголовки от самого большого до самого маленького.
-устанавливает жирное начертание текста.
-курсивный текст
-подчёркнутый текст
-перечёркнутый текст
-используется для отделения параграфа. Позволяет установить для текста различные отступы.
Одиночные теги
-переброс на другую строку
-горизонтальная черта.
-размещение картинки на странице.
У него несколько параметров:
src , указывает путь к картинке (абсолютный или относительный);
align , устанавливает расположение картинки. Этот параметр может принимать значения \"center\", \"left\", \"right\".
alt , подпись к картинке, которая появляется при наведении на неё мышкой.
border , устанавливает толщину рамки вокруг картинки. Принимает значение от 0 до сколько хочешь.
В этой статье познакомимся с основными элементами сетки Bootstrap, а также разберём несколько примеров, в которых рассмотрим, как применять эти элементы сетки для разработки макета сайта.
Элементы сетки фреймворков Bootstrap 3 и 4
Основными элементами сетки Bootstrap 3 и 4 являются:
- обёрточные контейнеры - элементы с классом container или.container-fluid ;
- ряды - элемент с классом row ;
- адаптивные блоки - элементы, с одним или несколькими классами col .
Обёрточный контейнер - это первый элемент, с которого начинается создание макета страницы или некоторой его самостоятельной части. Его основное назначение - это установить ширину разрабатываемого макета . В Bootstrap 3 и 4 обёрточные контейнеры бывают 2 типов . Первый (container) предназначен для создания адаптивно-фиксированного макета, а второй (container-fluid) - для адаптивно-резинового (адаптивно-гибкого) макета.
Адаптивно-фиксированный макет характеризуется тем, что он имеет условно постоянную ширину, которая на одних диазонах viewport браузера имеет одно значение, а на дугих - другое.
Например , в Bootstrap 3 определено 4 диапазона (контрольные точки): xs (по умолчанию), sm (ширина viewport больше 768px), md (ширина viewport больше 992px), lg (ширина viewport больше 1200px).
Обёрточный контейнер (container) устанавливает макету:
- на дипазоне xs ширину, равную ширине viewport браузера;
- на дипазоне sm , ширину равную 750px;
- на дипазоне md , ширину равную 970px;
- на дипазоне lg , ширину равную 1170px.
Ширина же адаптивно-резинового макета не имеет фиксированного значения, она всегда равна ширине vieport браузера.
Обёрточный контейнер кроме установления ширины макету ещё выравнивает его по центру страницы и задаёт внутренние поля (padding) слева и справа по 15px.
Ряд - это тоже контейнер, но для адаптивных блоков сетки Bootstrap.
В Bootstrap 3 его основная роль - это создать отрицательные отступы (margin) слева и справа по 15px.
В Boostrap 4 он не только задаёт отрицательные отступы, но и выполняет ещё функцию flex-контейнера . Т.е. если данный элемент не установить, то адаптивные блоки вообще не будут иметь свойственного им поведения.
Принцип использования элемента "ряд" очень прост, он всегда должен выступать родителем для адаптивных блоков . Т.е. если какой-то элемент (обёрточный контейнер или адаптивный блок) необходимо разметить с помощью адаптивных блоков , то перед тем как их создать сначала установите ряд , а уже в нём эти блоки.
Адаптивный блок - это элемент, который имеют адаптивную ширину. Т.е. его ширина на одном диапазоне viewport может иметь одно значение, а на другом - другое.
Установка поведения адаптивного блока осуществляется с помощью одного или нескольких классов col .
Синтаксис класса col:
Col-{breakpoint}-{number_columns}
{breakpoint} - это контрольная точка , которая определяет минимальную ширину viewport, начиная с которой этот класс будет действовать.
В Bootstrap 3 для использования доступно по умолчанию четыре контрольные точки (xs , sm , md и lg), а в Bootstrap 4 - пять контрольных точек (без обозначения, sm , md , lg и xl). Контрольные точки приведены в порядке возрастания ширины viewport, начиная с которой они начинают действовать.
{number_columns} - это ширина адаптивного блока , которую он будет иметь, начиная с этой контрольной точки . Указывается ширина адаптивного блока с помощью колонок Bootstrap (целого числа) по умолчанию от 1 до 12. Данное число определяет, какую часть ширины он будет иметь относительно содержащего его блока (элемента «ряд»). Минимальная ширина адаптивного блока - это 1/12 (8.3%), а максимальная - 12/12 (100%).
Например , адаптивный блок с классом col-xs-6 col-sm-4 col-md-3 col-lg-2 будет (Bootstrap 3):
- на устройстве xs иметь ширину, равную 6 колонкам Bootstrap, т.е. 50% (6/12*100%) относительно ширины элемента «ряд»;
- на устройстве sm иметь ширину, равную 4 колонкам Bootstrap, т.е. 33.33% (4/12*100%) относительно ширины элемента «ряд»;
- на устройстве md иметь ширину, равную 3 колонкам Bootstrap, т.е. 25% (3/12*100%) относительно ширины элемента «ряд»;
- на устройстве lg иметь ширину, равную 2 колонкам Bootstrap, т.е. 16.67% (2/12*100%) относительно ширины элемента «ряд».
Если же какую-то контрольную точку не указать , то действие этого класса распространится и на следующие контрольные точки . Это связано с тем, что в CSS Bootstrap медиа запросы построены с использованием минимальной ширины.
Например , адаптивный блок с классом col-xs-8 col-md-6 будет (Bootstrap 3):
- на контрольной точке xs и sm иметь ширину, равную 8 колонкам Bootstrap, т.е. 66.7% (8/12*100%) относительно ширины элемента «ряд»;
- на устройстве md и lg ширину, равную 6 колонкам Bootstrap, т.е. 50% (6/12*100%) относительно ширины элемента «ряд».
По умолчанию адаптивные блоки имеют ширину, равную 12 колонок Bootstrap, т.е. 100%. Если у вас какой-то блок, начиная с xs должен иметь это значение, то его можно не указывать.
Например , адаптивный блок с классом col-md-6 col-lg-9 будет (Bootstrap 3):
- на контрольной точке xs и sm иметь ширину, равную 12 колонок Bootstrap, т.е. 100% (12/12*100%) относительно ширины элемента «ряд»;
- на устройстве md иметь ширину, равную 6 колонкам Bootstrap, т.е. 50% (6/12*100%) относительно ширины элемента «ряд»;
- на устройстве lg иметь ширину, равную 9 колонкам Bootstrap, т.е. 75% (9/12*100%) относительно ширины элемента «ряд».
Адаптивные блоки в Bootstrap располагаются линиями. В одну линию может поместиться адаптивные блоки с суммарным количеством колонок Bootstrap по умолчанию не больше 12 . Блоки, которые не помещаются в первую линию, переносятся на следующую линию и т.д.
В Bootstrap 3 при создании макета имеется один очень важный момент, который связан с тем, что адаптивные блоки не всегда переносятся на следующую линию . Это поведение адаптивных блоков объясняется тем, что они в этой версии фреймворка являются плавающими (float:left).
Например , в этой разметке третий адаптивный блок располагается не на второй линии, а прилипает к первому адаптивному блоку:
Чтобы это исправить необходимо перед адаптивным блоком, который должен начинаться с новой линии добавить пустой элемент div с классом clearfix .
Основные правила создания макета с помощью элементов сетки Bootstrap
Основные этапы создания макета веб-страницы:
- создать основные секции (например: header , main , footer);
- создать внутри каждой секции обёрточный контейнер;
- поместить внутрь каждого обёрточного контейнера, разметку которых необходимо произвести с помощью адаптивных блоков, элемент «ряд»;
- создать внутри каждого ряда необходимую структуру с помощью адаптивных блоков;
- поместить внутрь необходимых адаптивных блоков, разметку которых необходимо произвести с помощью адаптивных блоков, элемент «ряд»;
- выполнить пункт 5;
- выполнять пункты 6 и 7 до тех пор, пока не будет достигнута необходимая структура создаваемого макета.
В качестве примера создадим нижеприведённый макет на Bootstrap 3 и 4.
Верстка вышеприведённого макета на Bootstrap 3:
Верстка вышепредставленного макета на Bootstrap 4:
В основе языка HTML лежит понятие «тэг» (англ.: tag -ярлычок, этикетка). Тэги заключаются в угловые скобки (< >) и образуют пары – контейнеры (открывающий тэг и закрывающий). Например, контейнером HTML документа является пара тэгов и . В web-странице включены контейнеры, отвечающие за заголовок документа (голова) и содержат дополнительную информацию, а также контейнеры, отвечающие за само содержание документа (тело). Они представлены на рисунке.
Итак HTML документ заключается в контейнер , заголовок в контейнер
, а содержание документа в контейнере . КонтейнерПример простейшей HTML странички, содержащей только основные тэги:
Результат работы указанного кода изображен на рисунке.
Как видно из примера текст «Содержание простейшей странички» отображается обычным текстом. Для того чтобы произвести форматирование этого текста, необходимо использовать специальные тэги. Пример использования тэгов форматирования представлен на рисунке.
Для изменения шрифта, его цвета и размера используется тэг с параметрами “face”, “color” и “size”. Например для того чтобы задать шрифт “arial” красного цвета и 14 размера необходимо написать следующий код:
Форматируемтекст
Для выделения абзаца в тексте используется тэг
В контейнер которого как правило помещается каждый абзац текста. Для создания заголовка используются тэги
, , , , , .
, , , .
, .
Для формирования списков в теле документа используются контейнеры , и . Причем тэг
- формирует нурмерованный список, тэг
- помещаются элементы списка. Пример кода отображения списков, представленный в виде нумерованного и маркированного списков представлен на рисунке.
Для связи двух и более Web-страниц между собой используются гиперссылки, для создания которых используется тэг . Причем в тэгах гиперссылок используются дополнительные атрибуты, позволяющие либо перейти к другой web-странице, либо переместиться внутри данной страницы. Второй способ желательно использовать в большом документе, имеющем несколько смысловых разделов.
Пример использования гиперссылок представлен на рисунке.
При указании URL адреса другой страницы необходимо указывать либо полный абсолютный путь к странице «полный путь/папка/страница» либо относительный (относительно данной страницы) «папка/страница». Параметр “target” позволяет открыть web-страницу в новом или существующем окне браузера.
Для вставки изображения на web-страницу используется тэг с параметрами src (путь к изображению), width (ширина изображения), height (высота изображения), border (рамка вокруг рисунка). Пример кода вставки изображения:
Часто при создании Web-страниц необходимым является задание фонового цвета или фонового изображения. Для этого используются атрибуты тэга
«bgcolor» или «background-image». Пример вставки фонового цвета:Пример вставки фонового изображения:
Указанные атрибуты могут быть использованы не только для тэга
, но и для тэгов таблицы , области и других, которые будут рассмотрены в следующих темах.Выделяют две основные категории HTML-элементов, которые соответствуют типам их содержимого и поведению в структуре веб-страницы — блочные и строчные элементы . С помощью блочных элементов можно создавать структуру веб-страницы, строчные элементы используются для форматирования текстовых фрагментов (за исключением элементов и ).
Разделение элементов на блочные и строчные используется в спецификации HTML до версии 4.01. В HTML5 эти понятия заменены более сложным набором , согласно которым каждый HTML-элемент должен следовать правилам, определяющим, какой контент для него допустим.
Модель визуального форматирования CSS в деталях
1. Модель визуального форматирования
Модель визуального форматирования CSS представляет собой алгоритм, который обрабатывает HTML-документ и выводит его на экран устройства. Данная модель преобразует каждый элемент документа таким образом, что он генерирует ноль или более прямоугольных блоков в соответствии с блочной моделью CSS. Положение этих блоков на странице определяется следующими факторами:
- размером элемента (с учётом того, заданы они явно или нет);
- типом элемента (строчный или блочный);
- схемой позиционирования (нормальный поток, позиционированные или плавающие элементы);
- отношениями между элементами в DOM (родительский — дочерний элемент);
- внутренними размерами содержащихся изображений;
- внешней информацией (например, размеры окна браузера).
2. Определение термина «содержащий блок»
Положение и размер блока(ов) элемента иногда вычисляются относительно некоторого прямоугольника, называемого содержащим блоком элемента (containing block). Содержащий блок элемента определяется следующим образом:
- Содержащий блок, в котором находится корневой элемент, представляет собой прямоугольник — так называемый начальный содержащий блок .
- Для элементов с position: relative или position: static содержащий блок формируется краем области содержимого ближайшего родительского блока-контейнера.
- Для элемент с position: fixed содержащий блок определяется областью просмотра.
- Для элемента с position: absolute содержащий блок устанавливается ближайшим предком с заданным position: absolute/relative/fixed
3. Блочные элементы и блочные контейнеры
Блочные элементы — элементы высшего уровня, которые форматируются визуально как блоки, располагаясь на странице в окне браузера вертикально. Значения свойства display , такие как block , list-item и table делают элементы блочными. Блочные элементы генерируют основной блок, который содержит только блок элемента. Элементы со значением display: list-item генерируют дополнительные блоки для маркеров, которые позиционируются относительно основного блока.
,,
- - маркированный список, а в тэгах