在CSS中，邏輯屬性允許開發(fā)者根據(jù)網(wǎng)頁的邏輯結(jié)構(gòu)而不是物理布局來定義樣式。這意味著我們可以根據(jù)文本方向或內(nèi)容流應(yīng)用CSS。
主要使用邏輯屬性來設(shè)置HTML元素的邊距、內(nèi)邊距和邊框。它包含了邊距、內(nèi)邊距和邊框?qū)傩缘牟煌凅w。
邏輯屬性可以根據(jù)塊級(jí)和內(nèi)聯(lián)尺寸進(jìn)行定義。
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.
內(nèi)聯(lián)尺寸 – 內(nèi)聯(lián)尺寸表示與內(nèi)容或文本方向相同的方向。對(duì)于英語來說，左側(cè)和右側(cè)是內(nèi)聯(lián)尺寸。
Let’s look at some commonly used logical properties in CSS.
Border-block ? 它設(shè)置了上下邊框。
Border-inline ? 設(shè)置左右邊框。
Border-block-start ? It sets the top border.
Border-block-end ? 它設(shè)置了底部邊框。
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 ? 它設(shè)置右邊框的寬度。
Border-block-start-style ? 它設(shè)置了頂部邊框的樣式。
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.
為什么我們應(yīng)該使用邏輯屬性而不是普通的CSS屬性？
通過觀察上述屬性的功能，首先想到的問題是我們是否可以使用普通的CSS屬性來實(shí)現(xiàn)相同的樣式，以及為什么我們應(yīng)該使用邏輯屬性。以下是您的答案。
有時(shí)候，我們需要為HTML元素設(shè)置左右邊距。我們可以使用margin屬性的’0 auto’值來實(shí)現(xiàn)，或者分別使用margin-left和margin-right的CSS屬性。當(dāng)使用’0 auto’時(shí)，如果之前已經(jīng)應(yīng)用了上下邊距的值，我們也會(huì)改變它們的值。因此，最好使用’margin-inline’的CSS屬性。
margin: 0 auto; or margin-left: auto; margin-right: auto; or margin-inline: auto;
登錄后復(fù)制
語法
Users can follow the syntax below to use logical properties in CSS.
padding-block-start: value; margin-inline-end: value;
登錄后復(fù)制
在上述語法中，我們使用邏輯屬性就像使用其他CSS屬性一樣。
示例1（邊距和內(nèi)邊距邏輯屬性）
在下面的示例中，我們創(chuàng)建了兩個(gè)div元素，并在其中添加了文本。在CSS中，我們使用了“padding-block-start”，“padding-inline-start”和“margin-block-end”邏輯CSS屬性來為第一個(gè)div設(shè)置頂部和左側(cè)填充以及底部邊距。
此外，我們使用了‘margin-inline-end’邏輯CSS屬性來為div元素添加右內(nèi)邊距。
<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>
登錄后復(fù)制
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>
登錄后復(fù)制
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>
登錄后復(fù)制
用戶學(xué)會(huì)了在CSS中使用邏輯屬性。大多數(shù)邏輯屬性與邊距、內(nèi)邊距和邊框有關(guān)。然而，與溢出相關(guān)的一些邏輯屬性也存在，開發(fā)人員可以在互聯(lián)網(wǎng)上查閱。在使用邏輯屬性時(shí)，用戶需要關(guān)注“塊”和“內(nèi)聯(lián)”維度以及“開始”和“結(jié)束”方向。
以上就是CSS 中的邏輯屬性的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
