CSS 中的逻辑属性

百变鹏仔 3个月前 (09-19) #CSS

文章标签属性

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

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

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

Block dimension − The block dimension represents the perpendicular direction of the content flow. For example, in English text direction is left to right. So, block dimensions handle the top and bottom of the element.
立即学习“前端免费学习笔记（深入）”；
内联尺寸 - 内联尺寸表示与内容或文本方向相同的方向。对于英语来说，左侧和右侧是内联尺寸。

Let’s look at some commonly used logical properties in CSS.

Border-block − 它设置了上下边框。
Border-inline − 设置左右边框。
Border-block-start − It sets the top border.
Border-block-end − 它设置了底部边框。
Margin-inline − It sets the left and right margins.
Padding-inline − It sets the left and right padding.
Padding-inline-start − It sets the left padding.
Margin-inline-end − It sets the bottom padding.
Border-inline-end-width − 它设置右边框的宽度。
Border-block-start-style − 它设置了顶部边框的样式。

In the above properties, users can observe that we require to use ‘block’ for top and bottom and ‘inline’ for left and right. Also, ‘start’ for left and top, and ‘end’ for right and bottom.

为什么我们应该使用逻辑属性而不是普通的CSS属性？

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

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

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

语法

Users can follow the syntax below to use logical properties in 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>

Example 2

In the example below, we have demonstrated the logical CSS properties related to the border. We used the ‘border-block-start’ to apply the top border and the ‘border-block-end’ to apply the bottom border. Furthermore, we used the ‘border-inline-start’ to apply the left border and ‘border-inline-end’ to apply the right border.

In the output, users can observe the different borders for the different sides of the div element.

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

Example 3

的翻译为：

示例3

In the example below, we applied the CSS logical properties related to the margin and padding in the flexbox. Here, we have created three div elements inside the container div element. After that, we used the ‘padding-inline’ to apply right and left padding in the container div element.

<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中使用逻辑属性。大多数逻辑属性与边距、内边距和边框有关。然而，与溢出相关的一些逻辑属性也存在，开发人员可以在互联网上查阅。在使用逻辑属性时，用户需要关注“块”和“内联”维度以及“开始”和“结束”方向。

文章推荐

CSS 中的逻辑属性

为什么我们应该使用逻辑属性而不是普通的CSS属性？

语法

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

Example 2

Example 3

示例3

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写