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

HTML-файл ссылается на соответствующий 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.
Читайте также:  JHipster (Java Hipster) - полнофункциональная платформа веб-разработки для современного разработчика

Синтаксис:

 .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>

Выход:

Читайте также:  Уникальная программа каталогов Windows на Java

Пример ниже дает вам синтаксический обзор того, как использовать

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

Пример 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>

Выход:

В приведенном ниже примере показано различие и использование

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

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

Оцените статью
bestprogrammer.ru
Добавить комментарий

Adblock
detector