Логические свойства в CSS

Логические свойства CSS используют термины » блок» и » встроенный «, чтобы определить направление потока письма.

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

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

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

Мы думаем о направленных свойствах с точки зрения:

top
bottom
left
right

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

Мы думаем о логических свойствах с точки зрения:

block-start
block-end
inline-start
inline-end

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

Логические свойства следующие:

inline-size: Equivalent to width property.
max-inline-size: Equivalent to max-width property.
min-inline-size: Equivalent to min-width property.
block-size: Equivalent to height property.
max-block-size: Equivalent to max-height.
min-block-size: Equivalent to min-height
border-block-start: Equivalent to border-top.
border-block-end: Equivalent to border-bottom.
border-inline-start: Equivalent to border-left.
border-inline-end: Equivalent to border-right.
margin-block-start: Equivalent to top margin.
margin-block-end: Equivalent to bottom margin.
margin-inline-start: Equivalent to left margin.
margin-inline-end: Equivalent to the right margin.
inset-block-start: Equivalent to top.
inset-block-end: Equivalent to bottom.
inset-inline-start: Equivalent to left.
inset-inline-end: Equivalent to right.

Синтаксис:

 .container 
 {
    text-align: end;
    border-inline-start: 1rem red solid;
    border-inline-end: 1rem black solid;
    border-block-start: 1rem blue solid;
    border-block-end: 1rem green solid;
}

Пример 1. Пример ниже дает вам синтаксический обзор того, как использовать логические свойства в CSS. Даже если ваши страницы переведены на какой-либо другой язык, ваш макет/дизайн изменится соответствующим образом. Это власть логических свойств над направленными свойствами. Чтобы сделать ваш веб-сайт более отзывчивым, вы должны использовать логические свойства вместо направленных свойств. Логические свойства border-block-start, border-block-end, border-inline-start, border-inline-end.

HTML

<html>

<head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible"

          content="IE=edge" />

    <meta name="viewport"

          content="width=device-width, initial-scale=1.0" />

    <title>GeeksforGeeks</title>

    <style>

        html

        {

            background: #f1f1f1;

        }

        .add-border

        {

            font-size: 1.5rem;

            font-weight: 800;

            line-height: 1.5;

            color: #2f4f4f;

            padding: 2rem;

            border-inline-start: 1rem red solid;

            border-block-start: 1rem green solid;

            border-inline-end: 1rem blue solid;

            border-block-end: 1rem purple solid;

        }

        .inline-start

        {

            color: red;

        }

        .block-start

        {

            color: green;

        }

        .inline-end

        {

            color: blue;

        }

        .block-end

        {

            color: purple;

        }

        p {

            margin: 0.25rem;

        }

    </style>

</head>

<body>

    <div style="text-align: center">

       <h1 style="color: green">GeeksforGeeks</h1>

    </div>

    <div class="container-box">

        <div class="add-border">

            <p class="block-start">block-start</p>

            <p class="block-end">block-end</p>

            <p class="inline-start">inline-start</p>

            <p class="inline-end">inline-end</p>

        </div>

    </div>

    <br/><br/>

</body>

</html>

Выход:

Читайте также: Python repr

Результат приведенного выше кода

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

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible"

          content="IE=edge" />

    <meta name="viewport"

          content="width=device-width, initial-scale=1.0" />

    <title>GeeksforGeeks</title>

    <style>

        *

        {

            margin: 0;

            box-sizing: border-box;

        }

        body

        {

            background-color: black;

            padding: 22px;

            text-align: center;

        }

        main

        {

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            height: 100vh;

        }

        .border-block

        {

            border-block: 10px solid blue;

            font-size: 100px;

            width: 800px;

            margin-block-end: 150px;

        }

        .border-inline

        {

            border-inline: 10px solid blue;

            font-size: 100px;

            width: 800px;

        }

    </style>

</head>

<body>

    <header>

        <h1 style="color: green">GeeksforGeeks</h1>

    </header>

    <main>

        <p class="border-block"    style="color:white">border-block</p>

        <p class="border-inline" style="color:white">border-inline</p>

    </main>

</body>

</html>

Выход:

Результат приведенного выше кода

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