在CSS中，逻辑属性允许开发者根据网页的逻辑结构而不是物理布局来定义样式。这意味着我们可以根据文本方向或内容流应用CSS。
主要使用逻辑属性来设置HTML元素的边距、内边距和边框。它包含了边距、内边距和边框属性的不同变体。
逻辑属性可以根据块级和内联尺寸进行定义。
-
Block dimension − The block dimension represents the perpendicular direction of the content flow. For example, in English text direction is left to right. So, block dimensions handle the top and bottom of the element.
-
内联尺寸 – 内联尺寸表示与内容或文本方向相同的方向。对于英语来说，左侧和右侧是内联尺寸。
Let’s look at some commonly used logical properties in CSS.
-
Border-block − 它设置了上下边框。
-
Border-inline − 设置左右边框。
-
Border-block-start − It sets the top border.
-
Border-block-end − 它设置了底部边框。
-
Margin-inline − It sets the left and right margins.
-
Padding-inline − It sets the left and right padding.
-
Padding-inline-start − It sets the left padding.
-
Margin-inline-end − It sets the bottom padding.
-
Border-inline-end-width − 它设置右边框的宽度。
-
Border-block-start-style − 它设置了顶部边框的样式。
In the above properties, users can observe that we require to use ‘block’ for top and bottom and ‘inline’ for left and right. Also, ‘start’ for left and top, and ‘end’ for right and bottom.
为什么我们应该使用逻辑属性而不是普通的CSS属性？
通过观察上述属性的功能，首先想到的问题是我们是否可以使用普通的CSS属性来实现相同的样式，以及为什么我们应该使用逻辑属性。以下是您的答案。
有时候，我们需要为HTML元素设置左右边距。我们可以使用margin属性的’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;
语法
Users can follow the syntax below to use logical properties in 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>
Example 2
In the example below, we have demonstrated the logical CSS properties related to the border. We used the ‘border-block-start’ to apply the top border and the ‘border-block-end’ to apply the bottom border. Furthermore, we used the ‘border-inline-start’ to apply the left border and ‘border-inline-end’ to apply the right border.
In the output, users can observe the different borders for the different sides of the div element.
<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>
Example 3
的翻译为：
示例3
In the example below, we applied the CSS logical properties related to the margin and padding in the flexbox. Here, we have created three div elements inside the container div element. After that, we used the ‘padding-inline’ to apply right and left padding in the container div element.
<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中使用逻辑属性。大多数逻辑属性与边距、内边距和边框有关。然而，与溢出相关的一些逻辑属性也存在，开发人员可以在互联网上查阅。在使用逻辑属性时，用户需要关注“块”和“内联”维度以及“开始”和“结束”方向。
以上就是CSS 中的逻辑属性的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » CSS 中的逻辑属性
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
