Введение в CSS-верстку
Рассмотрим краткий экскурс в каждый метод компоновки страниц CSS.
Каждый метод будет изучен более подробно в последующих занятиях.
Методы компоновки страниц позволяют использовать элементы, расположенные на веб-странице, и контролировать где будет находиться каждый элемент относительно их позиции по умолчанию, других элементов вокруг них, их родителей или главного окна.
Методы компоновки страниц:
Каждый метод будет изучен более подробно в последующих занятиях.
Методы компоновки страниц позволяют использовать элементы, расположенные на веб-странице, и контролировать где будет находиться каждый элемент относительно их позиции по умолчанию, других элементов вокруг них, их родителей или главного окна.
Методы компоновки страниц:
- Нормальный поток
- Свойство display
- Flexbox
- Grid
- Floats
- Позиционирование
Нормальный поток (Normal flow)
Поток — одно из важнейших базовых понятий в вёрстке - это порядок отображения элементов на странице.
Это принцип организации элементов на странице при отсутствии стилей: в обычном виде все блоки выводятся в том порядке, в котором они записаны внутри HTML-документа.
То есть, порядок вывода объектов друг за другом на странице в том порядке, в котором они размечены в файле и называется «Нормальным потоком».
Так блочные элементы, с которыми вы совсем скоро познакомитесь, отображаются как прямоугольные области, идущие друг за другом сверху вниз, а строчные элементы располагаются сверху вниз и слева направо и при необходимости переносятся на новую строку. Эти элементы можно вкладывать друг в друга. Чем раньше в коде расположен элемент, тем выше он расположен на странице.
С помощью CSS-правил возможно вывести элемент из нормального потока.
Все свойства, которые позволяют "выйти" из потока кратко описаны ниже и в дальнейшем вы познакомитесь с ними подробно.
Это принцип организации элементов на странице при отсутствии стилей: в обычном виде все блоки выводятся в том порядке, в котором они записаны внутри HTML-документа.
То есть, порядок вывода объектов друг за другом на странице в том порядке, в котором они размечены в файле и называется «Нормальным потоком».
Так блочные элементы, с которыми вы совсем скоро познакомитесь, отображаются как прямоугольные области, идущие друг за другом сверху вниз, а строчные элементы располагаются сверху вниз и слева направо и при необходимости переносятся на новую строку. Эти элементы можно вкладывать друг в друга. Чем раньше в коде расположен элемент, тем выше он расположен на странице.
С помощью CSS-правил возможно вывести элемент из нормального потока.
Все свойства, которые позволяют "выйти" из потока кратко описаны ниже и в дальнейшем вы познакомитесь с ними подробно.
Свойство display
Значения свойства display являются главными методами вёрстки разметки страницы в CSS.
Это свойство позволяет нам менять то, как что-то отображается по умолчанию.
Любой html-элемент генерирует на веб-странице прямоугольный контейнер. Все видимое на экране состоит из контейнеров разных типов.
В нормальном потоке блочные элементы генерируют структурные блоки (свойство display:block) и выводятся вертикально один над другим, занимая по ширине 100% ширины блока-контейнера.
Например, абзацы располагаются один под другим только потому что они имеют по умолчанию свойство display: block.
Строковые контейнеры генерируют строковые блоки (свойство display:inline) и выводятся в строке горизонтально. Ширина строковых элементов равна ширине их содержимого.
Например, если внутри параграфа будет ссылка или элемент span, то элементы будут отображаться в общем потоке с остальным текстом, без переноса на новую строку. Это потому что у этих элементов по умолчанию установлено свойство display: inline.
При этом существует несколько возможностей элементу «выйти» из потока и придать ему почти мифические свойства. Раз элемент "вышел" из потока, то в коде его можно описать где угодно, а также выводить в заданное место окна.
Для этого существует, например, строчно-блочный элемент (свойство display:inline-block). Он также генерирует строку текста, при этом низ элемента располагается на базовой линии строки текста и не разрывает строку. Содержимое элемента форматируется так же, как и для блочных элементов, а ширина блока равна ширине содержимого.\
Однако, есть и другие возможности вёрстки с другими значениями display. В основном все они требуют использования дополнительных свойств. Двумя наиболее важными для задач вёрстки страниц являются display: flex и display: grid.
Это свойство позволяет нам менять то, как что-то отображается по умолчанию.
Любой html-элемент генерирует на веб-странице прямоугольный контейнер. Все видимое на экране состоит из контейнеров разных типов.
В нормальном потоке блочные элементы генерируют структурные блоки (свойство display:block) и выводятся вертикально один над другим, занимая по ширине 100% ширины блока-контейнера.
Например, абзацы располагаются один под другим только потому что они имеют по умолчанию свойство display: block.
Строковые контейнеры генерируют строковые блоки (свойство display:inline) и выводятся в строке горизонтально. Ширина строковых элементов равна ширине их содержимого.
Например, если внутри параграфа будет ссылка или элемент span, то элементы будут отображаться в общем потоке с остальным текстом, без переноса на новую строку. Это потому что у этих элементов по умолчанию установлено свойство display: inline.
При этом существует несколько возможностей элементу «выйти» из потока и придать ему почти мифические свойства. Раз элемент "вышел" из потока, то в коде его можно описать где угодно, а также выводить в заданное место окна.
Для этого существует, например, строчно-блочный элемент (свойство display:inline-block). Он также генерирует строку текста, при этом низ элемента располагается на базовой линии строки текста и не разрывает строку. Содержимое элемента форматируется так же, как и для блочных элементов, а ширина блока равна ширине содержимого.\
Однако, есть и другие возможности вёрстки с другими значениями display. В основном все они требуют использования дополнительных свойств. Двумя наиболее важными для задач вёрстки страниц являются display: flex и display: grid.
Flexbox layout
Что такое flexbox и краткая история
Flexbox (сокращение от Flexible Box Layout) - это модуль, разработанный для облегчения вёрстки.
До появления flexbox верстать веб-сайты было затруднительно из-за ограничений в моделях вёрстки.
На тот момент существующие модели вёрстки не подходили для сложных веб-приложений.
Блочная модель вёрстки была разработана для макета документа; инлайновая модель для текста; табличная модель для размещения двумерных данных в табличном формате. А позиционирование позволяло очень точно размещать элемент без учёта других элементов в документе.
Из-за всех описанных выше ограничений моделей вёрстки, веб-сайты часто создавались с использованием комбинации обтекаемых элементов, позиционированных элементов и, возможно, даже вёрстки таблицами. Получение сайта, который бы хорошо выглядел на экранах разных размеров, вызывало головную боль.
Тогда единственный способ заставить веб-сайт выглядеть правильно — это включить кучу хаков, которые часто казались нелогичными, как в CSS, так и в HTML. Это совершенно противоречило подходу «разделение представления и содержимого», к которому стремится любой приличный веб-разработчик.
Модуль CSS Flexible Box Layout был разработан CSS Working Group и предлагает блочную модель, которая может преодолеть указанные проблемы. Сегодня считается одним из важных элементов, используемых для задач вёрстки страниц.
Пример использования
Для использования, нужно установить свойство display: flex для родительского элемента тех элементов, к которым нужно применить этот тип вёрстки; все его прямые потомки станут flex элементами. Рассмотрим это на простом примере.
Разметка HTML, представленная ниже, включает в себя три <div> элемента. По умолчанию все они будут изображаться как блочные, один под другим.
Flexbox (сокращение от Flexible Box Layout) - это модуль, разработанный для облегчения вёрстки.
До появления flexbox верстать веб-сайты было затруднительно из-за ограничений в моделях вёрстки.
На тот момент существующие модели вёрстки не подходили для сложных веб-приложений.
Блочная модель вёрстки была разработана для макета документа; инлайновая модель для текста; табличная модель для размещения двумерных данных в табличном формате. А позиционирование позволяло очень точно размещать элемент без учёта других элементов в документе.
Из-за всех описанных выше ограничений моделей вёрстки, веб-сайты часто создавались с использованием комбинации обтекаемых элементов, позиционированных элементов и, возможно, даже вёрстки таблицами. Получение сайта, который бы хорошо выглядел на экранах разных размеров, вызывало головную боль.
Тогда единственный способ заставить веб-сайт выглядеть правильно — это включить кучу хаков, которые часто казались нелогичными, как в CSS, так и в HTML. Это совершенно противоречило подходу «разделение представления и содержимого», к которому стремится любой приличный веб-разработчик.
Модуль CSS Flexible Box Layout был разработан CSS Working Group и предлагает блочную модель, которая может преодолеть указанные проблемы. Сегодня считается одним из важных элементов, используемых для задач вёрстки страниц.
Пример использования
Для использования, нужно установить свойство display: flex для родительского элемента тех элементов, к которым нужно применить этот тип вёрстки; все его прямые потомки станут flex элементами. Рассмотрим это на простом примере.
Разметка HTML, представленная ниже, включает в себя три <div> элемента. По умолчанию все они будут изображаться как блочные, один под другим.
<div>
<div class="box1">Блок 1</div>
<div class="box2">Блок 2</div>
<div class="box3">Блок 3</div>
</div>
Но если мы добавим свойство display: flex родительскому элементу, три дочерних сгруппируются в колонки.
Всё это потому что они сами становятся элементами flex и наследуют некоторые свойства, установленные контейнеру, в котором они находятся. Нюансы мы скоро рассмотрим на занятии.
Добавим контейнеру элемент main_box со свойством display:flex и box рамку для нагладности.
Всё это потому что они сами становятся элементами flex и наследуют некоторые свойства, установленные контейнеру, в котором они находятся. Нюансы мы скоро рассмотрим на занятии.
Добавим контейнеру элемент main_box со свойством display:flex и box рамку для нагладности.
html
<div class="main_box">
<div class="box1">Блок 1</div>
<div class="box2">Блок 2</div>
<div class="box3">Блок 3</div>
</div>css
.main_box
{
display: flex;
}
.box1, .box2, .box3
{
border-radius: 5px;
background-color: rgb(207,232,220);
padding: 1em;
}
Grid layout
В то время как flexbox предназначен для одномерной разметки, Grid Layout предназначен для двумерной — выстраивая предметы в ряды и столбцы.
Сетка (grid) представляет собой набор пересекающихся горизонтальных и вертикальных линий, делящих пространство grid-контейнера на области сетки, в которые могут быть помещены элементы сетки.
Переключиться на Grid Layout можно при помощи конкретного значения отображения — display: grid.
Сетка (grid) представляет собой набор пересекающихся горизонтальных и вертикальных линий, делящих пространство grid-контейнера на области сетки, в которые могут быть помещены элементы сетки.
Переключиться на Grid Layout можно при помощи конкретного значения отображения — display: grid.
Float layout
Свойство float в CSS занимает особенное место. До его появления расположить два блока один слева от другого можно было лишь при помощи таблиц. Но в его работе есть ряд особенностей. Поэтому его иногда не любят, но при их понимании float станет вашим верным другом и помощником.
float достаточно активно применяется при вёрстке веб-страниц и служит для реализации:
float достаточно активно применяется при вёрстке веб-страниц и служит для реализации:
- обтекание картинок текстом;
- создание врезок;
- горизонтальные меню;
- галерея фотографий;
- двух и трёхколоночные макеты.
Позиционирование
Позиционирование позволяет перемещать элементы с места, где бы они располагались при нормальном потоке в другую локацию. Позиционирование не является методом создания основной разметки страницы, это больше об управлении и точной настройке положения определённых элементов на странице.
Однако, существуют полезные методы точной разметки шаблонов, которые полагаются на свойство position. Понимание позиционирования также способствует пониманию нормального потока и того, что значит вывести элемент из нормального потока.
Существует пять типов позиционирования о которых следует знать:
Static positioning (статическое позиционирование)
его по умолчанию получают все элементы - это всё лишь значит "поместить элемент в его нормальную позицию в разметке документа - тут нет ничего особенного на что посмотреть".
Relative positioning (относительное позиционирование)
позволяет менять положение элемента на странице, перемещая его относительно его положения в нормальном потоке - в том числе заставляя его перекрывать другие элементы на странице.
Absolute positioning (абсолютное позиционирование)
полностью перемещает элемент из нормального потока разметки страницы так будто он находится на своём собственном отдельном слое. Оттуда можно исправлять его положение относительно краёв <html> элемента страницы (или его ближайшего позиционированного элемента предка).
Это является полезным при создании сложных эффектов разметки такие как вкладки, в которых различные панели содержимого располагаются друг над другом и отображаются и/или скрываются по желанию или информационные панели, которые располагаются на экране по умолчанию, но могут скользить по экрану используя кнопки управления.
Fixed positioning (фиксированное позиционирование)
очень похоже на абсолютное за исключением того, что он изменяет положение относительно окна просмотра браузера, а не другого элемента.
Полезно при создании эффектов таких как постоянное меню навигации, которое всегда остаётся в одном и том же месте на экране, в то время как другой контент прокручивается.
Sticky positioning (липкое позиционирование)
это новый метод позиционирования, который заставляет элемент вести себя как position: static пока не достигнет определённой линии окна просмотра и с этого момента будет вести себя как position: fixed.
Однако, существуют полезные методы точной разметки шаблонов, которые полагаются на свойство position. Понимание позиционирования также способствует пониманию нормального потока и того, что значит вывести элемент из нормального потока.
Существует пять типов позиционирования о которых следует знать:
Static positioning (статическое позиционирование)
его по умолчанию получают все элементы - это всё лишь значит "поместить элемент в его нормальную позицию в разметке документа - тут нет ничего особенного на что посмотреть".
Relative positioning (относительное позиционирование)
позволяет менять положение элемента на странице, перемещая его относительно его положения в нормальном потоке - в том числе заставляя его перекрывать другие элементы на странице.
Absolute positioning (абсолютное позиционирование)
полностью перемещает элемент из нормального потока разметки страницы так будто он находится на своём собственном отдельном слое. Оттуда можно исправлять его положение относительно краёв <html> элемента страницы (или его ближайшего позиционированного элемента предка).
Это является полезным при создании сложных эффектов разметки такие как вкладки, в которых различные панели содержимого располагаются друг над другом и отображаются и/или скрываются по желанию или информационные панели, которые располагаются на экране по умолчанию, но могут скользить по экрану используя кнопки управления.
Fixed positioning (фиксированное позиционирование)
очень похоже на абсолютное за исключением того, что он изменяет положение относительно окна просмотра браузера, а не другого элемента.
Полезно при создании эффектов таких как постоянное меню навигации, которое всегда остаётся в одном и том же месте на экране, в то время как другой контент прокручивается.
Sticky positioning (липкое позиционирование)
это новый метод позиционирования, который заставляет элемент вести себя как position: static пока не достигнет определённой линии окна просмотра и с этого момента будет вести себя как position: fixed.
Предыдущее занятие | Следующее занятие
