Чтобы отцентровать блочный элемент, нужно выполнить следующие действия:
1. Задать элементу ширину, которая меньше ширины родительского контейнера.
2. Задать для внешних отступов справа и слева значение auto.
Примерыкода:
selector {
width: 100px;
margin: 0 auto;
}
selector {
width: 100px;
margin-left: auto;
margin-right: auto;
}
ВСЕ КОНЕЧНО КРУТО. НО РАСЧЕТЫС ШИРИНОЙ И ОТСТУПАМИ НЕ ВСЕГДА ПРОСТЫ, В ОСОБЕННОСТИ В СЛУЧАЯХ С ГИБКОЙ ВЕРСТКОЙ. ПОЭТОМУ В CSS3 БЫЛ ДОБАВЛЕН НОВЫЙ алгоритм расчета ширины элемента:
box-sizing
в таком случае, свойство width задает не ширину содержания, а общую ширину.
Это свойство имеет два значения:
1. content-box — значение по умолчанию, соответствует стандартной блочной модели.
2. border-box — изменяет режим расчета ширины элемента на описанный выше.
https://simonenko.su/32197993404/use-css3-box-sizing
Управление типом элемента
Тип элемента не является чем-то вечным и неизменным, его можно изменять с помощью CSS. За это отвечает свойство display.
С его помощью, например, можно сделать абзацы и заголовки строчными, а спаны и стронги блочными элементами.
У свойства display много значений. С двумя из них вы уже заочно познакомились. Свойство display:block обозначает блочный элемент, а display:inline — строчный.
Display: inline-block
Иногда возникает необходимость расположить в ряд несколько элементов с заданными размерами. Строчные элементы для этого не подходят, т.к. не воспринимают размеры. Блочные элементы тоже не подходят, т.к. до и после них существует перенос строки. Конечно, блочные элементы можно приспособить для такой задачи, используя дополнительные свойства (которые будут разбираться в курсе про сетки).
Но более простой способ — использовать блочно-строчные элементы. В HTML нет тегов, которые по умолчанию вели бы себя как блочно-строчные, но любой элемент можно переключить в данный режим, задав ему свойство display со значением inline-block.
Особенности блочно-строчных элементов:
· им можно задавать размеры, рамки и отступы, как и блочным элементам;
· их ширина по умолчанию зависит от содержания, а не растягивается на всю ширину контейнера;
· они не порождают принудительных переносов строк, поэтому могут располагаться на одной строке, пока помещаются в родительский контейнер;
· элементы в одной строке выравниваются вертикально подобно строчным элементам.
От строчных им достались следующие черты:
· по ширине они ужимаются под своё содержимое;
· могут располагаться в одну строку;
· реагируют на вертикальное выравнивание, vertical-align;
· реагируют на горизонтальное выравнивание, text-align, заданное у родителя.
Т.Е. В ОБЕРТКЕ ДОСТАТОЧНО УКАЗАТЬ TEXT-ALIGN:CENTERИ БЛОКИ ВНУТРИ ВЫРОВНЯЮТСЯ ПО ЦЕНТРУ
От блочных:
· им можно задавать размеры с помощью width и height;
· а также внешние и внутренние отступы и рамки, которые работают во всех направлениях и увеличивают размер элемента.
ТАКИМ ОБРАЗОМ, DISPLAYэто всего лишь случай, когда нам нужно лепить блок как пластелин, чтобы у него не было ограничений и предустановленных свойств.
ДАЛЕЕ ПОКАЗЫВАЕТСЯ ВАРИАНТ, КАК МОЖНО ПОСТРОИТЬ ТАЛИЦУ НА DIVах
Display: table
Дальнейшие несколько заданий будут посвящены табличным типам элементов.
Табличные сетки были очень популярны на заре веба. Действительно, у табличных сеток есть преимущества, которые очень сложно получить с помощью блоков. Например, столбцы одинаковой высоты.
Однако, семантически таблицы не предназначены для разметки сеток и постепенно от них отказались. Но память об их удобстве жила.
Позднее было разработано семейство значений свойства display, которое позволяет задать табличное поведение любым элементам.
Первое значение — display:table задает элементу тип таблица. Особенности табличных элементов:
1. можно задавать ширину, высоту, рамки, отступы;
2. по умолчанию ширина зависит от содержания;
3. переносы строки до и после элемента.
Табличные элементы похожи на блочные за исключением ширины по умолчанию.
Display: table-row
Как вы догадались, мы строим таблицу на дивах с помощью новых значений свойства display. Знания про таблицы вы можете освежить в курсе Знакомство с таблицами.
Любая таблица содержит элементы строка таблицы, внутри которых должны содержаться элементы ячейка таблицы. Соответствиетеговтаблицызначениям display:
<table> — display:table;
<tr> — display:table-row;
<td> — display:table-cell;
В этом задании вы создадите строки таблицы с помощью display:table-row;. Строка — необычный элемент. Она является контейнером для ячеек и практически не имеет собственного отображения. Для нее можно только задавать цвет фона.
Display: table-cell
С помощью значения table-cell свойства display можно задать элементу тип ячейка таблицы. Конечно, лучше чтобы элементы-ячейки находились внутри элементов-строк, которые находятся внутри элементов-таблиц.
Вы можете просто задать элементу тип ячейка таблицы, не добавляя вокруг него дополнительных элементов-строк и таблиц. В этом случае браузер создаст дополнительные анонимные элементы строки и таблицы. Неудобство заключается в том, что вы не сможете ими управлять.
К таблицам, созданным с помощью CSS, можно применять те же свойства, что и к обычным таблицам. Например, задавать отступы между ячейками или режим схлопывания границ.
Display: none
Значение none свойства display используется очень часто. С его помощью можно скрыть элемент, как будто его и не было. Скрытый элемент не отображается и не занимает места на странице.
Данное свойство применяется при создании выпадающих меню, динамических галерей, переключающихся вкладок и много где еще.
Есть еще одно CSS-свойство, которое используется для сокрытия элементов. Это свойство visibility со значением hidden. Оно «прячет» элемент — он становится невидимым, но занимает место на странице.
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
СЕТКИ
Поток — это порядок отображения элементов на странице. По умолчанию блочные элементы отображаются как прямоугольные области, идущие друг за другом сверху вниз, а строчные элементы располагаются сверху вниз и слева направо и при необходимости переносятся на новую строку.
Потоком можно управлять и изменять привычное поведение элементов в потоке. Например, можно заставить блочные элементы двигаться не сверху вниз, а выстраиваться в несколько колонок.
А научившись управлять потоком, вы сможете строить сетки.
Существует несколько способов управлять потоком и строить сетки:
1. флоаты;
2. инлайн-блоки;
3. табличная вёрстка;
4. флексбоксы.
Табличная вёрстка — самый простой для понимания способ построения сеток. Но он считается устаревшим и использовать его не рекомендуется. Сейчас уже можно использовать для такой вёрстки не таблицы, а элементы с display: table, display: table-row и display: table-cell. Подробно эта тема рассматриваются в курсе «Таблицы на CSS».
Флексбоксы — это новая и очень мощная технология для построения сеток. Подробно она разбирается в курсах Флексбокс, часть 1 и Флексбокс, часть 2.
В этом курсе мы подробно разберём флоаты и инлайн-блоки. Основной упор сделаем на флоаты, так как сейчас на многих сайтах сетки построены на них.
Свойство float имеет следующие значения:
1. left — прижимает элемент к левому краю родителя, другие элементы обтекают его справа;
2. right — прижимает элемент к правому краю родителя, другие элементы обтекают его слева;
3. none — отключает режим обтекания и возвращает элементу нормальное поведение
https://softwaremaniacs.org/blog/2005/12/01/css-layout-float/
Если по простому, то суть float`ов такова: