br 8eb34


search

Свойства CSS для позиционирования

positДля удобства, я разбил свойства стилей на несколько групп - для изменения текста, изменения графики, а это статья о свойствах CSS для позиционирования элементов на веб-странице. Создавая страницу, часто приходится сталкиваться с определением положения элемента, относительно другого или границ сайта в целом. Все элементы можно расположить на сайте, согласно эскизу, но для этого нужно знать специальные свойства, которые будут описаны ниже...

Свойство Display

display - свойство для выбора способа показа элемента на странице, имеет несколько значений, наиболее популярные это:

  • block - элемент определяется как блочный
  • inline - элемент будет показан, как встроенный
  • inline-block - внутренняя часть элемента, как блочная, а сам элемент встроенный
  • inline-table - определяет объект, как таблицу, но при этом может обтекаться текстом
  • inline-item - элемент как блочный, но с отметкой списка
  • none - объект будет визуально удален, и свободное пространство заполнится

display: block

 

overflow - выбор способа показа содержания блочного элемента, в случае выхода его за обозначенную область:

  • visible - содержание будет показано за пределами установленных размеров
  • hidden - всё что не поместилось в границы будет скрыто
  • scroll - добавление полос прокрутки
  • auto - полосы прокрутки появляются по необходимости

overflow: hidden;

float - определение стороны, по которой будет выравниваться элемент, но при этом элементы, стоящие ниже, будут обтекать его с других сторон. Можно определить выравнивание по левому (left) или по правому (right) краям... По-умолчанию float отключено или можно записать none.

float: right;

Свойство margin

margin - универсальное свойство для задания отступа от каждого края элемента, указывая разные количества значений:

  • 1 значение - значение отступа для каждого края одинаково
  • 2 значения - 1-е значение означает отступ вверху и внизу, а 2-е означает отступ справа и слева
  • 3 значения - 1-е значение это отступ по верху, 2-е это отступ слева/справа, а 3-е отступ снизу
  • 4 значения - соответственно отступы от верха, правого края, низа и левого края

margin: 10px 5px 20px 8px;

Для задания отступа от какой-либо стороны отдельно, можно применять свойства - margin-top, margin-right, margin-bottom и margin-left, в которых записывается одно значение указывающее величину отступа сверху, справа, снизу и слева соответственно. Принимаются значения в px, pt, % и др, а также можно установить значение auto, которое устанавливает автоматический отступ от заданного края..

Свойство padding

padding - универсальное, схожее по назначению с предыдущим, свойство, которое устанавливает вокруг элемента незримые поля. Также как и в свойстве margin, здесь можно указывать от 1 до 4 значений, которые обозначают ширину поля заданных сторон. Аналогично существуют свойства для задания поля определенной стороны (padding-top, padding-right, padding-bottom и padding-left).

padding-left: 25px;

Свойство position

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

  • absolute - в этом случае элемент будет показан на странице в определенной точке на сайте
  • fixed - это значение также привязывает элемент к определенной точке, но при прокрутке элемент не сдвигается
  • relative - положение элемента зависит от других объектов на странице
  • static - отсчет от предыдущих элементов, но на их расположение объект не влияет
  • inherit - значение наследуется от родительского элемента

position: relative;

top, bottom, right, left - свойства, определяющие положение объекта относительно родительского элемента. Значение расстояния при необходимости может быть отрицательным... Это свойство не влияет на объект со значением - position: static;

left: 30pt;

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

  • visable - элемент отображается как обычно (по-умолчанию)
  • hidden - обеспечивает скрытие элемента
  • collapse - для добавления в ячейки таблицы, чтобы перестроить её

visability: hidden;

Свойства ширины и высоты

width - для установки ширины, как правило блочного элемента. Значение можно указывать в абсолютных и относительных единицах. Можно указать максимальное и минимальное значения, применяя свойства max-width и min-width соответственно.

max-width: 80%;

height - свойство для установки высоты объекта, также можно использовать максимальные и минимальные свойства - max-height и min-height.

 

 

z-index - свойство, которое определяет положение одного элемента, относительно другого при положении нахлеста. Применяется только к объектам со значениями свойства position - absolute, fixed и relative. Значение можно указывать с плюсом и минусом, чем больше значение, тем выше объект относительно остальных.

z-index: 100;

Установив значение auto, элементы будут показаны так, как расположены они в коде.

Добавить комментарий

Защитный код
Обновить

Комментарии