Определение поля верхнее правое нижнее левое: Параметры страницы

Практикуйте свои знания

Какой фрагмент CSS обычно используется для центрирования веб-сайта по горизонтали?

поле: центр; поле: 0 авто; поле: авто 0;

Успех!

Неверно! Ты не правильно понял!

Коробчатая модель

предыдущая следующий содержание характеристики показатель

Содержание

• 8.1 Размеры коробки
• 8.2 Пример полей, отступов и границ
• 8.3 Свойства поля: «поле-верх», «поле-справа», «поле-снизу», «поле-лево» и «маржа»
  • 8.3.1 Сворачивающиеся поля
• 8.4 Свойства заполнения: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' и 'padding'
• 8.5 Свойства границ
  • 8.5.1 Ширина границы: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' и 'border-width'
  • 8. 5.2 Цвет границы: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color' и 'border-color'
  • 8.5.3 Стиль границы: «стиль границы вверху», «стиль границы справа», «стиль границы внизу», «стиль границы слева» и «стиль границы»
  • 8.5.4 Сокращенные свойства границы: «граница-верх», «граница-справа», «граница-снизу», «граница-слева» и «граница»
• 8.6 Блочная модель для встроенных элементов в двунаправленном контексте

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

Каждая коробка имеет область содержимого (например, текст, изображение и т. д.) и необязательный окружающий прокладка , граница и полей областей; размер каждой области определяется свойствами, определенными ниже. Последующий на диаграмме показано, как эти области соотносятся, и терминология, используемая для обозначения к частям полей, границ и отступов:

   [D]

Поля, границы и отступы можно разделить на верхнее, правое, нижний и левый сегменты (например, на диаграмме «LM» для левого поля, «RP» для заполнения справа, «TB» для верхней границы и т. д.).

Периметр каждой из четырех областей (содержимое, отступы, граница, и поле) называется «краем», поэтому каждый блок имеет четыре края:

край содержимого или внутренний край

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

обивочная кромка

Край отступа окружает отступ блока. Если прокладка имеет ширину 0, край заполнения совпадает с краем содержимого. Четыре края заполнения определяют коробка набивочная коробка .

край

Край границы окружает границу блока. Если граница имеет ширину 0, край границы совпадает с краем заполнения. Четыре края границы определяют границу блока. коробка .

край поля или внешний край

Край поля окружает поле блока. Если маржа имеет ширину 0, край поля совпадает с краем границы. Четыре края поля определяют поле 90 117 поля. коробка .

Каждое ребро можно разделить на верхнее, правое, нижнее и левое край.

Размеры области содержимого коробки — ширина содержимого и высота содержимого — зависят от нескольких факторов: является ли элемент, порождающий коробка имеет ширину или свойство "высота" установить, содержит ли поле текст или другие поля, независимо от того, содержит ли поле коробка - стол и т.д. Ширина и высота коробки обсуждается в главе о визуальном форматировании детали модели.

Стиль фона содержимого, отступов и границ области поле задается свойством 'фон' генерирующий элемент. Фон полей всегда прозрачен.

В этом примере показано, как поля, отступы и границы взаимодействовать. Пример HTML-документа:

  <ГОЛОВА>
    
    <СТИЛЬ type="text/css">
      УЛ {
        фон: желтый;
        поля: 12px 12px 12px 12px;
        отступ: 3px 3px 3px 3px;
                                     /* Границы не установлены */
      }
      ЛИ {
        белый цвет; /* цвет текста белый */
        фон: синий; /* Содержимое, отступы будут синими */
        поля: 12px 12px 12px 12px;
        отступ: 12px 0px 12px 12px; /* Обратите внимание на отступ справа 0px */
        list-style: none /* без глифов перед элементом списка */
                                     /* Границы не установлены */
      }
      LI. withborder {
        стиль границы: пунктир;
        ширина границы: средняя; /* задаем ширину границы со всех сторон */
        цвет бордюра: салатовый;
      }
    
  
  <ТЕЛО>
    <УЛ>
      
