CSS 中的逻辑属性

cssweb developmentfront end technology更新于 2024/5/21 3:24:17

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

逻辑属性主要用于设置 HTML 元素的外边距 (margin)、内边距 (padding) 和边框 (border)。它包含外边距、内边距和边框属性的不同变体。

逻辑属性可以根据块级尺寸和行内尺寸进行定义。

块级尺寸 − 块级尺寸表示内容流的垂直方向。例如，英文文本的方向是从左到右。因此，块级尺寸处理元素的顶部和底部。
行内尺寸 − 行内尺寸表示与内容或文本方向相同的方向。对于英语来说，left 和 right 是行内尺寸。

让我们来看看 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"值来实现，或者分别使用 CSS 属性 margin-left 和 margin-right 来实现。使用"0 auto"时，如果之前已经设置了上下边距，则上下边距的值也会随之改变。因此，最好使用 CSS 属性"margin-inline"。

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

语法

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

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

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

示例 1(边距和内边距逻辑属性)

在下面的示例中，我们创建了两个 div 元素并在其中添加了文本。在 CSS 中，我们为第一个 div 使用了"padding-block-start"、"padding-inline-start"和"margin-block-end"逻辑 CSS 属性，分别设置顶部和左侧内边距以及底部外边距。

此外，我们还使用了"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

在下面的示例中，我们应用了与弹性框中的边距和填充相关的 CSS 逻辑属性。这里，我们在容器 div 元素内创建了三个 div 元素。之后，我们使用"padding-inline"在容器 div 元素中应用了左右填充。

<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 中的逻辑属性。几乎所有逻辑属性都与外边距、内边距和边框相关。然而，对于溢出，也存在一些逻辑属性，开发者可以在网上查阅。在使用逻辑属性时，用户需要关注"块"和"内联"尺寸以及"起始"和"结束"方向。