Урок 5. Блочные и строчные элементы. Тэги div и и span. Технология Flex.
Блочные и строчные элементы.
В html все элементы делятся на блочные и строчные.
Блочные элементы занимают всю ширину родительского элемента. Например, элементы <h1> и <p> являются блочными.
Пример:
<style>
h1,p {
background-color: aqua;
}
</style>
</head>
<body>
<h1>Заголовок</h1>
<p>Параграф</p>
Как видно из результата независимо от контента ширина элементов распространяется на всю ширину экрана.
Строчные элементы занимают ширину равную ширине своего контента. Они как правило используются для выделения кусочков текста.
Пример:
h1,p {
background-color: aqua;
}
b {
background-color:red;
}
</style>
</head>
<body>
<h1>Заголовок</h1>
<p>Lorem <b>ipsum dolor</b> sit amet consectetur adipisicing elit. Placeat aut distinctio porro tenetur laborum dolor voluptatibus consequuntur quisquam eligendi, nostrum labore adipisci delectus minus totam nemo, sed, eum ut corrupti.</p>
В css существует свойство display. С помощью него можно менять дефолтное состояние элемента. Т.е. строчный элемент можно сделать блочным и наоборот. Так же с помощью этого свойства можно скрыть элемент.
Далее в таблице приведем возможные значения этого свойства:
Свойство | Значение | Описание |
display | block | Делает элемент блочным |
inline | Делает элемент строчным | |
none | Скрывает элемент |
Тэги div и span.
В html существуют тэги div и span. Div – блочный элемента, span – строчный. Они по умолчанию не имеют ни каких css настроек. Как правило при их использовании им присваивают классы или идентификаторы. Они не несут ни какой семантической нагрузки и широко используются для формирования различного размещения элементов на странице.
Пример использования:
<style>
.paragraph {
background-color:aqua;
}
.bold-text {
font-weight: bold;
background-color: red;
}
</style>
</head>
<body>
<div class="paragraph">Lorem <span class="bold-text">ipsum dolor</span> sit amet consectetur adipisicing elit. Placeat aut distinctio porro tenetur laborum dolor voluptatibus consequuntur quisquam eligendi, nostrum labore adipisci delectus minus totam nemo, sed, eum ut corrupti.</div>
</body>
Технология Flex.
До сих пор в нашей верстке все элементы размещались один под другим по очереди. В html существует технология, которая позволяет нарушать обычный порядок отображения – Flex.
Данная технология хорошо описана на различных сайтах в Интернете. Вот некоторые ссылки:
Так же есть онлайн игра, которая позволяет потренироваться в использовании данной технологии.
Свойства применяемые к флекс-контейнеру | |||
display | Создает флекс контейнер | flex |
|
Создет флекс контейнер для инлайн элементов | flex-inline |
| |
| -webkit-flex | Для устаревших браузеров | |
| -ms-flex | ||
flex-direction | Направление главной оси | row | По умолчанию |
row-reverse |
| ||
column |
| ||
column-reverse |
| ||
flex-wrap | Могут ли переходить не входящие элементы на новую строку | nowrap | По умолчанию |
wrap |
| ||
wrap-reverse |
| ||
flex-flow | За раз два предыдущих | Два значения через пробел |
|
justify-content | Способ выравнивания внутри флекс контейнера вдоль главной оси. (Абсолютную поддержку имею только первые три значения, остальные могут еще не поддерживаться. | flex-start |
|
flex-end |
| ||
center |
| ||
space-between | элементы равномерно распределены по линии; первый элемент находится в начале строки, последний элемент в конце строки | ||
space-around | элементы равномерно распределены по линии с одинаковым пространством вокруг них. Обратите внимание, что визуально пространства не равны, так как все элементы имеют одинаковое пространство с обеих сторон. Первый элемент будет иметь одну единицу пространства напротив края контейнера, но две единицы пространства между следующим элементом, потому что у следующего элемента есть свой собственный интервал, который применяется. | ||
space-evenly | элементы распределяются таким образом, чтобы расстояние между любыми двумя элементами (и расстояние до краев) было одинаковым. | ||
align-items | Как выравниваются элементы по высоте или растягиваются | flex-start |
|
flex-end |
| ||
center |
| ||
stretch |
| ||
baseline |
| ||
align-content | Определяет как выравниваются элементы, если контейнер больше, чем содержимое Работает только если flex-wrap:wrap; | flex-start |
|
flex-end |
| ||
center |
| ||
stretch |
| ||
space-between |
| ||
space-around |
| ||
Свойства применяемые к флекс-элементам | |||
order | Определяет порядок следования элементов | Целое положительное или отрицательное число | По умолчанию все имеют значение 0 и располагаются по очереди в html документе. Если присвоить 1, то элемент переместится в конец, если -1, то в начало. |
flex-grow | Способность растягиваться в случае необходимости | число | Обозначает пропорцию. Т.е. если всего 2 элемента у одного это свойство равно1 у другого 2, то они растянутся 1:2. По умолчанию ноль, соответственно расширятся не будет. |
flex-shrink | Способность сжиматься при необходимости | Число |
|
flex-basis | Размер элемента по умолчанию перед распределением оставшегося пространства | auto | «Смотри на мои width и height» |
Размер в любых едиицах или % |
| ||
content | На основе содержимого элемента | ||
flex | За раз три предыдущих | 0 1 auto | По умолчанию |
align-self | То же самое что align-items, только для одного элемента | flex-start |
|
flex-end |
| ||
center |
| ||
stretch |
| ||
baseline |
| ||
min-width | Можно использовать |
|
|
max-width |
|
| |
min-height |
|
| |
max-height |
|
| |