在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; or margin-left: auto; margin-right: auto; or margin-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 中的邏輯屬性的詳細內容，更多請關注www.92cms.cn其它相關文章！
