CSS `Logical Properties and Values` (逻辑属性)：从物理方向到逻辑方向

各位观众，大家好！我是今天的主讲人，很高兴能和大家一起聊聊 CSS 的“逻辑属性和值”。别担心，“逻辑”听起来高大上，其实就是让咱们的网页更聪明、更灵活，能适应各种奇奇怪怪的阅读方向和书写模式。今天咱们就用大白话，把这个概念彻底搞明白！

一、物理属性 vs. 逻辑属性：一场方向感的革命

首先，咱们得搞清楚啥是“物理属性”，啥又是“逻辑属性”。

物理属性（Physical Properties）： 这就是咱们老朋友了，比如 top、right、bottom、left、width、height 等等。这些属性直接对应屏幕上的物理方向，就像指南针一样，指哪打哪，绝对可靠。
```
.box {
  width: 200px;
  height: 100px;
  top: 50px;
  left: 30px;
}
```
这段代码让一个盒子固定在距离顶部 50px，左边 30px 的位置。没毛病，简单粗暴。
逻辑属性（Logical Properties）： 这家伙就比较“抽象”了，它不直接对应物理方向，而是对应 内容流动的方向 。啥意思呢？想象一下，英文是从左往右写的，阿拉伯文是从右往左写的，中文竖排是从上往下写的。逻辑属性会根据这些不同的书写模式，自动调整自己的行为。
```
.box {
  inline-size: 200px; /* 相当于 width，但会根据书写模式调整 */
  block-size: 100px;  /* 相当于 height，但会根据书写模式调整 */
  inset-block-start: 50px; /* 相当于 top，但会根据书写模式调整 */
  inset-inline-start: 30px; /* 相当于 left，但会根据书写模式调整 */
}
```
这段代码看起来和上面的差不多，但厉害之处在于，如果你的网页变成了阿拉伯语， inset-inline-start 就 自动变成右边距 了！是不是很神奇？

二、为什么要用逻辑属性？

你可能会问，为啥要搞这么复杂？用原来的物理属性不是挺好的吗？

原因很简单： 国际化和响应式设计！

国际化（Internationalization）： 如果你的网站要面向全球用户，就得支持不同的语言和书写模式。用物理属性，你就得针对每种语言写一套样式，累死个人。用逻辑属性，一套样式就能搞定，省时省力，还能减少 bug。
响应式设计（Responsive Design）： 逻辑属性也能更好地适应不同的屏幕尺寸和设备。比如，你可以用 inline-size 来设置元素的宽度，它会根据容器的大小自动调整。

三、逻辑属性和值：家族成员大盘点

接下来，咱们来认识一下逻辑属性家族的成员。为了方便大家理解，我会把它们和对应的物理属性放在一起比较。

