CSS邏輯屬性的完整指南，並帶有備忘單

在本文中，我們將研究CSS邏輯屬性。我們將查看它們是什麼，工作方式以及它們的用處。我們還將提供一個方便的備忘單，以便您可以輕鬆地將CSS邏輯屬性與它們的物理等效物進行比較。

>即使您選擇自己不使用邏輯屬性，也是一個熟悉它們的好主意，因為它們開始出現在越來越多的網站和在線演示的代碼中。

> 例如，您可能會遇到這個：

>除非您熟悉CSS邏輯屬性，否則這可能對您意義不大。如果您繼續閱讀，您將很快成為邏輯屬性忍者！

<span>p {
</span>  <span>margin-block-start: 1em;
</span><span>}
</span>

>下載我們方便的邏輯屬性PDF備忘單。

鑰匙要點

> css邏輯屬性提供了一種新的聲明屬性的方式，例如寬度，高度，填充，邊緣和邊框，基於文本的方向而不是計算機屏幕的物理尺寸。 邏輯屬性適用於文本方向的變化，使其對於具有多種語言版本的網站特別有用。它們還為單語網站提供了優勢，例如由於媒體或容器查詢而引起的文本方向變化的適應性。

>

> css邏輯屬性包括大小，邊距，填充，插圖（位置元素），邊界，邊界半徑，浮動和清除，文本對齊，調整大小，溢出和超越行為的變化。這些屬性中的每一個都具有適應文本方向的邏輯等效。 可以在HTML和CSS中指定文本方向。在HTML中，可以使用DIR屬性設置它，在CSS中，可以使用方向屬性進行設置。對於垂直文本，可以使用CSS中的寫作模式屬性。
• >
瀏覽器對CSS邏輯屬性的支持在2020年代初期已迅速發展，現在它們在主要瀏覽器中得到了強有力的支持。但是，對於較舊的瀏覽器，可能有必要同時聲明邏輯和物理屬性。
• >
• 什麼是邏輯屬性？
• 邏輯屬性提供了一種新的方式來聲明寬度和高度，填充，邊緣，邊框，邊框半徑，位置，浮點，文本對齊和溢出等屬性。傳統上，這些屬性是根據計算機屏幕的物理維度（左，右，頂部和底部）聲明的。邏輯屬性取決於文本的
>。

某些語言從左到右運行，例如英語。其他人則像阿拉伯語一樣從右到左行。其他有時會從上到下跑步，例如日語。許多網站都有多種不同語言的版本，例如英語，阿拉伯語和中文的新聞網站，或半島電視台的英語，阿拉伯語和中文網站。

鏈接到文本方向的樣式具有許多優勢，因為它們可以適應文本方向的變化，從而適用於網站的所有版本。
了解文本方向
要更好地掌握邏輯屬性的目的，我們確實需要了解一些有關文本方向的事情。

>

我們可以在HTML和CSS中指定文本的方向。

> html具有dir屬性，該屬性指定文本是否從頁面上從左到右運行（dir =“ ltr”），右至左（dir =“ rtl”），還是瀏覽器是否應自行構成自己的思想根據所使用的語言（dir =“ auto”）。 DIR屬性可以應用於整個文檔（如果整個文檔使用相同的語言）或單個元素。

而不是在HTML中使用DIR屬性，我們可以在CSS中使用方向屬性。要指定從左到右的文本，請使用方向：LTR和左文本，請使用方向：RTL。
>我們是在HTML還是CSS中設置文本方向並不重要，儘管通常建議我們在HTML中使用DIR屬性，因為這可以確保文本即使我們的樣式出現問題，也可以在正確的方向上運行表。
>我們還可以使用CSS來指定文本從上到下運行。對於從左到右運行的垂直文本，我們使用寫作模式：垂直LR，對於從右到左運行的垂直文本，我們使用寫作模式：垂直rl。 （垂直文本沒有DIR選項。）

> 在本文中，我們將研究一系列比較物理和邏輯CSS屬性效果的演示。這些演示將使用由表情符號組成的段落來說明文本的方向 - 一種通用語言！

在下面的筆中，我們有四個包含表情符號句子的盒子。第一個設置為dir =“ ltr”（瀏覽器默認值），第二個是dir =“ rtl”，第三個對寫作模式：vertical-lr，第四台對寫作模式：vertical-rl。

