Позиционирование элементов при создании сайтов

В этой статье вы узнаете:

• Как Установить ширину и высоту
• Что такое Box-sizing
• Виды элементов
• Типы позиционирования

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

Стили CSS дают нам возможность расположить объекты страницы любым образом. Что делает наш контент более привлекательным и приятным для глаз.

Как задать ширину и высоту для объекта

Для того чтобы задать объекту ширину и высоту, используются свойства стилей «width – ширина и height – высота». Мы можем указывать их, как в абсолютных величинах «пикселях» так и в процентах.

Что такое Box-sizing

Если вы уже попробовали воспользоваться внутренними и внешними отступами то могли заметить, что размер блока складывается из параметров заданных для ширины, высоты и отступов.

Свойство «box-sizing» делает так, что параметры «width и height» применяются не к объекту, а ко всему блоку. У свойства «box-sizing» есть два применяемых параметра:

• Content-box параметры «width и height», указывают ширину и высоту без значений «margin и padding», этот параметр стоит по умолчанию,
• Border-box - «width и height» содержат в себе значения «margin и padding»

Виды элементов

Элементы бывают трёх видов: блочные, строчные, строчно-блочные. Для того чтобы менять виды используется свойство «display».

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

Строчные элементы – это элементы, которые содержат лишь данные строчного типа, это может быть текст, ссылки, цитаты, код.... Строчные элементы занимают столько места в ширину, сколько занимает его содержимое, при этом параметр «width, height» будет игнорироваться

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

Типы позиционирования

И так мы подошли к самому главному!

Позиционирование бывает четырёх типов static, fixed, absolute и relative.

Чтобы использовать тип позиционирования, нужно воспользоваться свойством «position», а для того чтобы управлять расположением элементов на страничке, применяются параметры: top, Right, Bottom, left.

• Статическое позиционирование «static» - это значение по умолчанию. Объекты влияют на размещение друг друга, к статическому элементу невозможно применить отступы.
• Абсолютное позиционирование «absolute» - элементы не влияют на размещение других объектов, то есть элемент с применённым параметром «position: absolute»; будет игнорировать любые другие элементы.
• Фиксированное позиционирование «fixed». Элемент остаётся всегда на своём месте и его всегда видно при прокрутке страницы, очень часто применяется к меню.
• Релятивное позиционирование «relative» - также как статическое, влияет на расположение других объектов, однако могут быть применены отступы.