逻辑属性	物理属性	含义
`inline-size`	`width`	元素在行内方向上的尺寸。对于水平书写模式，相当于 `width`；对于垂直书写模式，相当于 `height`。
`block-size`	`height`	元素在块方向上的尺寸。对于水平书写模式，相当于 `height`；对于垂直书写模式，相当于 `width`。
`min-inline-size`	`min-width`	元素在行内方向上的最小尺寸。
`max-inline-size`	`max-width`	元素在行内方向上的最大尺寸。
`min-block-size`	`min-height`	元素在块方向上的最小尺寸。
`max-block-size`	`max-height`	元素在块方向上的最大尺寸。
`margin-inline-start`	`margin-left`	元素在行内方向起始位置的外边距。对于从左到右的书写模式，相当于 `margin-left`；对于从右到左的书写模式，相当于 `margin-right`。
`margin-inline-end`	`margin-right`	元素在行内方向结束位置的外边距。
`margin-block-start`	`margin-top`	元素在块方向起始位置的外边距。
`margin-block-end`	`margin-bottom`	元素在块方向结束位置的外边距。
`padding-inline-start`	`padding-left`	元素在行内方向起始位置的内边距。
`padding-inline-end`	`padding-right`	元素在行内方向结束位置的内边距。
`padding-block-start`	`padding-top`	元素在块方向起始位置的内边距。
`padding-block-end`	`padding-bottom`	元素在块方向结束位置的内边距。
`inset-inline-start`	`left`	元素在行内方向起始位置的偏移量。用于绝对定位或固定定位。
`inset-inline-end`	`right`	元素在行内方向结束位置的偏移量。用于绝对定位或固定定位。
`inset-block-start`	`top`	元素在块方向起始位置的偏移量。用于绝对定位或固定定位。
`inset-block-end`	`bottom`	元素在块方向结束位置的偏移量。用于绝对定位或固定定位。
`border-inline-start`	`border-left`	元素在行内方向起始位置的边框。
`border-inline-end`	`border-right`	元素在行内方向结束位置的边框。
`border-block-start`	`border-top`	元素在块方向起始位置的边框。
`border-block-end`	`border-bottom`	元素在块方向结束位置的边框。
`border-width-inline-start`	`border-left-width`	元素在行内方向起始位置的边框宽度。
`border-width-inline-end`	`border-right-width`	元素在行内方向结束位置的边框宽度。
`border-width-block-start`	`border-top-width`	元素在块方向起始位置的边框宽度。
`border-width-block-end`	`border-bottom-width`	元素在块方向结束位置的边框宽度。
`border-style-inline-start`	`border-left-style`	元素在行内方向起始位置的边框样式。
`border-style-inline-end`	`border-right-style`	元素在行内方向结束位置的边框样式。
`border-style-block-start`	`border-top-style`	元素在块方向起始位置的边框样式。
`border-style-block-end`	`border-bottom-style`	元素在块方向结束位置的边框样式。
`border-color-inline-start`	`border-left-color`	元素在行内方向起始位置的边框颜色。
`border-color-inline-end`	`border-right-color`	元素在行内方向结束位置的边框颜色。
`border-color-block-start`	`border-top-color`	元素在块方向起始位置的边框颜色。
`border-color-block-end`	`border-bottom-color`	元素在块方向结束位置的边框颜色。
`clear`		可以使用 `inline` 和 `block` 值来定义清除浮动的方向。例如, `clear: inline-start` 等价于 `clear: left` (对于从左到右的布局)。
`float`		同样可以使用 `inline` 和 `block` 值来定义浮动的方向。例如, `float: inline-start` 等价于 `float: left` (对于从左到右的布局)。

一些补充说明：

行内方向（Inline Direction）： 指的是文字在行内排列的方向。英文、中文（横排）是从左到右，阿拉伯文、希伯来文是从右到左。
块方向（Block Direction）： 指的是块级元素堆叠的方向。英文、中文（横排）是从上到下，中文（竖排）是从右到左。
writing-mode: 是一个控制文本行是水平还是垂直排列的 CSS 属性。它可以影响 inline-size 和 block-size 的行为. 例如, writing-mode: vertical-rl 会使文本垂直排列, 并从右向左流动。

四、实战演练：几个小例子

光说不练假把式，咱们来几个实际的例子，看看逻辑属性是怎么发挥作用的。

例子 1：简单的盒子模型

<div class="box">Hello, World!</div>

.box {
  inline-size: 300px;
  block-size: 150px;
  padding-inline-start: 20px;
  padding-inline-end: 20px;
  padding-block-start: 10px;
  padding-block-end: 10px;
  border: 1px solid black;
}

这段代码创建了一个 300px 宽、 150px 高的盒子，左右内边距为 20px，上下内边距为 10px。不管你的网页是英文还是阿拉伯文，这个盒子的样式都会保持一致。

例子 2：带有边框的按钮

<button class="button">Click Me</button>

.button {
  inline-size: 120px;
  block-size: 40px;
  border-inline-start: 2px solid blue;
  border-inline-end: 2px solid red;
  border-block-start: 2px solid green;
  border-block-end: 2px solid orange;
}

这个例子创建了一个按钮，左边框是蓝色，右边框是红色，上边框是绿色，下边框是橙色。同样，即使切换语言，边框的位置也不会改变。

例子 3：使用 inset 进行定位

<div class="container">
  <div class="positioned"></div>
</div>

.container {
  position: relative;
  inline-size: 400px;
  block-size: 300px;
  border: 1px solid gray;
}

.positioned {
  position: absolute;
  inline-size: 100px;
  block-size: 50px;
  inset-inline-start: 20px;
  inset-block-start: 30px;
  background-color: lightblue;
}

这个例子将一个蓝色的盒子定位在容器的左上角，距离左边 20px，距离顶部 30px。使用 inset-inline-start 和 inset-block-start，即使容器的书写模式改变，盒子的位置也会保持相对不变。

例子 4: 结合 writing-mode 使用

<div class="container">
  <div class="box">Hello</div>
</div>

.container {
  writing-mode: vertical-rl; /* 垂直书写，从右到左 */
  width: 200px;
  height: 300px;
  border: 1px solid black;
}

