CSS 中的邏輯屬性-css教學-PHP中文網

為什麼我們應該使用邏輯屬性而不是普通的CSS屬性？

文法

範例1（邊距和內邊距邏輯屬性）

Example 3

範例3

首頁

web前端

css教學

CSS 中的邏輯屬性

王林

Sep 14, 2023 am 10:29 AM

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 top and bottom of the top and bottom of the top and bottom of the top and bottom of the top and bottom of the top and bottom. 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 three div elements inside the container div element. After that, we three divding-inline' 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 中的邏輯屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn