測試你的技能：書寫模式和邏輯屬性

本技能測試的目的是評估您是否理解如何使用 CSS 中的書寫模式和邏輯屬性處理不同的文字方向。

注意：您可以嘗試在本頁面的互動式編輯器或線上編輯器（例如CodePen、JSFiddle或Glitch）中嘗試解決方案。

如果您遇到困難，可以聯絡我們的溝通渠道之一。

任務 1

在此任務中，框以水平書寫模式顯示。您可以新增一行 CSS 程式碼來更改它，使其使用垂直書寫模式，文字方向為從右到左嗎？

您的最終結果應如下面的影像所示

A box with a vertical writing mode

嘗試更新下面的即時程式碼以重新建立完成的示例

下載此任務的起點，以便在您自己的編輯器或線上編輯器中工作。

在此任務中，我們希望您使用邏輯屬性來替換width和height，以便在框垂直旋轉時保持其縱橫比。

您的最終結果應如下面的影像所示

Two boxes one horizontal the other vertical

嘗試更新下面的即時程式碼以重新建立完成的示例

下載此任務的起點，以便在您自己的編輯器或線上編輯器中工作。

在此任務中，我們希望您使用邊距、邊框和填充屬性的邏輯版本，以便框的邊緣與文字相關，而不是遵循頂部、左側、底部和右側。

您的最終結果應如下面的影像所示

Two boxes one horizontal one vertical with different margin, border and padding

嘗試更新下面的即時程式碼以重新建立完成的示例

下載此任務的起點，以便在您自己的編輯器或線上編輯器中工作。