.box {
  inline-size: 50px;
  block-size: 100px;
  background-color: lightcoral;
  margin-block-start: 20px;
  margin-inline-start: 30px;
}

在这个例子中，我们将容器的 writing-mode 设置为 vertical-rl，也就是垂直书写，从右到左。可以看到， inline-size 和 block-size 的含义发生了变化。 inline-size 现在对应的是水平方向的尺寸， block-size 对应的是垂直方向的尺寸。 margin-block-start 相当于 margin-right, margin-inline-start 相当于 margin-top。

五、浏览器兼容性

虽然逻辑属性很强大，但是它们的浏览器兼容性还需要注意。大部分现代浏览器都已经支持了逻辑属性，但是对于一些老旧的浏览器，可能需要使用一些 polyfill 或者 fallback 的方案。

检查 caniuse.com: 访问 caniuse.com，搜索具体的逻辑属性，可以查看它们在不同浏览器中的支持情况。
使用 fallbacks: 可以使用传统的物理属性作为 fallbacks，确保在不支持逻辑属性的浏览器中也能正常显示。
```
.box {
  width: 200px; /* Fallback */
  inline-size: 200px;
}
```

六、总结：拥抱逻辑，走向未来

今天我们一起学习了 CSS 的逻辑属性和值。它们是构建国际化、响应式网页的利器，能让我们的代码更简洁、更易维护。

当然，学习新事物需要一个过程。一开始可能会觉得有点绕，但是只要多加练习，就能熟练掌握。相信在未来的开发中，逻辑属性一定会发挥越来越重要的作用。

希望今天的分享对大家有所帮助。谢谢大家！

补充说明 (Q&A 环节预设):

Q: 逻辑属性和 direction: rtl 有什么区别？
- A: direction: rtl 主要影响文本的排列方向和一些元素的默认对齐方式。它不会影响盒模型的物理方向，比如 left 和 right 仍然指向屏幕的左边和右边。逻辑属性则更底层，它们会根据书写模式 重新定义 盒模型的方向。
Q: 什么时候应该使用逻辑属性？什么时候应该使用物理属性？
- A: 如果你的网站需要支持多种语言和书写模式，或者需要更好地适应不同的屏幕尺寸，那么应该优先使用逻辑属性。如果你的网站只需要支持一种语言，而且对响应式设计的要求不高，那么可以使用物理属性。但是，为了代码的可维护性和未来的扩展性，建议尽可能地使用逻辑属性。
Q: 如何判断一个元素是行内方向还是块方向？
- A: 这取决于元素的 display 属性和 writing-mode 属性。对于 display: block 的元素，块方向通常是垂直方向，行内方向通常是水平方向。对于 display: inline 或 display: inline-block 的元素，则需要考虑 writing-mode 的影响。
Q: 逻辑属性会影响 JavaScript 的计算吗？
- A: 是的，逻辑属性会影响 JavaScript 中获取元素尺寸和位置的计算。比如，如果你用 element.offsetWidth 获取一个元素的宽度，那么这个值会根据 writing-mode 和逻辑属性的设置而变化。因此，在使用 JavaScript 操作元素时，也要注意逻辑属性的影响。
Q: 是否有简写的逻辑属性？
- A: 类似于物理属性，也有一些简写的逻辑属性。例如，margin-inline 可以同时设置 margin-inline-start 和 margin-inline-end。同样，margin-block 可以同时设置 margin-block-start 和 margin-block-end。类似的，也有 padding-inline, padding-block, border-inline, border-block 等简写属性。
Q: 在 CSS Grid 和 Flexbox 中，逻辑属性有什么作用？
- A: 在 CSS Grid 和 Flexbox 中，逻辑属性可以用来定义主轴和交叉轴的方向。比如，你可以使用 flex-direction: row 或 flex-direction: column 来设置 Flexbox 的主轴方向，也可以使用 grid-template-columns 和 grid-template-rows 来定义 Grid 布局的列和行。这些属性都可以结合逻辑属性来使用，以实现更加灵活和可维护的布局。例如，可以使用 grid-template-columns: repeat(auto-fit, minmax(inline-size: 200px, 1fr)) 来创建一个响应式的 Grid 布局，其中 inline-size 会根据书写模式自动调整。

希望这些补充说明能帮助大家更好地理解逻辑属性。如果大家还有其他问题，欢迎随时提问！

发表回复 取消回复

发表回复取消回复