Первый элемент списка
      
Второй элемент списка
           немного дольше, чтобы проиллюстрировать упаковку.
    
  

 

приводит к дереву документов с (среди прочих отношений) элемент UL, который имеет два LI дети.

На первой из следующих диаграмм показано, что этот пример будет производить. Второй иллюстрирует взаимосвязь между поля, отступы и границы элементов UL и его элементы детей ЛИ. (Изображение не в масштабе.)

   [D]

Обратите внимание, что:

• Ширина содержимого для каждого блока LI рассчитывается сверху вниз; содержащий блок для каждого блока LI устанавливается элементом UL.
• Высота поля поля каждого блока LI зависит от высоты его содержимого, а также от высоты верха и низа отступы, границы и поля. Обратите внимание, что вертикальные поля между Ящики LI разрушаются.
• Правое заполнение полей LI имеет нулевую ширину (свойство «заполнение»). эффект виден на втором рисунке.
• Поля блоков LI прозрачны — поля всегда прозрачный — поэтому цвет фона (желтый) заполнения UL и области содержимого просвечивают сквозь них.
• Второй элемент LI определяет пунктирную границу свойство «пограничный стиль»).

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

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

<длина>

Задает фиксированную ширину.

<процент>

Процент рассчитывается относительно ширины сгенерированного поля содержащий блок. Обратите внимание, что это верно и для полей «верхнее поле» и «нижнее поле». Если ширина содержащего блока зависит от этого элемента, то результирующий макет не определен в CSS 2.1.

авто

См. раздел о расчете ширины и поля для поведения.

Допускаются отрицательные значения свойств полей, но могут ограничения, зависящие от реализации.

«верхнее поле» , «нижнее поле»

Эти свойства не влияют на незаменяемые встроенные элементы.

'поле-справа' , 'поле-лево'

Эти свойства задают верхнее, правое, нижнее и левое поля коробка.

h2 {верхнее поле: 2em}
 

'маржа'

Свойство «маржа» сокращенное свойство для установки полей «margin-top», «margin-right», «margin-bottom» и «margin-left» в одном и том же месте в таблица стилей.

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

body { margin: 2em } /* все поля равны 2em */
body { margin: 1em 2em } /* верхнее и нижнее = 1em, правое и левое = 2em */
body { margin: 1em 2em 3em } /* сверху=1em, справа=2em, снизу=3em, слева=2em */
 

Последнее правило приведенного выше примера эквивалентно примеру ниже:

тело {
  поле сверху: 1em;
  поле-справа: 2em;
  нижняя граница: 3em;
  поле слева: 2em; /* скопировано с противоположной стороны (справа) */
}
 

8.3.1 Сворачивающиеся поля

В данной спецификации выражение сворачивающиеся поля означает что прилегающие поля (без непустого содержимого, отступов или граничных областей или зазор разделяет их) два или более ящика (которые могут быть рядом друг с другом или вложенными) объединяются для формирования единой маржи.

В CSS 2.1 горизонтальные поля никогда не схлопываются.

Вертикальные поля могут схлопываться между определенными блоками:

• Два или более смежных вертикальных поля блоков уровня блока в обычном потоке схлопываются. результирующая ширина поля равна максимальной ширине соседних полей. В случае отрицательных полей максимальное из абсолютных значений отрицательного смежные поля вычитаются из максимума положительного прилегающие поля. Если нет положительных полей, абсолютный максимум отрицательных смежных полей вычитается из нуля. Примечание. Смежные блоки могут создаваться элементы, не являющиеся родственными братьями и сестрами или предками.
• Вертикальные поля между плавающим блоком и любым другим блоком не коллапс (даже между поплавком и его дочерними элементами).
• Вертикальные поля элементов, устанавливающие новое форматирование блока контексты (такие как поплавки и элементы с «переполнением», отличным от «видимого») не рухнуть со своими втекающими детьми.
• Поля абсолютно позиционированные ящики не рушатся (даже если их приходящие дети).
• Поля встроенных блоков не рушатся (даже со своими дочерними элементами).
• Если верхнее и нижнее поля блока соприкасаются, то возможно, что поля рухнут через него. В этом случае положение элемента зависит от его связи с другим элементы, поля которых свернуты.
  • Если поля элемента свернуты вместе с верхней частью его родителя margin, верхняя граница поля определяется как такая же, как родители.
  • В противном случае либо родитель элемента не участвует в схлопывание поля или задействовано только нижнее поле родителя. положение верхнего края элемента такое же, как и у было, если элемент имел ненулевую нижнюю границу.

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

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

