CSS-LOGICAL
block-size
block-size – Определяет размер содержимого элемента типа блока в соответствии с направлением блока, которое зависит от свойства режима записи.
Если блок расположен горизонтально, его размер будет изменяться только по вертикали и по горизонтали в зависимости от ширины экрана браузера.
Если блок расположен вертикально, его размер будет изменяться только по горизонтали и вертикали в зависимости от высоты экрана браузера.
Краткая информация:
| Նախասահմանված արժեքը | auto |
| Ժառանգվում են | Нет |
| Կիրառվում են | Применяется ко всем элементам. |
| Ենթարկվում է անիմացիայի | Да |
Применимые значения:
auto – автоматически устанавливает размер в зависимости от типа элемента и его содержимого.
div {
background: orange;
padding: 10px;
writing-mode: horizontal-tb;
block-size: 170px;
}
div {
background: orange;
padding: 10px;
writing-mode: vertical-lr;
block-size: 170px;
}
div {
background: orange;
padding: 10px;
writing-mode: vertical-rl;
block-size: 170px;
}
min-block-size max-block-size
min-block-size определяет минимальный размер блока, который может увеличиваться в зависимости от размера текста.
max-block-size - определяет максимальный размер блока, который можно уменьшить в зависимости от размера текста.
Краткая информация:
| Նախասահմանված արժեքը | 0 |
| Ժառանգվում են | Нет |
| Կիրառվում են | Применяется ко всем элементам. |
| Ենթարկվում է անիմացիայի | Да |
div {
background: orange;
padding: 10px;
writing-mode: horizontal-tb;
min-block-size: 100px;
}
div {
background: orange;
padding: 10px;
writing-mode: horizontal-tb;
max-block-size: 100px;
}
inline-size
inline-size -выполняет действие, противоположное размеру блока: определяет размер в соответствии с направлением линий.
Краткая информация:
| Նախասահմանված արժեքը | auto |
| Ժառանգվում են | Нет |
| Կիրառվում են | Применяется ко всем элементам. |
| Ենթարկվում է անիմացիայի | Да |
Применимые значения:
auto – автоматически устанавливает размер в зависимости от типа элемента и его содержимого.
div {
background: orange;
padding: 10px;
writing-mode: horizontal-tb;
inline-size: 300px;
}
div {
background: orange;
padding: 10px;
writing-mode: vertical-lr;
inline-size: 300px;
}
div {
background: orange;
padding: 10px;
writing-mode: vertical-rl;
inline-size: 300px;
}
min-inline-size max-inline-size
min-inline-size устанавливает минимальное значение длины текста, которое можно увеличить.
max-inline-size устанавливает максимальный размер длины текста, который можно уменьшить.
Краткая информация:
| Նախասահմանված արժեքը | 0 |
| Ժառանգվում են | Нет |
| Կիրառվում են | Применяется ко всем элементам. |
| Ենթարկվում է անիմացիայի | Да |
div {
background: orange;
padding: 10px;
writing-mode: horizontal-tb;
min-inline-size: 700px;
}
div {
background: orange;
padding: 10px;
writing-mode: horizontal-tb;
max-inline-size: 700px;
}
padding-block padding-block-start padding-block-end
padding-blockопределяет верхнее и нижнее внутреннее заполнение содержимого элемента типа блока в соответствии с направлением блока, которое зависит от свойства режима записи.
Если блок расположен горизонтально, то заряд будет установлен только вертикально.
Если блок установлен вертикально, он будет определять заряд только горизонтально.
Они тоже действуют по той же логике padding-block-start и: padding-block-end свойства: первая плата только за верх, вторая за низ.
Краткая информация:
| Նախասահմանված արժեքը | 0 |
| Ժառանգվում են | Нет |
| Կիրառվում են | Применяется ко всем элементам. |
| Ենթարկվում է անիմացիայի | Да |
Применимые значения:
Если используется %, его значение будет рассчитываться в соответствии с шириной родительского элемента.
В padding-блоке допускается использовать два значения, разделенные пробелом.
Установим первое значение padding-block-start, что относится к верхней, второй padding-block-end, что относится к низу.
div {
background: #fc3;
border-block-start: 3px solid #000;
border-block-end: 3px solid #000;
padding: 10px;
writing-mode: horizontal-tb;
padding-block: 5%;
}
div {
background: #fc3;
border-block-start: 3px solid #000;
border-block-end: 3px solid #000;
padding: 10px;
writing-mode: vertical-lr;
padding-block: 5%;
}
div {
background: #fc3;
border-block-start: 3px solid #000;
border-block-end: 3px solid #000;
padding: 10px;
writing-mode: vertical-rl;
padding-block: 5%;
}
padding-inline padding-inline-start padding-inline-end
padding-inline Свойство действует наоборот, устанавливая внутреннее дополнение для левой и правой сторон строки в соответствии с направлением блока, которое зависит от свойства режима записи.
Если блок расположен горизонтально, он будет иметь только горизонтальный размер.
Если блок расположен вертикально, его размер будет изменяться только по вертикали.
Они тоже действуют по той же логике padding-inline-start и: padding-inline-end особенность: первая зарядка только за левую сторону, вторая за правую.
Определяется сторона внутреннего заряда writing-mode и: direction характеристики.
Краткая информация:
| Նախասահմանված արժեքը | 0 |
| Ժառանգվում են | Нет |
| Կիրառվում են | Применяется ко всем элементам. |
| Ենթարկվում է անիմացիայի | Да |
Применимые значения:
Если используется %, его значение будет рассчитываться в соответствии с шириной родительского элемента.
В дополнении-inline разрешено использовать два значения, отделенные друг от друга двоеточием.
Установим первое значение padding-inline-start, что относится к левой стороне, второй padding-inline-end, что относится к правой стороне.
div {
background: #fc3;
border-block-start: 3px solid #000;
border-block-end: 3px solid #000;
padding: 10px;
writing-mode: horizontal-tb;
padding-inline: 7%;
}
div {
background: #fc3;
border-block-start: 3px solid #000;
border-block-end: 3px solid #000;
padding: 10px;
writing-mode: vertical-lr;
padding-inline: 7%;
}
div {
background: #fc3;
border-block-start: 3px solid #000;
border-block-end: 3px solid #000;
padding: 10px;
writing-mode: vertical-rl;
padding-inline: 7%;
}
margin-block margin-block-start margin-block-end
margin-blockопределяет верхнюю и нижнюю внешнюю границу элемента блочного типа в соответствии с направлением блока, которое зависит от свойств режима записи, направления и ориентации текста.
Если блок расположен горизонтально, его размер будет изменяться только по вертикали.
Если блок расположен вертикально, его размер будет изменяться только по горизонтали.
Они действуют по той же логике margin-block-start и: margin-block-end свойства сначала только вверху граница, второй - нижний.
Краткая информация:
| Նախասահմանված արժեքը | 0 |
| Ժառանգվում են | Нет |
| Կիրառվում են | Применяется ко всем элементам. |
| Ենթարկվում է անիմացիայի | Да |
Применимые значения:
Если используется %, его значение будет рассчитываться в соответствии с шириной родительского элемента.
в маржин-блоке допускается использование двух значений, разделенных запятой.
Установим первое значение margin-block-start, который относится к вершине, а второй к margin-block-end, что относится к низу.
div {
background: orange;
border-block-start: 3px solid #000;
border-block-end: 3px solid #000;
padding: 10px;
writing-mode: horizontal-tb;
margin-block: 5%;
}
div {
background: orange;
border-block-start: 3px solid #000;
border-block-end: 3px solid #000;
padding: 10px;
writing-mode: vertical-lr;
margin-block: 5%;
}
div {
background: orange;
border-block-start: 3px solid #000;
border-block-end: 3px solid #000;
padding: 10px;
writing-mode: vertical-rl;
margin-block: 5%;
}
margin-inline margin-inline-start margin-inline-end
margin-inline Свойство делает противоположность свойству поля-блока: оно определяет внешнюю границу для левой и правой сторон строк в соответствии с направлением блока, которое зависит от свойства режима записи.
Если блок расположен горизонтально, он будет иметь только горизонтальный размер.
Если блок расположен вертикально, его размер будет изменяться только по вертикали.
Они тоже действуют по той же логике margin-inline-start и: margin-inline-end свойства: первый — только граница с левой стороны, второй — с правой.
Краткая информация:
| Նախասահմանված արժեքը | 0 |
| Ժառանգվում են | Нет |
| Կիրառվում են | Применяется ко всем элементам. |
| Ենթարկվում է անիմացիայի | Да |
Применимые значения:
Если используется %, его значение будет рассчитываться в соответствии с шириной родительского элемента.
В Margin-inline допускается использование двух значений, разделенных двоеточием.
Установим первое значение margin-inline-start, что относится к левой стороне, а второй margin-inline-end, что относится к правой стороне.
div {
background: orange;
border-block-start: 3px solid #000;
border-block-end: 3px solid #000;
padding: 10px;
writing-mode: horizontal-tb;
margin-inline: 5%;
}
div {
background: orange;
border-block-start: 3px solid #000;
border-block-end: 3px solid #000;
padding: 10px;
writing-mode: vertical-lr;
margin-inline: 5%;
}
div {
background: orange;
border-block-start: 3px solid #000;
border-block-end: 3px solid #000;
padding: 10px;
writing-mode: vertical-rl;
margin-inline: 5%;
}
border-block border-block-width border-block-style border-block-color border-block-start border-block-start-width border-block-start-style border-block-start-color border-block-end border-block-end-width border-block-end-style border-block-end-color
border-blockопределяет границу верхней и нижней сторон элемента типа блока в соответствии с направлением блока, которое зависит от свойств режима письма, направления и ориентации текста.
Если блок расположен горизонтально, граница будет только горизонтальной.
Если блок расположен вертикально, линия границы будет только вертикальной.
Они тоже действуют по той же логике border-block-start и: border-block-end свойства: первое для верхней границы, второе для нижней.
Краткая информация:
| Նախասահմանված արժեքը | здесь ничего нет |
| Ժառանգվում են | Нет |
| Կիրառվում են | Применяется ко всем элементам. |
| Ենթարկվում է անիմացիայի | Да |
Применимые значения:
Значение определяется одной из единиц измерения, за исключением От 1ТП3Т.
В border-block разрешены три значения: border-width такой же, как border-block-width свойство, стиль границы такой же, как border-block-style цвет свойства и границы такие же, как border-block-color свойство.
div {
width: 500px;
height: 250px;
background: orange;
border-block: 10px dotted black;
padding: 10px;
writing-mode: horizontal-tb;
}
div {
width: 300px;
height: 250px;
background: orange;
border-block: 10px dotted black;
padding: 20px;
writing-mode: verticla-lr;
}
div {
width: 300px;
height: 250px;
background: orange;
border-block: 10px dotted black;
padding: 20px;
writing-mode: verticla-rl;
}
border-block-start и: border-block-end также определяются тремя значениями:
border-block-start–width,
border-block-start-style,
border-block-start-color,
а также
border-block-end–width,
border-block-end-style,
border-block-end-color։
Все, что касается border-block, также относится ко всему этому. См. также: раздел border-end-end-radius в CSS-BORDER.
border-inline border-inline-width border-inline-style border-inline-color border-inline-start border-inline-start-width border-inline-start-style border-inline-start-color border-inline-end border-inline-end-width border-inline-end-style border-inline-end-color
border-inline Свойство делает противоположность border-block, устанавливая границу для левой и правой сторон в соответствии с направлением линий; направление зависит от свойства режима записи.
Если блок расположен горизонтально, граница будет только вертикальной.
Если блок расположен вертикально, граница будет только горизонтальной.
Они тоже действуют по той же логике border-inline-start и: border-inline-end свойства, первое для левой стороны, второе для правой.
Краткая информация:
| Նախասահմանված արժեքը | здесь ничего нет |
| Ժառանգվում են | Нет |
| Կիրառվում են | Применяется ко всем элементам. |
| Ենթարկվում է անիմացիայի | Да |
Применимые значения:
Значение определяется одной из единиц измерения, за исключением От 1ТП3Т.
border-inlineв разрешены три значения: размер границы такой же, как border-inline-width свойство, стиль границы такой же, как border-inline-style цвет свойства и границы такие же, как border-inline-color свойство.
div {
width: 500px;
height: 250px;
background: orange;
border-inline: 10px dotted black;
padding: 20px;
writing-mode: horizontal-tb;
}
div {
width: 300px;
height: 250px;
background: orange;
border-inline: 10px dotted black;
padding: 20px;
writing-mode: vertical-lr;
}
div {
width: 300px;
height: 250px;
background: orange;
border-inline: 10px dotted black;
padding: 20px;
writing-mode: vertical-rl;
}
border-inline-start и: border-inline-end также определяются тремя значениями:
border-inline-start-width,
border-inline-start-style,
border-inline-start-color,
а также
border-inline-end-width,
border-inline-end-style,
border-inline-end-color։
Все, что касается border-inline, также относится ко всему этому. См. также: раздел border-end-end-radius в CSS-BORDER.
inset inset-block inset-block-start inset-block-end inset-inline inset-inline-start inset-inline-end
inset- — универсальное свойство, в котором определены четыре значения свойства: top, right, bottom, left :
inset-blockтакже является универсальным свойством, в котором установлены два значения свойства: inset-block-start(равно top свойство) inset-block-end(равно bottom свойство) ։
inset-inline- также является универсальным свойством, в котором установлены два значения свойства: inset-inline-start(равно left свойство) inset-inline-end(равно right свойство)։
...start, ...end для свойств tЯ также в разделе border-end-end-radius CSS-BORDER.
Краткая информация:
| Նախասահմանված արժեքը | auto |
| Ժառանգվում են | Нет |
| Կիրառվում են | Применяется ко всем элементам, для которых установлено position параметр. |
| Ենթարկվում է անիմացիայի | Да |
inset-block - определяет положение элемента блочного типа сверху (сверху) и снизу (снизу), согласно направлению блока, которое зависит от свойства write-mode.
Если блок расположен горизонтально, положение блока будет определяться верхом и низом.
Если блок расположен вертикально, положение блока будет определяться слева и справа.
inset-inline – Определяет положение элемента блочного типа слева и справа в соответствии с направлением блока, которое зависит от свойства режима записи.
Если блок расположен горизонтально, положение блока будет определяться слева и справа.
Если блок расположен вертикально, положение блока будет определяться верхом и низом.
* {
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #6d7173;
margin: 0;
min-height: 100vh;
font-family: Consolas, Monaco, "Andale Mono", monospace;
}
.container {
position: relative;
background-color: #363f45;
width: 580px;
height: 580px;
writing-mode: horizontal-lr;
border: 10px solid orange;
}
.box {
/* այն էլեմենտն է, որը պետք է դիրքավորվի */
padding: 1em;
font-family: cursive;
line-height: 1.9;
border-radius: 2px;
color: #fff;
position: absolute;
background-color: #048feb;
inset: 100px 150px 200px 250px;
}
.line {
position: absolute;
margin: auto;
}
.inset-block-start {
/* վերաբերում է վերևի գծիկին */
block-size: 100px;
inline-size: 0;
border-inline-start: 2px dashed #fff;
inset-block-start: auto;
inset-block-end: 100%;
inset-inline-start: 0;
inset-inline-end: 0;
}
.inset-inline-end {
/* վերաբերում է աջ գծիկին */
block-size: 0;
inline-size: 150px;
border-block-start: 2px dashed #fff;
inset-block-start: 0;
inset-block-end: 0;
inset-inline-start: 100%;
inset-inline-end: auto;
}
.inset-block-end {
/* վերաբերում է ներքևի գծիկին */
block-size: 200px;
inline-size: 0;
border-inline-start: 2px dashed #fff;
inset-block-start: 100%;
inset-block-end: auto;
inset-inline-start: 0;
inset-inline-end: 0;
}
.inset-inline-start {
/* վերաբերում է ձախ գծիկին */
block-size: 0;
inline-size: 250px;
border-block-start: 2px dashed #fff;
inset-block-start: 0;
inset-block-end: 0;
inset-inline-start: auto;
inset-inline-end: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
</head>
<body>
<div class="container">
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia egestas turpis quis tristique. Крас аликет.
<div class="line inset-block-start"></div>
<div class="line inset-inline-end"></div>
<div class="line inset-block-end"></div>
<div class="line inset-inline-start"></div>
</div>
</div>
</body>
</html>
Russian 
Armenian