Отцентровка элемента внутри родительского блока

Чтобы отцентровать блочный элемент, нужно выполнить следующие действия:

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 — изменяет режим расчета ширины элемента на описанный выше.

http://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 — отключает режим обтекания и возвращает элементу нормальное поведение

http://softwaremaniacs.org/blog/2005/12/01/css-layout-float/

Если по простому, то суть float`ов такова:

Наши рекомендации