CSS 逻辑属性

在CSS中，逻辑属性允许开发人员根据网页的逻辑结构而不是物理布局来定义样式。这意味着我们可以根据文本方向或内容流应用CSS。

主要使用逻辑属性来设置HTML元素的边距，内边距和边框。它包含了margin、padding和border属性的不同变体。

逻辑属性可以根据块和内联维度来定义。

块维度 − 块维度代表内容流的垂直方向。例如，在英文中，文本方向是从左到右。所以，块维度处理元素的顶部和底部。
内联维度 − 内联维度表示与内容或文本方向相同的方向。对于英文，左和右是内联维度。

让我们来看看CSS中常用的一些逻辑属性。

Border-block − 设置上部和底部边框。
Border-inline − 设置左侧和右侧边框。
Border-block-start − 设置顶部边框。
Border-block-end − 设置底部边框。
Margin-inline − 设置左侧和右侧边距。
Padding-inline − 设置左侧和右侧内边距。
Padding-inline-start − 设置左侧内边距。
Margin-inline-end − 设置底部内边距。
Border-inline-end-width − 设置右侧边框的宽度。
Border-block-start-style − 设置顶部边框的样式。

在上述属性中，可以观察到我们需要使用“block”来处理上部和底部，使用“inline”来处理左侧和右侧。此外，“start”表示左侧和顶部，“end”表示右侧和底部。

为什么应该使用逻辑属性而不是常规的CSS属性

在观察上述属性的功能时，首先想到的问题是我们是否可以使用常规的CSS属性来实现相同的样式，以及为什么我们应该使用逻辑属性。以下是您的答案。

有时，我们需要为HTML元素设置左右边距。我们可以使用margin属性的“0 auto”值来实现这一点，或者分别使用margin-left和margin-right CSS属性。当使用“0 auto”时，如果之前已经应用了上下边距的值，还会更改其值。因此，最好使用“margin-inline” CSS属性。

margin: 0 auto;
or
margin-left: auto;
margin-right: auto;
or
margin-inline: auto;

语法

用户可以按照以下语法在CSS中使用逻辑属性。

padding-block-start: value;
margin-inline-end: value;

在上面的语法中，我们像使用其他CSS属性一样使用了逻辑属性。

示例1（边距和填充逻辑属性）

在下面的示例中，我们创建了两个div元素，并在其中添加了文本。在CSS中，我们使用了“padding-block-start”，“padding-inline-start”和“margin-block-end”逻辑CSS属性来为第一个div设置上部和左侧边距，并设置底部边距。

此外，我们使用了“margin-inline-end”逻辑CSS属性给div元素添加了右侧边距。

<html>
<head>
   <style>
      .text {
         padding-block-start: 20px;
         padding-inline-start: 30px;
         margin-block-end: 50px;
         color: green;
         background-color: red;
         width: 300px;
         font-size: 2rem;
      }
      .text1 {
         width: 300px;
         font-size: 2rem;
         padding-block-start: 20px;
         padding-inline-start: 10px;
         margin-inline-end: 50px;
         color: blue;
         background-color: yellow;
      }
   </style>
</head>
<body>
   <h3> Using the <i> margins and paddings logical properties </i> in CSS </h3>
   <div class = "text"> This is a text. </div>
   <div class = "text1"> This is another text div element. </div>
</body>
</html>

示例2

在下面的示例中，我们演示了与边框相关的逻辑CSS属性。我们使用了’border-block-start’来应用顶部边框，使用’border-block-end’来应用底部边框。此外，我们使用了’border-inline-start’来应用左边框，’border-inline-end’来应用右边框。

在输出中，用户可以观察到div元素不同边的不同边框。

<html>
<head>
   <style>
      .sample {
         border-block-start: 3px dotted blue;
         border-block-end: 5px solid green;
         border-inline-start: 10px double red;
         border-inline-end: 5px groove yellow;
         padding: 10px;
         width: 300px;
         height: 200px;
      }
      .left {color: red;}
      .right {color: yellow;}
      .top {color: blue;}
      .bottom {color: green;}
   </style>
</head>
<body>
   <h2> Using the <i> Logical border </i> properties in CSS </h2>
   <div class = "sample">
      Observe the border of the div.
      <p class = "left"> border inline start </p>
      <p class = "right"> border inline end </p>
      <p class = "top"> border block start </p>
      <p class = "bottom"> border block end </p>
   </div>
</body>
</html>

示例3

在下面的示例中，我们应用了与flexbox中的margin和padding相关的CSS逻辑属性。在此，我们在容器div元素内创建了三个div元素。之后，我们使用了’padding-inline’在容器div元素中应用了右侧和左侧的padding。

<html>
<head>
   <style>
      .container {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         padding-inline: 40px;
         width: 500px;
         background-color: bisque;
         font-size: 2rem;
      }
      .item {flex: 1;}
   </style>
</head>
<body>
   <h3> Using the <i> margin-inline property </i> to set the inline margin </h3>
   <div class = "container">
      <div class = "item"> First </div>
      <div class = "item"> second </div>
      <div class = "item"> Third </div>
   </div>
</body>
</html>

用户学会了在CSS中使用逻辑属性。大部分逻辑属性与边距（margin）、内边距（padding）和边框（border）有关。然而，与overflow相关，一些逻辑属性也存在，开发者可以在互联网上查阅。在使用逻辑属性时，用户需要关注“块级”和“内联”的尺寸以及“起始”和“结束”的方向。