CSS-LOGICAL
block-size
block-size – Սահմանում է բլոկ տեսակի էլեմենտի պարունակության համար նախատեսված չափ, բլոկի ուղղությանը համապատասխան, որը կախված է writing-mode հատկությունից։
Եթե բլոկը տեղադրված է հորիզոնական, չափ կսահմանվի միայն ուղղահայացի համար, իսկ հորիզոնականը՝ ըստ բրաուզերի էկրանի լայնության։
Եթե բլոկը տեղադրված է ուղղահայաց, չափ կսահմանավի միայն հորիզոնական ուղղույամբ, իսկ ուղղահայացը՝ ըստ բրաուզերի էկրանի բարձրության։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | 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 -կատարում է block-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-ը սահմանում է բլոկ տեսակի էլեմենտի պարունակության վերևի և ներքևի ներքին լիցքը` ըստ բլոկի ուղղության, որը կախված է writing-mode հատկությունից։
Եթե բլոկը տեղադրված է հորիզոնական, լիցք կսահմանվի միայն ուղղահայաց։
Եթե բլոկը տեղադրված է ուղղահայաց, լիցք կսահմանավի միայն հորիզոնական։
Այս նույն տրամաբանությամբ են գործում նաև padding-block-start և padding-block-end հատկությունները՝ առաջինը լիցք միայն վերևի համար, երկրորդը՝ ներքևի։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | 0 |
| Ժառանգվում են | Ոչ |
| Կիրառվում են | Կիրառվում է բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Այո |
Կիրառվող արժեքները՝
Եթե օգտագործվի %, դրա արժեքը կհաշվի ծնող էլեմենտի լայնության համաձայն։
padding-block-ում թույլատրելի է օգտագործել երկու արժեք՝ պրոբելով առանձնացված։
Առաջին արժեքը կսահմանի 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-block-ի հակառակ գործողությունը՝ ներքին լիցք է սահմանում տողերի՝ ձախ և աջ կողմերի համար ըստ բլոկի ուղղության, որը կախված է writing-mode հատկությունից։
Եթե բլոկը տեղադրված է հորիզոնական, չափ կսահմանվի միայն հորիզոնական։
Եթե բլոկը տեղադրված է ուղղահայաց, չափ կսահմանավի միայն ուղղահայաց։
Այս նույն տրամաբանությամբ են գործում նաև padding-inline-start և padding-inline-end հատկությունը՝ առաջինը լիցք միայն ձախ կողմի համար, երկրորդը՝ աջ կողմի։
Ներքին լիցքի կողմը որոշվում է writing-mode և direction հատկություններով։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | 0 |
| Ժառանգվում են | Ոչ |
| Կիրառվում են | Կիրառվում է բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Այո |
Կիրառվող արժեքները՝
Եթե օգտագործվի %, դրա արժեքը կհաշվի ծնող էլեմենտի լայնության համաձայն։
padding-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-ը սահմանում է բլոկ տեսակ էլեմենտի վերևի և ներքևի արտաքին սահմանը` ըստ բլոկի ուղղության, որը կախված է writing-mode, direction, text-orientation հատկություններից։
Եթե բլոկը տեղադրված է հորիզոնական, չափ կսահմանվի միայն ուղղահայաց։
Եթե բլոկը տեղադրված է ուղղահայաց, չափ կսահմանավի միայն հորիզոնական։
Այս նույն տրամաբանությամբ են գործում margin-block-start և margin-block-end հատկությունները՝ առաջինը միայն վերևի սահմանը, երկրորդը՝ ներքևի։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | 0 |
| Ժառանգվում են | Ոչ |
| Կիրառվում են | Կիրառվում է բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Այո |
Կիրառվող արժեքները՝
Եթե օգտագործվի %, դրա արժեքը կհաշվի ծնող էլեմենտի լայնության համաձայն։
margin-block-ում թույլատրելի է օգտագործել երկու արժեք՝ իրարից պրոբելով առանձնացված։
Առաջին արժեքը կսահմանի 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-block-ի հակառակ գործողությունը՝ արտաքին սահման է որոշում տողերի՝ ձախ և աջ կողմերի համար ըստ բլոկի ուղղության, որը կախված է writing-mode հատկություից։
Եթե բլոկը տեղադրված է հորիզոնական, չափ կսահմանվի միայն հորիզոնական։
Եթե բլոկը տեղադրված է ուղղահայաց, չափ կսահմանավի միայն ուղղահայաց։
Այս նույն տրամաբանությամբ են գործում նաև 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-ը սահմանում է բլոկ տեսակ էլեմենտի վերևի և ներքևի կողմերի սահմանագիծ` ըստ բլոկի ուղղության, որը կախված է writing-mode, direction, text-orientation հատկություններից։
Եթե բլոկը տեղադրված է հորիզոնական՝ սահմանագիծ միայն հորիզոնական։
Եթե բլոկը տեղադրված է ուղղահայաց՝ սահմանագիծ միայն ուղղահայաց։
Այս նույն տրամաբանությամբ են գործում նաև border-block-start և border-block-end հատկությունները, առաջինը սահմանագիծ վերևի համար, երկրորդը՝ ներքևի։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | չկա |
| Ժառանգվում են | Ոչ |
| Կիրառվում են | Կիրառվում է բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Այո |
Կիրառվող արժեքները՝
Արժեքը սահմանվում է չափման միավորներից մեկով՝ բացառությամբ %-ից։
border-block-ում թույլատրելի է օգտագործել երեք արժեք՝ սահմանագծի լայնությունը՝ նույնն է, ինչ 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-ին, վերաբերում է նաև այս բոլորին։ Տես նաև՝ CSS-BORDER -ի border-end-end-radius բաժնում։
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-ի հակառակ գործողությունը՝ սահմանում է սահմանագիծ տողերի ուղղության համապատասխան՝ ձախ և աջ կողմերի համար․ ուղղությունը կախված է writing-mode հատկությունից։
Եթե բլոկը տեղադրված է հորիզոնական՝ սահմանագիծ միայն ուղղահայաց։
Եթե բլոկը տեղադրված է ուղղահայաց՝ սահմանագիծ միայն հորիզոնական։
Այս նույն տրամաբանությամբ են գործում նաև border-inline-start և border-inline-end հատկությունները՝ առաջինը ձախ կողմի համար, երկրորդը՝ աջ։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | չկա |
| Ժառանգվում են | Ոչ |
| Կիրառվում են | Կիրառվում է բոլոր էլեմենտների հետ։ |
| Ենթարկվում է անիմացիայի | Այո |
Կիրառվող արժեքները՝
Արժեքը սահմանվում է չափման միավորներից մեկով՝ բացառությամբ %-ից։
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-ին, վերաբերում է նաև այս բոլորին։ Տես նաև՝ CSS-BORDER -ի border-end-end-radius բաժնում։
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 հատկությունների համար տես նաև՝ CSS-BORDER -ի border-end-end-radius բաժնում։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | auto |
| Ժառանգվում են | Ոչ |
| Կիրառվում են | Կիրառվում է բոլոր էլեմենտների հետ, որոնց համար սահմանված է position պարամետրը։ |
| Ենթարկվում է անիմացիայի | Այո |
inset-block –սահմանում է բլոկ տեսակի էլեմենտի դիրքը վերևից(top) ու ներքևից(bottom), բլոկի ուղղությանը համապատասխան, որը կախված է writing-mode հատկությունից։
Եթե բլոկը տեղադրված է հորիզոնական, բլոկի դիրքը կսահմանվի վերևից(top) ու ներքևից(bottom)։
Եթե բլոկը տեղադրված է ուղղահայաց, բլոկի դիրքը կսահմանվի ձախից(left) ու աջից(right):
inset-inline – Սահմանում է բլոկ տեսակի էլեմենտի դիրքը ձախից(left) ու աջից(right), բլոկի ուղղությանը համապատասխան, որը կախված է writing-mode հատկությունից։
Եթե բլոկը տեղադրված է հորիզոնական, բլոկի դիրքը կսահմանվի ձախից(left) ու աջից(right)։
Եթե բլոկը տեղադրված է ուղղահայաց, բլոկի դիրքը կսահմանվի վերևից(top) ու ներքևից(bottom):
* {
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. Cras aliquet.
<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>
Armenian 
Russian