搜尋
首頁web前端css教學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 id="Using-the-i-margins-and-paddings-logical-properties-i-in-CSS"> 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 id="Using-the-i-Logical-border-i-properties-in-CSS"> 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 id="Using-the-i-margin-inline-property-i-to-set-the-inline-margin"> 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中文網其他相關文章!

陳述
本文轉載於:tutorialspoint。如有侵權,請聯絡admin@php.cn刪除
這麼多顏色鏈接這麼多顏色鏈接Apr 13, 2025 am 11:36 AM

最近有一系列有關顏色的工具,文章和資源。請允許我通過將它們四捨五之後關閉幾個標籤,以供您享受。

自動利潤在Flexbox中的工作方式自動利潤在Flexbox中的工作方式Apr 13, 2025 am 11:35 AM

羅賓以前已經介紹過這一點,但是我在過去的幾周里聽到了一些關於它的困惑,看到另一個人在解釋它,我想

移動彩虹移動彩虹Apr 13, 2025 am 11:27 AM

我絕對喜歡三明治網站的設計。在許多美麗的功能中,這些標題是滾動時帶有彩虹的下線。它不是

新年,新工作?讓我們做一個網格驅動的簡歷!新年,新工作?讓我們做一個網格驅動的簡歷!Apr 13, 2025 am 11:26 AM

許多流行的簡歷設計通過以網格形狀鋪設部分來充分利用可用的頁面空間。讓我們使用CSS網格創建一個佈局

將用戶擺脫過多習慣的一種方法將用戶擺脫過多習慣的一種方法Apr 13, 2025 am 11:25 AM

頁面重新加載是一回事。有時,當我們認為它沒有響應或認為新內容可用時,我們會刷新頁面。有時我們只是生氣

域驅動的設計與React域驅動的設計與ReactApr 13, 2025 am 11:22 AM

關於如何在React世界中組織前端應用的指導很少。 (只需移動文件,直到“感覺正確”,大聲笑)。真相

檢測非活動用戶檢測非活動用戶Apr 13, 2025 am 11:08 AM

大多數情況下,您並不真正在乎用戶是否積極參與或暫時非活動。不活躍,意思,也許他們

Wufoo ZapierWufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo一直在集成方面非常出色。他們與特定應用程序(例如廣告系列顯示器,MailChimp和Typekit)進行集成,但他們也

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境