Использование CSS для размещения элементов HTML

• April 30, 2024

Правила CSS дают вам возможность размещать элементы HTML именно там, где вы хотите. Вы можете настроить их реакцию на другие элементы, сидящие вокруг них, или даже полностью скрыть их. Вот разбивка по свойствам размещения CSS.

Отображение: это свойство определяет способ отображения элемента. Если для параметра display установлено значение none, элемент полностью скрывается, в то время как другие значения могут изменить реакцию элемента на другие свойства и элементы. Например, div по умолчанию настроен на отображение в виде «блока», то есть он действует как прямоугольный объект, но вы можете использовать «display: inline», чтобы вместо этого div действовал как абзац. Или вы можете сделать наоборот и использовать «display: block», чтобы заставить параграф действовать как div.

Позиция: определяет, как элемент реагирует на элементы вокруг него. Элементы используют «position: static» по умолчанию, что означает, что они отображаются в том порядке, в котором они отображаются в коде HTML. «Положение: относительное» означает, что статическое местоположение элемента вычисляется, а затем смещается на то, что вы указываете в свойствах «top» и «left». Другие элементы страницы действуют так, как будто относительный элемент все еще находится в своем статическом местоположении. Элементы «Position: absolute» игнорируют свое статическое положение, основывая свое положение исключительно на значениях в свойствах top, left, right и bottom. Кроме того, другие элементы будут игнорировать этот элемент (поэтому, если вы не будете осторожны, вы можете получить некоторые грязные наложения). «Position: fixed» аналогичен «position: absolute» за исключением того, что элемент будет занимать свое место, даже если ваш посетитель прокручивает страницу.

Видимость: решает, будет ли элемент отображаться на странице или нет. Разница между «display: none» и «visibility: hidden» заключается в том, что в первом случае другие элементы страницы ведут себя так, как будто невидимый объект не существует; в последнем случае другие элементы будут занимать место для скрытого элемента. Очевидно, что по умолчанию установлено значение «видимый».

Float: Устанавливает, будет ли элемент каскадироваться слева или справа от других элементов (или не каскадируется вообще, что по умолчанию). Это свойство чрезвычайно полезно для правильного позиционирования относительных элементов. Вы должны установить ширину для любого плавающего элемента, иначе он не будет отображаться правильно. Также, если вы используете float для одного элемента, вы, вероятно, захотите установить свойство для всех элементов вокруг него.

Очистить: это свойство работает вместе со свойством float. Он решает, как элемент будет позволять другим элементам плавать вокруг него - «clear: left» означает, что никакие другие элементы не могут плавать слева от него; «clear: right» блокирует правую сторону, а «clear: both» означает, что никакие элементы не могут перемещаться в любую сторону. По умолчанию установлено значение «clear: none» (это означает, что другие элементы могут перемещаться в любую сторону).

Видео инструкция: Позиционирование элементов: свойство position в CSS + разбор sticky (April 2024).