看到筆 邏輯屬性：通過sitepoint（@sitepoint）的文本方向 在Codepen上。

在此演示中，您可以看到文本方向設置如何影響段落中字符的順序。

>>旁邊：查看上面演示中的行如何很好地排列？這要歸功於CSS網格中新的子網格值。我們在最近的快速提示中介紹瞭如何將行與subgrid排成一行。

>

了解CSS

中的內聯塊和內聯 隨著CSS的成長和發展，

的重點少於向左，右，上下屏幕上的事物，而更多地關注內容流。例如，您可能熟悉Flexbox中的主軸和橫軸，它們會根據文本流的方向而變化，網格內容的方向也是如此。

> CSS塊和內聯屬性由文本方向確定。在下圖中，塊和內聯方向取決於文本的方向。

對於一個從左到右運行的段落，像這樣的段落，內聯方向是向左/向右的，並且塊方向向上/向上。 邏輯屬性是根據塊和內聯維度設置的，隨著文本方向的變化，它們會自動互換。這使它們比物理特性更具適應性。

>

內聯開始和結束是由文本啟動和結束的位置，以及沿塊方向的啟動和結尾確定的。

僅適用於多語言站點的邏輯屬性？

> 邏輯屬性對所有網站都有用。在很多情況下，單語言網站可能會從使用邏輯屬性中受益。 例如，在使用媒體或容器查詢時，您可能會發現自己更改元素的文本方向。想像一個帶有左紅邊框的標題。在小屏幕上，標題可能是水平的，在以下段落之上。在寬屏幕上，您可能會將標題設置為垂直顯示。下圖顯示瞭如果您使用邊框左側將發生什麼：標題上的5px固體紅色。

>一旦標題垂直顯示，左邊框就停留在左側，當我們很可能在文本開始時想要它。使用邏輯屬性，我們可以指定紅色邊框出現在標題的內聯啟動（邊界內線啟動），無論它指向哪個方向，都會產生下圖所示的結果。



（您可以在Codepen上查看此演示的現場演示。）

這表明，使用邏輯屬性，我們的佈局如何更適合更改，而不必為不同方案添加額外的CSS。

除此之外，我們還將看到邏輯屬性提供了許多有用的速記，這些速記有助於使CSS編碼更有效，無論是否使用多種語言。

>尺寸（寬度和高度尺寸）

基於物理屏幕的

而不是寬度和高度，邏輯屬性使用內聯尺寸和塊大小。為了決定要設置寬度和高度的哪個，我們必須知道文本將介紹什麼方向。

> 在下面的演示中，第一行中的段落的大小為80px。在每種情況下，將80px設置在塊方向上，無論是哪個。
將其與第二行段落進行比較，該段落將每個段落設置為高度：80px。在每種情況下，高度均與屏幕相關。
看到筆 邏輯屬性：sitepoint（@sitepoint）的大小（寬度和高度） 在Codepen上。
其他尺寸屬性包括：
最大inline-size
> mininline-size
> max-block-size
> min-block-size
>

>有關所有尺寸選項，請參見備忘單，以及如何在每個文本方向上使用它們，以及瀏覽器支持信息。 邊距

使用邏輯屬性，設置了邊緣的邊距和邊緣塊的變化。
對於從左到右的語言，保證金 - 內線啟動：40px將在文本開始時（在屏幕左側）應用邊距。當應用於左右語言時，該邊距將出現在屏幕右側。對於垂直文本，邊距將出現在頂部，如下演示所示。

比較在第一行中應用於每個段落的邊距 - 內線啟動的效果與邊距左：40px在下面的演示中的第二行中應用於每個段落。

>

看到筆 邏輯屬性：通過SitePoint（@SitePoint）的邊距 在Codepen上。

其他保證金屬性包括：

>保證金 - 內線 - 末端
>邊緣塊啟動
• >邊緣塊 - 端
• 邊距 - inline
• 邊緣塊
請注意，保證金內線可以用作邊緣左和邊緣權利的速記，在許多情況下非常方便 - 例如邊距內線：自動。
• >
>有關所有保證金選項和瀏覽器支持信息。
padding
使用邏輯屬性，將填充設置為帶有填充和填充塊的變化。

對於從左到右的語言，填充塊啟動：40px將在文本頂部（屏幕頂部）應用填充物。當應用於左右語言時，該填充物也將出現在屏幕頂部。對於垂直文本，填充將根據其水平方向出現在左側或右側。

