HTML\CSS → Позиционирование в CSS: static, relative, absolute, fixed

02 июня 2015HTML5

Свойство position задает режим позиционирования элементов.

1. Статическое. Значением по умолчанию является positon:static — элементы отображаются последовательно один за другим в том порядке, в котором они определены в документе.

2. Относительное. Значение positon:relative — позиция элемента смещается относительно его исходного положения вверх, вниз, вправо или влево (свойствами top, right, bottom или left). Элемент остается в потоке документа и на самом деле никуда не смещается. Он остается в потоке ровно там же, где и был, а смещается визуальная копия блока (можно проверить увеличив его высоту или задав отступы).

HTML\CSS → Свойство display:none vs visibility:hidden

02 июня 2015HTML5

display:none — скрытый элемент не отображается и не занимает места на странице.

visibility:hidden — прячет элемент, но он занимает место на странице.

HTML\CSS → Свойство display:table

02 июня 2015HTML5

Табличные элементы похожи на блочные за исключением ширины по умолчанию (зависит от содержания). display:table задает элементу тип таблицы, особенности таких элементов:

Можно задавать ширину, высоту, рамки, отступы;
По умолчанию ширина зависит от содержания;
Переносы строки до и после элемента.

display:table-row — элемент ведет себя как <tr>, является контейнером для ячеек и практически не имеет собственного отображения.

display:table-cell — элемент ведет себя как <td>,
можно задавать отступы между ячейками или режим схлопывания границ.

HTML\CSS → Свойство display:inline-block

02 июня 2015HTML5

Иногда возникает необходимость расположить в ряд несколько элементов с заданными размерами. Строчные элементы для этого не подходят, т.к. не воспринимают размеры. Блочные элементы тоже не подходят, т.к. до и после них существует перенос строки.

Особенности inline-blockов:

Им можно задавать размеры, рамки и отступы, как и блочным элементам;
Их ширина по умолчанию зависит от содержания, а не растягивается на всю ширину контейнера;
Они не порождают принудительных переносов строк, поэтому могут располагаться на одной строке, пока помещаются в родительский контейнер;
Элементы в одной строке выравниваются вертикально подобно строчным элементам (vertical-align).

HTML\CSS → CSS3 свойство box-sizing

02 июня 201529 ноября 2016HTML5

Свойство box-sizing:border-box изменяет режим расчета ширины элемента так, чтобы свойство width задавало не ширину содержания, а общую ширину. Значение свойства умолчаниюcontent-box. При резиновой верстке намного удобнее задать значение border-box.

Данное свойство лучше задавать с использованием префиксов:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}