>即使您選擇自己不使用邏輯屬性，也是一個熟悉它們的好主意，因為它們開始出現在越來越多的網站和在線演示的代碼中。
> 例如，您可能會遇到這個：
>除非您熟悉CSS邏輯屬性，否則這可能對您意義不大。如果您繼續閱讀，您將很快成為邏輯屬性忍者！
<span>p {
</span> <span>margin-block-start: 1em;
</span><span>}
</span>鑰匙要點
某些語言從左到右運行，例如英語。其他人則像阿拉伯語一樣從右到左行。其他有時會從上到下跑步，例如日語。許多網站都有多種不同語言的版本，例如英語，阿拉伯語和中文的新聞網站，或半島電視台的英語，阿拉伯語和中文網站。
鏈接到文本方向的樣式具有許多優勢，因為它們可以適應文本方向的變化，從而適用於網站的所有版本。了解文本方向
>
我們可以在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排成一行。
>的重點少於向左，右，上下屏幕上的事物，而更多地關注內容流。例如，您可能熟悉Flexbox中的主軸和橫軸，它們會根據文本流的方向而變化，網格內容的方向也是如此。
> CSS塊和內聯屬性由文本方向確定。在下圖中，塊和內聯方向取決於文本的方向。
對於一個從左到右運行的段落，像這樣的段落，內聯方向是向左/向右的，並且塊方向向上/向上。
內聯開始和結束是由文本啟動和結束的位置，以及沿塊方向的啟動和結尾確定的。
僅適用於多語言站點的邏輯屬性？
>
例如，在使用媒體或容器查詢時，您可能會發現自己更改元素的文本方向。想像一個帶有左紅邊框的標題。在小屏幕上，標題可能是水平的，在以下段落之上。在寬屏幕上，您可能會將標題設置為垂直顯示。下圖顯示瞭如果您使用邊框左側將發生什麼：標題上的5px固體紅色。
>一旦標題垂直顯示，左邊框就停留在左側，當我們很可能在文本開始時想要它。使用邏輯屬性，我們可以指定紅色邊框出現在標題的內聯啟動（邊界內線啟動），無論它指向哪個方向，都會產生下圖所示的結果。
這表明，使用邏輯屬性，我們的佈局如何更適合更改，而不必為不同方案添加額外的CSS。
除此之外，我們還將看到邏輯屬性提供了許多有用的速記，這些速記有助於使CSS編碼更有效，無論是否使用多種語言。而不是寬度和高度，邏輯屬性使用內聯尺寸和塊大小。為了決定要設置寬度和高度的哪個，我們必須知道文本將介紹什麼方向。
> 在下面的演示中，第一行中的段落的大小為80px。在每種情況下，將80px設置在塊方向上，無論是哪個。將其與第二行段落進行比較，該段落將每個段落設置為高度：80px。在每種情況下，高度均與屏幕相關。
看到筆 邏輯屬性：sitepoint（@sitepoint）的大小（寬度和高度） 在Codepen上。
其他尺寸屬性包括：
>有關所有尺寸選項，請參見備忘單，以及如何在每個文本方向上使用它們，以及瀏覽器支持信息。 邊距
使用邏輯屬性，設置了邊緣的邊距和邊緣塊的變化。比較在第一行中應用於每個段落的邊距 - 內線啟動的效果與邊距左：40px在下面的演示中的第二行中應用於每個段落。
>看到筆 邏輯屬性：通過SitePoint（@SitePoint）的邊距 在Codepen上。
其他保證金屬性包括：
>保證金 - 內線 - 末端
>邊緣塊啟動
使用邏輯屬性，將填充設置為帶有填充和填充塊的變化。
對於從左到右的語言，填充塊啟動：40px將在文本頂部（屏幕頂部）應用填充物。當應用於左右語言時，該填充物也將出現在屏幕頂部。對於垂直文本，填充將根據其水平方向出現在左側或右側。
將第一行中填充塊啟動的效果與填充頂點：40px在下面的演示中的第二行中應用於每個段落。看到筆 邏輯屬性：通過SitePoint（@SitePoint）填充 在Codepen上。
其他填充屬性包括：
>填充 - 啟動
>
>在每個文本方向上所有填充選項，以及瀏覽器支持詳細信息。插圖（位置元素） 您是否遇到了非常方便的插圖？它用於定位元素（例如您使用位置時：絕對）。例如，插圖：0是頂部的速記：0;右：0;底部：0;左：0;。
看到筆 邏輯屬性：插入站點點（@sitepoint） 在Codepen上。
插圖的其他屬性包括：
> inset-block-start
> inset-block
>我們可以將邊框設置為帶有邊框速記的元素，例如邊框：5px實心紅色。但是，如果我們只是想對元素的特定方面進行樣式
，我們突然要處理邊界，邊界底，邊界左側和邊界權利，為此有邏輯上的等效物。 >
>邊界的參與程度更高，因為它們涉及三個值 - 寬度（邊界的厚度），樣式（固體，虛線等）和顏色。
>>讓我們看看當我們應用邊界啟動時會發生什麼：5px固體紅色到我們的段落中，並將其與邊界左側進行比較：5px固體紅色;。
看到筆 邏輯屬性：邊境由站點點（@sitepoint） 在Codepen上。
邊界的其他邏輯屬性包括：
請注意，邊界是邊界的一個不錯的速記：從左到右流的左右邊界，邊界封口和邊界底部和邊界底。
在適用於每個文本方向時的所有組合和排列的備忘單
邊界半徑
也就是說，要選擇特定角落的合適屬性，您必須問自己是否處於元素塊方向的開頭或結束中間的選項： >
>
有關所有邊界半徑選項和瀏覽器支持信息，請參見備忘單。邊界半徑邏輯屬性需要更長的時間才能由瀏覽器支持，但是現在的支持在現代瀏覽器中是好的。
浮動和清除的邏輯屬性為如何浮動和清除元素提供了新的選項。在邏輯屬性之前，唯一的選項是浮動：左和浮動：右，清除：左和清除：右。如果文本是垂直的，則無法選擇沿與文本相同的方向浮動。 內聯啟動和內聯末端值也適用於清除屬性。 （這是一個編號的演示。） >不需要邏輯替代方案。
看到筆
邏輯屬性：按SitePoint（@sitepoint）按文本對齊
在Codepen上。
備忘單顯示瞭如何應用啟動和結束值以與各種文本方向使用。 調整大小屬性允許在指定的方向上調整某些元素的大小，現在有內聯和塊選項。
看到筆
邏輯屬性：按SitePoint（@SitePoint）調整大小
在Codepen上。
（在上面的演示中，左右框的調整大小有點瘋狂，因為dir =“ rtl”不是應用於整個文檔，而是僅應用於包含的div。
請注意，在撰寫本文時（2024年4月），這些新屬性幾乎沒有支持
croll-Behavior屬性是一種新的屬性，可完善元素滾動的溢出。我們不會在這裡深入研究，但是您可以在MDN上閱讀更多信息。 >
在2020年代初期，對CSS邏輯屬性的瀏覽器支持迅速提高，現在在主要瀏覽器中得到了強有力的邏輯屬性。
>
caniuse具有邏輯屬性支持的概述，備忘單中的每個部分還具有支持特定屬性的鏈接。 在本文中，我們介紹了當前可用的每個邏輯屬性幾乎。 （如果要走得更遠，也可以查看字幕側的邏輯屬性和尺寸的限制。）>
>
即使您不在多語言網站上工作，
不要忘記下載我們方便的邏輯屬性PDF備忘單。邊界塊啟動寬度
對於樣式，我們有這些：邊界塊啟動風格
對於顏色，我們有這些：邊界塊啟動色
>>
設置帶有邏輯屬性的邊框半徑時，我們需要考慮塊[start/end] inline [start-end]。
<span>p {
</span> <span>margin-block-start: 1em;
</span><span>}
</span>-start-start-
-end-start-
-start-end-
-end-end-
看到筆
邏輯屬性：通過SitePoint（@SitePoint）浮動
在Codepen上。
調整大小
>
>
>瀏覽器支持較舊的瀏覽器將使用第一個聲明，而較新的瀏覽器將使用第二個聲明。
但是，在整個樣式表中都可以重複這樣的代碼，因此，如果您真的擔心較舊的瀏覽器，也許現在就可以輕鬆地在邏輯屬性上進行。
>
結論
以上是CSS邏輯屬性的完整指南，並帶有備忘單的詳細內容。更多資訊請關注PHP中文網其他相關文章！