將第一行中填充塊啟動的效果與填充頂點：40px在下面的演示中的第二行中應用於每個段落。

看到筆 邏輯屬性：通過SitePoint（@SitePoint）填充 在Codepen上。

其他填充屬性包括：

>填充 - 啟動
• >填充 - 末端
• > padding-block-end
• >填充
• >填充
請注意，填充線可以用作填充和填充權的速記。

>

>在每個文本方向上所有填充選項，以及瀏覽器支持詳細信息。

插圖（位置元素） 您是否遇到了非常方便的插圖？它用於定位元素（例如您使用位置時：絕對）。例如，插圖：0是頂部的速記：0;右：0;底部：0;左：0;。

>讓我們在表情符號演示中嘗試一下。包含的div設置為位置：相對和段落設置為位置：絕對。第一行中的段落設置為iNSET-block-end：30px，而第二行中的段落則將其設置為底部：30px。

看到筆 邏輯屬性：插入站點點（@sitepoint） 在Codepen上。

插圖的其他屬性包括：

> inset-block-start
> inset-block
• >插圖 - 內線啟動
• > inset-inline-end
• 插圖inline
請注意方便的速記插圖塊和插圖內線，只能在兩個方向上使用。 （插圖：20px等於插圖：20px auto。請參閱此處的簡單演示。
• >查看插圖屬性的完整列表及其如何與作弊表中的文本方向一起工作。
邊界
>我們可以將邊框設置為帶有邊框速記的元素，例如邊框：5px實心紅色。但是，如果我們只是想對元素的特定方面進行樣式

，我們突然要處理邊界，邊界底，邊界左側和邊界權利，為此有邏輯上的等效物。 >

>邊界的參與程度更高，因為它們涉及三個值 - 寬度（邊界的厚度），樣式（固體，虛線等）和顏色。

>

>讓我們看看當我們應用邊界啟動時會發生什麼：5px固體紅色到我們的段落中，並將其與邊界左側進行比較：5px固體紅色;。

看到筆 邏輯屬性：邊境由站點點（@sitepoint） 在Codepen上。

邊界的其他邏輯屬性包括：

• 邊界內線 - 末端
• >邊界塊啟動
• >邊界塊 - 端
• 邊界內線
• 邊界塊

請注意，邊界是邊界的一個不錯的速記：從左到右流的左右邊界，邊界封口和邊界底部和邊界底。 >我們可以進一步深入到邊框邏輯屬性，以僅針對一個值。對於寬度，我們有這些：

邊界塊啟動寬度
邊界塊 - 末端
>邊框寬度
邊界 - 內線啟動寬度
邊界內線 - 末端
>邊界寬寬
對於樣式，我們有這些：
邊界塊啟動風格
邊框式末端
邊界塊風格
邊界啟動式
邊框內線 - 末端
>邊框內線風格
對於顏色，我們有這些：
邊界塊啟動色
邊界塊 - 末端
>邊界塊色
邊界 - 內線啟動色
邊界內線 - 末端
邊界內線
>

在適用於每個文本方向時的所有組合和排列的備忘單 邊界半徑

>我們可以將邊界半徑設置為帶有邊界拉迪烏斯屬性的元素的所有角落。如果我們針對具有物理特性的單個角落，則首先考慮它是在元素的頂部還是底部，然後是在元素的左側還是右側。因此，左上角用邊框 - 左邊 - 拉迪烏斯指定。

>

設置帶有邏輯屬性的邊框半徑時，我們需要考慮塊[start/end] inline [start-end]。

也就是說，要選擇特定角落的合適屬性，您必須問自己是否處於元素塊方向的開頭或結束中間的選項：

<span>p {
</span>  <span>margin-block-start: 1em;
</span><span>}
</span>

在以下演示的第一行中，我們將在塊開始時將邊界半徑為20px，並使用Border-witch-Start-Start-Start-Radius設置了邊界半徑。將其與第二排中邊界左邊拉迪烏斯進行比較。

>

看到筆 邏輯屬性：sitepoint（@sitepoint）的邊界半徑 在Codepen上。
>這裡沒有任何特殊的速記，因此，如果您想繞兩個角落，您必須做這樣的事情：

-start-start-
-end-start-
-start-end-
-end-end-

哦！ （請參閱此處的演示。）

