数据结构
网络
关系数据库管理系统
操作系统
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 次查看
