блог-форум о программировании

Вы не вошли.

#1 2021-01-26 21:14:40

Majestio
Администратор
Здесь с 2017-11-17
Сообщений: 90
Windows 10Chrome 87.0

CSS = Шпаргалка по разметке


CSS = Шпаргалка по разметке


  • 1. Единицы измерения

  • 2. Единица измерения auto

  • 3. Позиционирование position


1. Единицы измерения
  • px - точное значение в пикселях

  • em - относительный размер шрифта, относительно текущего контекста (относительно свойств контейнера)

  • rem - относительный размер шрифта, относительно элемента <html>

  • % - относительное значение, относительно одноименных свойств контейнера

  • vw - 1% ширины окна

  • vh - 1% высоты окна

  • vmin - наименьшее из (vw, vh), в IE9 обозначается vm

  • vmax - наибольшее из (vw, vh)

Замечание для %. Не всегда расчет идет одноименных свойств. Например:

margin-left

При установке свойства margin-left в %, процент берётся от ширины родительского блока, а вовсе не от его margin-left.

line-height

При установке свойства line-height в %, процент берётся от текущего размера шрифта, а вовсе не от line-height родителя.

width/height

Обычно процент от ширины/высоты родителя, но при position: fixed, процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда % требует соблюдения дополнительных условий.

2. Единица измерения auto

Хотя правильнее это нужно называть - значение. Оно применяется к различным атрибутам, и часто ведет себя по-разному.

width: auto

Растягивает элемент до ширины "родителя". При этом все поля учитываются, в отличии от 100%.

height: auto

Именно для height значение auto особой роли не играет, т.к. высота по умолчанию и есть auto.
Но для выравнивания элементов удобно использовать:

  • margin-left

  • margin-right

  • margin-top

  • margin-bottom

Для flexbox и grid разметки - auto работает как способ заполнения доступного пространства тем элементом или его атрибутом, которому оно приписано.

overflow-y: auto

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

top, bottom, left, right : auto

Позволяет прикреплять дочерний элемент к краям родительского, учитывая padding'и.

Ссылка на источник.

3. Позиционирование position

Бывает пяти видов:

  • static

  • relative

  • absolute

  • fixed

  • sticky

static
Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своем месте в документе. Свойства top, right, bottom, left и z-index не применяются к данному элементу. Это значение по умолчанию.

relative
Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно себя на основе значений top, right, bottom и left. Смещение не влияет на положение любых других элементов; таким образом, пространство, заданное для элемента в макете страницы, такое же, как если бы позиция была static. Это значение создает новый контекст наложения, когда значение z-index не auto. Его влияние на элементы table-*-group, table-row, table-column, table-cell и table-caption не определено.

absolute
Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создается пробела. Он расположен относительно его ближайшего относительно позиционированного предка, если таковой имеется; в противном случае он помещается относительно исходного содержащего блока. Его конечная позиция определяется значениями top, right, bottom, и left. Это значение создаёт новый контекст наложения, когда значение z-index не auto. Поля абсолютно позиционированных коробок не сворачиваются с другими полями.

fixed
Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создается пространство. Он позиционируется относительно исходного содержащего блока, установленного viewport, за исключением случаев, когда один из его предков имеет свойство transform, perspective, или filter, установленное на что-то иное, кроме none (см. CSS Transforms Spec), и в этом случае этот предок ведет себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с perspective и filter, способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями top, right, bottom и left. Это значение всегда создает новый контекст наложения. В печатных документах элемент помещается в одно и то же положение на каждой странице.

sticky
Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего прокручивающего предка и содержащего блока (ближайший родительский уровень блока), включая элементы, связанные с таблицей, на основе значений top, right, bottom, и left. Смещение не влияет на положение любых других элементов.
Это значение всегда создает новый контекст наложения. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при overflow равном hidden, scroll, auto или overlay), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению.

Вне форума

Сейчас в этой теме пользователей: 0, гостей: 1
[Bot] CCBot

Подвал форума

Под управлением FluxBB
Модифицировал Visman

[ Сгенерировано за 0.073 сек, 8 запросов выполнено - Использовано памяти: 2.19 Мбайт (Пик: 2.72 Мбайт) ]