資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究CSS 中的邏輯屬性
在 CSS 中，邏輯屬性允許開發人員根據網頁的邏輯結構而不是物理佈局來定義樣式。這意味著我們可以根據文字方向或內容流來應用 CSS。
主要使用邏輯屬性來設定 HTML 元素的邊距、填充和邊框。它包含邊距、填充和邊框屬性的不同變體。
可以根據塊和內聯維度定義邏輯屬性。
塊維度 - 塊維度表示內容流的垂直方向。例如，在英語文字中，方向是從左到右。因此，塊維度處理元素的頂部和底部。
內聯維度 - 內聯維度表示與內容或文字方向相同的方向。對於英語，左右是內聯維度。
讓我們看看 CSS 中一些常用的邏輯屬性。
border-block - 它設定頂部和底部的邊框。
border-inline - 它設定左側和右側的邊框。
border-block-start - 它設定頂部的邊框。
border-block-end - 它設定底部的邊框。
margin-inline - 它設定左側和右側的邊距。
padding-inline - 它設定左側和右側的填充。
padding-inline-start - 它設定左側的填充。
margin-inline-end - 它設定底部的填充。
border-inline-end-width - 它設定右側邊框的寬度。
border-block-start-style - 它設定頂部邊框的樣式。
在以上屬性中，使用者可以觀察到我們需要使用“block”表示頂部和底部，使用“inline”表示左側和右側。此外，使用“start”表示左側和頂部，使用“end”表示右側和底部。
為什麼應該使用邏輯屬性而不是普通的 CSS 屬性？
透過觀察以上屬性的功能，首先想到的問題是我們是否可以使用普通的 CSS 屬性來實現相同的樣式，以及為什麼我們應該使用邏輯屬性。這是您的答案。
有時，我們需要為 HTML 元素設定左右邊距。我們可以使用邊距屬性的“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;
語法
使用者可以按照以下語法在 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>
示例 2
在下面的示例中，我們演示了與邊框相關的邏輯 CSS 屬性。我們使用“border-block-start”應用頂部邊框，使用“border-block-end”應用底部邊框。此外，我們使用“border-inline-start”應用左側邊框，使用“border-inline-end”應用右側邊框。
在輸出中，使用者可以觀察到 div 元素不同側的不同邊框。
<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>
示例 3
在下面的示例中，我們在 flexbox 中應用了與邊距和填充相關的 CSS 邏輯屬性。在這裡，我們在容器 div 元素內建立了三個 div 元素。之後，我們使用“padding-inline”在容器 div 元素中應用右側和左側填充。
<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 中使用邏輯屬性。大多數邏輯屬性都與邊距、填充和邊框相關。但是，也存在一些與溢位相關的邏輯屬性，開發人員可以在網際網路上閱讀。在使用邏輯屬性時，使用者需要關注“block”和“inline”維度以及“start”和“end”方向。
177 次檢視