> 有關所有邊界半徑選項和瀏覽器支持信息，請參見備忘單。邊界半徑邏輯屬性需要更長的時間才能由瀏覽器支持，但是現在的支持在現代瀏覽器中是好的。

浮動和清除

浮動和清除的邏輯屬性為如何浮動和清除元素提供了新的選項。在邏輯屬性之前，唯一的選項是浮動：左和浮動：右，清除：左和清除：右。如果文本是垂直的，則無法選擇沿與文本相同的方向浮動。 > >具有邏輯屬性，浮動和清除現在可以針對文本的直列流進行專門進行，這要歸功於內聯啟動和內聯末端。

在下面的演示中，與第二行中剩下的物理值相比，跨度元素在邏輯值內啟動。

看到筆 邏輯屬性：通過SitePoint（@SitePoint）浮動 在Codepen上。

內聯啟動和內聯末端值也適用於清除屬性。 （這是一個編號的演示。）

>

>不需要邏輯替代方案。

>文本對齊
>我們已經擁有諸如左，右，中間和正當的文本對齊值。現在還添加了兩個邏輯值：開始和結束。它們可用於沿著線軸對齊文本，無論它沿著哪個方向運行。 在下面的演示中，第一行中的段落已設置為文本合格：end。如您所見，表情符號都被推到內聯軸的盡頭。

看到筆 邏輯屬性：按SitePoint（@sitepoint）按文本對齊 在Codepen上。

備忘單顯示瞭如何應用啟動和結束值以與各種文本方向使用。

調整大小

調整大小屬性允許在指定的方向上調整某些元素的大小，現在有內聯和塊選項。

下面的演示顯示了調整大小之間的差異：內聯和調整大小：水平。 （每個盒子的右下角都有一個小的調整大小。

看到筆 邏輯屬性：按SitePoint（@SitePoint）調整大小 在Codepen上。

（在上面的演示中，左右框的調整大小有點瘋狂，因為dir =“ rtl”不是應用於整個文檔，而是僅應用於包含的div。

溢出
溢出X和Overflow-y的物理屬性現在具有溢出內線和溢流塊的邏輯補充。

>

請注意，在撰寫本文時（2024年4月），這些新屬性幾乎沒有支持

croll-behavior

croll-Behavior屬性是一種新的屬性，可完善元素滾動的溢出。我們不會在這裡深入研究，但是您可以在MDN上閱讀更多信息。 >

可以說這些屬性和物理屬性都有邏輯版本。例如，可以用超越行為的內線來代替左右語言的超越行為X，依此類推。 （有關示例的完整列表，請參見備忘單。）

>

>瀏覽器支持

在2020年代初期，對CSS邏輯屬性的瀏覽器支持迅速提高，現在在主要瀏覽器中得到了強有力的邏輯屬性。

>邏輯屬性具有與物理對應物相同的重量，因此，如果您擔心較舊瀏覽器的經驗，則可以聲明兩個值，例如：

>

較舊的瀏覽器將使用第一個聲明，而較新的瀏覽器將使用第二個聲明。 但是，在整個樣式表中都可以重複這樣的代碼，因此，如果您真的擔心較舊的瀏覽器，也許現在就可以輕鬆地在邏輯屬性上進行。

>

caniuse具有邏輯屬性支持的概述，備忘單中的每個部分還具有支持特定屬性的鏈接。

結論

在本文中，我們介紹了當前可用的每個邏輯屬性幾乎。 （如果要走得更遠，也可以查看字幕側的邏輯屬性和尺寸的限制。）>

如果沒有別的，那麼即使您現在選擇不使用它們，也值得了解什麼是邏輯屬性以及如何使用它們。至少您將了解現在在網絡上出現的新的CSS邏輯屬性代碼。

> 即使您不在多語言網站上工作，

邏輯屬性也確實會帶來好處。各種速記（如Margin-Inline）非常有用，並且是您套件中擁有的不錯的工具。
>如果您已經閱讀了本文，則應能夠識別出邏輯屬性的出現。 （請注意這些塊和直列關鍵字！）希望您也有足夠的信心在CSS中偶爾使用它們 - 除非您受到了啟發，否

不要忘記下載我們方便的邏輯屬性PDF備忘單。

以上是CSS邏輯屬性的完整指南，並帶有備忘單的詳細內容。更多資訊請關注PHP中文網其他相關文章！