• Поля блока корневого элемента не схлопываются.

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

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

Нижнее поле блока входящего потока с «высотой» of 'auto' примыкает к нижней части своего последнего дочернего элемента на уровне блока в потоке margin, если элемент не имеет нижнего заполнения или границы.

Собственные поля элемента являются смежными, если свойство 'min-height' равно нулю, и у него нет ни верхней, ни нижней границы, ни верхнего или нижнего заполнения, и он имеет «высота» либо 0, либо «авто», и он не содержит строчного бокса, а все его входящие дочерние элементы поля (если есть) примыкают.

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

Свертывание основано на используемом значении «заполнения», «поля» и «границы» (т. е. после разрешения любого проценты). Свернутая маржа рассчитывается по использованному значению различных полей.

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

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

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

<длина>

Задает фиксированную ширину.

<процент>

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

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

'отступ сверху' , 'отступ справа' , 'отступ снизу' , 'отступ слева'

Эти свойства задают верхний, правый, нижний и левый отступы коробка.

блок-цитата { padding-top: 0.3em }
 

'заполнение'

Свойство padding сокращенное свойство для установки 'padding-top', 'padding-right', 'padding-bottom' и 'padding-left' в одном и том же месте. в таблице стилей.

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

Цвет поверхности или изображение области заполнения задается с помощью свойство «фон»:

ч2 {
  фон: белый;
  прокладка: 1em 2em;
}
 

В приведенном выше примере указано вертикальное заполнение «1em» («padding-top» и «padding-bottom») и «2em» горизонтальное заполнение («заполнение справа» и «заполнение слева»). Единица измерения родственник к размеру шрифта элемента: '1em' равно размеру используемый шрифт.

Свойства границы определяют ширину, цвет и стиль области границы блока. Эти свойства применяются ко всем элементам.

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

8.5.1 Ширина границы: 'border-top-width', 'border-right-width', 'border-bottom-width', 'граница-левая-ширина', и 'border-width'

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

тонкий

Тонкая кайма.

средний

Средний бордюр.

толстый

Толстая кайма.

<длина>

Толщина границы имеет явное значение. Явный Ширина границы не может быть отрицательной.

Интерпретация первых трех значений зависит от пользователя агент. Однако должны выполняться следующие соотношения:

«тонкий» <= «средний» <= «толстый».

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

'border-top-width' , 'border-right-width' , 'border-bottom-width' , 'border-left-width'

Эти свойства задают ширину верхней, правой, нижней, и левая граница коробки.

'ширина границы'

Это свойство является сокращенным свойством для настройки 'ширина верхней границы', 'правая граница', 'ширина нижней границы', и 'граница-левая-ширина' в то же самое место в таблице стилей.

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

В приведенных ниже примерах в комментариях указана результирующая ширина. верхней, правой, нижней и левой границ:

h2 { border-width: thin } /* тонкий тонкий тонкий тонкий */
h2 { border-width: тонкий толстый } /* тонкий толстый тонкий толстый */
h2 { border-width: тонкий толстый средний } /* тонкий толстый средний толстый */
 

8.5.2 Цвет рамки: 'граница-верхний цвет', 'правый цвет границы', 'граница-нижний-цвет', 'граница-левый-цвет', и 'цвет границы'

