Уложак-блок - ЦСС-трикови

Преглед садржаја:

Anonim

inset-blockје скраћено логичко својство ЦСС-а које поставља дужину померања елемента у смеру блока комбиновањем inset-block-startи inset-block-end. То је нека врста прогласи topи bottomосим њеног почетка и завршетка бодова одређује елемент је direction, text-orientationи writing-mode, као и другим логичким особинама.

Својство је део спецификације ЦСС логичких својстава и вредности 1, која је тренутно у статусу Едитор'с Драфт. То значи да се дефиниција и информације о њој могу мењати од сада до званичне препоруке.

.element ( inset-block: 50px 15%; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )

Тако, на пример, ако је режим писања подешен на horizontal-lrна inset-blockимовину ће деловати као подешавање topи bottomи поставити елемент је офсет од доње ивице. Чак је потребно да наведете експлицитно positionза исти елемент да би он ступио на снагу, баш као и својства физичког померања.

Али промените елементе writing-modeу нешто слично vertical-lrи „доња“ ивица се ротира у вертикалном смеру, понашајући се више као leftи rightсвојства.

Синтакса

inset-block: ;
  • Почетна вредност: auto
  • Односи се на: позиционирани елементи
  • Наследио: не
  • Проценти: као за одговарајуће физичко својство
  • Израчуната вредност: иста као одговарајућа topи bottomсвојства
  • Тип анимације: према израчунатој врсти вредности

Вредности

inset-blockузима дужинску вредност и подржава глобалне кључне речи. Његова подразумевана вредност је auto.

/* Length values */ inset-block: 50px; inset-block: 4em; inset-block: 3.5rem inset-block: 25vh; /* Percentage values */ inset-block: 50%; /* Keyword values */ inset-block: auto; /* initial value */ /* Global values */ inset-block: initial inset-block: inherit; inset-block: unset;

Подршка прегледача

ИЕ Ивица Фирефок Хром Сафари Опера
Не Не 63+ Не Не Не
Андроид Цхроме Андроид Фирефок Андроид претраживач иОС Сафари опера мини
Не 79+ Не Не Не
Извор: каниус

Демо

Додатна литература

  • Спецификација логичких својстава и вредности ЦСС нивоа 1 (Нацрт уредника)
  • МДН документација
  • Разумевање логичких својстава и вредности (Смасхинг Магазине)
  • ЦСС логичка својства (Адриан Роселли)
  • Двосмерна хоризонтална правила у ЦСС-у (Хуссеин Ал Хаммад)