Left bottom right top: English Phrase: the (top / bottom) (right / left) corner

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

Этот еще далек от поддержки: https://github.com/w3c/csswg-drafts/issues/1282

Зарегистрируйтесь или войдите

Зарегистрироваться через Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html - Что означает "сверху: 0; слева: 0; снизу: 0; справа: 0;" иметь в виду?

спросил 7 лет, 11 месяцев назад

Изменено 1 год, 8 месяцев назад

Просмотрено 66 тысяч раз

Читаю гайд с этого сайта о технике центрирования элементов.

Я прочитал код CSS,

  .Абсолютный центр {
  маржа: авто;
  положение: абсолютное;
  сверху: 0; слева: 0; внизу: 0; справа: 0;
}
 

И объяснение я тоже читал.

Но чего я не понимаю, так это части, объясняющей "верх: 0; слева: 0; внизу: 0; справа: 0;".

Там написано

Настройка сверху: 0; слева: 0; внизу: 0; справа: 0; дает браузеру новую ограничивающую рамку для блока. В этот момент блок заполнит все доступное пространство в родительском смещении, которое является телом или position: relative; контейнер. Developer.mozilla.org: для абсолютно позиционированных элементов свойства top, right, bottom и left определяют смещения от края содержащего элемент блока (относительно которого позиционируется элемент).

Что это значит? Ограничительная рамка? Заполнить все доступное пространство?

Как "сверху: 0; слева: 0; снизу: 0; справа: 0;" работай? нужно ли брать 4 стороны коробки и растягивать их, чтобы заполнить контейнер? Так работают ценности?

Что на самом деле происходит, когда я устанавливаю "сверху: 0; слева: 0; снизу: 0; справа: 0;"?

Я совершенно запутался в этом объяснении и хотел бы, чтобы кто-нибудь перефразировал, переформулировал и объяснил мне его более простым и понятным способом.

Спасибо.

• HTML
• CSS
• CSS-позиция

1

Что происходит, когда вы используете слева и справа (или сверху и снизу ) в то же время , это сбивает с толку, потому что спецификация [6.3. Абсолютное позиционирование] говорит нам, что:

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

Итак, как установка позиции может повлиять на размер элемента? Причина кроется в том, как вычисляется ширина, которая скрыта в другом разделе спецификации, [8.1. Ширина абсолютного или фиксированного позиционирования незаменяемых элементов].

Если вы укажете как left , так и right , а ширина вашего элемента равна , а не auto , то то, что вы говорите, на самом деле не имеет смысла, и right игнорируется (все операторы одинаково применимы к top/bottom/height):

Если ни один из параметров слева/справа/ширина не является автоматическим. .. значения чрезмерно ограничены, игнорируйте значение для левого (в случае, если свойство direction содержащего блок - rtl) или вправо (в случае, если направление - ltr) и решить для этого стоимость.

Но если для вашего элемента не задана ширина или ширина (по умолчанию) auto , это правило срабатывает:

Если ширина задана автоматически, а левое и правое не заданы автоматически, найдите ширину.

Наконец, приведено уравнение, определяющее значения этих элементов:

'слева' + 'поле-слева' + 'граница-слева-ширина' + 'отступ-слева' + 'ширина' + 'отступ-справа' + 'правая-ширина границы' + 'поле-справа' + 'right' = ширина содержащего блока

Мы можем ясно видеть, что после подстановки наших значений для левого и правого и других, ширина является нерешенной (и неограниченной) переменной, которая окажется равной ширина содержащего бокса - левый - правый (более или менее) или, говоря иначе: "заполнить пространство между смещениями".

0

Вы можете сделать 100% ширины и 100% высоты, используя top: 0; слева: 0; внизу: 0; справа: 0;

Пример: у вас есть один div, для которого нет фиксированной ширины и высоты. в этом случае вы можете применить этот стиль и сделать 100% ширину и высоту.

 раздел {
 положение: абсолютное;
 сверху: 0;
 справа: 0;
 внизу: 0;
 слева: 0;
}
 

JSFIDDLE ДЕМО

3

Позиционирование div или элемента absolute как показано ниже. Фрагмент css расширяет элемент, чтобы взять полную ширину и высоту родителя. Если родительский элемент является элементом полной страницы, стилизованный элемент займет всю страницу. Если есть больше контента, доступного ниже или выше, они будут видны так, как должны.

 позиция: абсолютная;
    сверху: 0;
    слева: 0;
    внизу: 0;
    справа: 0;
 

Позиционирование как фиксированное , с другой стороны, делает его полноэкранным.