Свойства цвета границы определяют цвет границы блока.

'цвет верхней границы' , 'правая граница' , 'нижняя граница' , 'левая граница'

'цвет границы'

Цвет границы свойство задает цвет четырех границ. Значения имеют следующие значения:

<цвет>

Указывает значение цвета.

прозрачный

Граница прозрачная (хотя может иметь ширину).

Цвет границы свойство может иметь от одного до четырех значений компонентов, а значения устанавливаются с разных сторон, как и для «border-width».

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

В этом примере граница будет сплошной черной линией.

п {
  черный цвет;
  фон: белый;
  граница: сплошная;
}
 

8.5.3 Стиль границы: 'бордюрный стиль', 'граница справа', 'граница-снизу-стиль', 'граница-левый стиль', и 'border-style'

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

нет

Без рамки; вычисленная ширина границы равна нулю.

скрытый

То же, что и «нет», за исключением пограничного конфликта разрешение элементов таблицы.

с точками

Граница представляет собой набор точек.

пунктир

Граница представляет собой серию коротких отрезков линии.

цельный

Граница представляет собой один сегмент линии.

двойной

Граница представляет собой две сплошные линии. Сумма две линии и пространство между ними равно значению 'border-width'.

канавка

Граница выглядит так, как будто она вырезана в холст.

ребро

Противоположность канавке: граница выглядит так, как будто он выходит из холста.

вкладыш

Граница придает коробке вид он был встроен в холст.

начало

Противоположное слову «вставка»: граница делает коробку похожей на это выходило из холста.

Все границы рисуются поверх фона коробки. Цвет границы, нарисованные для значений «канавка», «гребень», «вставка» и «начало» зависит от границы элемента свойства цвета, но UA могут выбрать свой собственный алгоритм для рассчитать фактические используемые цвета. Например, если 'border-color' имеет значение «серебро», тогда ПА мог бы использовать градиент цветов от от белого до темно-серого, чтобы обозначить наклонную границу.

'бордюр сверху' , 'бордюр справа' , 'стиль границы снизу' , 'стиль границы слева'

'бордюрный стиль'

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

# xy34 { стиль границы: сплошная точка }
 

В приведенном выше примере горизонтальные границы будут «сплошными» и вертикальные границы будут «пунктирными».

Поскольку начальное значение стилей границ — «нет», границы отсутствуют. будет виден, если не установлен стиль границы.

8.5.4 Сокращенные свойства границ: 'граница-верх', 'правая граница', 'граница-дно', «граница-левая» и «граница»

'граница вверху' , 'граница справа' , 'граница внизу' , 'граница слева'

Это сокращенное свойство для установки ширины, стиля и цвет верхней, правой, нижней и левой границы блока.

h2 { нижняя граница: толстый сплошной красный цвет }
 

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

h2 {нижняя граница: толстая сплошная}
 

'граница'

Собственность «граница» сокращенное свойство для установки одинаковой ширины, цвета и стиля для все четыре границы коробки. В отличие от сокращенных свойств «margin» и «padding», свойство «border» не может устанавливать разные значения. значения на четырех границах. Для этого одну или несколько других границ необходимо использовать свойства.

Например, первое правило ниже эквивалентен набору из четырех правил, показанных после него:

p {граница: сплошная красная}
п {
  верхняя граница: сплошной красный;
  граница справа: сплошной красный;
  нижняя граница: сплошной красный;
  граница слева: сплошной красный
}
 

Так как свойства частично перекрываются функциональность, порядок указания правил важный.

Рассмотрим этот пример:

цитата {
  граница: сплошная красная;
  граница слева: двойная;
  черный цвет;
}
 

В приведенном выше примере цвет левой границы черный, в то время как другие границы красные. Это связано с настройкой 'border-left' ширина, стиль и цвет. Поскольку значение цвета не задается «пограничная левая» собственность, это будет взято из "цвета" имущество.