首页

投稿

你以为在写布局，其实把方向写死了？6分钟讲清楚CSS逻辑属性

2.8万

9

2026-03-21 18:00:00

未经作者授权，禁止转载

很多 CSS 代码表面能跑，但其实在不知不觉中把布局意图写死在了 left/right、width/height 这些物理方向上。一旦遇到竖排、多语言或方向变化，样式就容易错位。这期视频会用两个具体 demo 讲清 CSS 逻辑属性解决什么问题，以及它和物理属性该怎么搭配使用。 🔥 本期核心看点 ✅ 为什么 max-width、border-left、padding-left 有时会把布局意图写偏 ✅ block、inline、start、end 到底分别指什么 ✅ writing-mode 和 dir 怎么共同决定逻辑方向 ✅ 什么场景该用逻辑属性，什么场景继续用 top、right 更合理 💡 视频空降时间坐标、源码链接请看置顶评论

CSS逻辑属性

Logical Properties

多语言适配

林想的Web工坊发消息

全网同名讨论群置顶动态

10分钟彻底搞懂CSS盒模型(Box Model)，告别布局烦恼！

10:06

12分钟搞懂CSS Flex布局告别布局难题

12:28

12分钟搞懂CSS Grid 一行代码实现响应式布局！

11:57

7分钟彻底搞懂Flex和Grid的核心区别与选择

07:03

3分钟搞懂 CSS 伪元素 ::before & ::after

02:50

4分钟玩转CSS定位

03:58

12分钟彻底搞懂 CSS 动画与过渡

12:05

6分钟彻底搞懂CSS em和rem，告别选择困难症！

06:26

8分钟解决你工作中99%的CSS背景图难题！

07:46

10分钟讲透CSS文档流：从BFC底层原理到外边距折叠

10:21

11分钟彻底搞懂CSS媒体查询，响应式布局其实没那么难

11:03

6分钟讲清楚CSS逻辑属性你以为在写布局，其实把方向写死了？

05:58

讲清 inline style、@layer 和 specificity

02:34

讲清 vh、svh、lvh、dvh 怎么选

03:35

绝对定位还是 CSS Grid？背景海报文字叠加到底该怎么选

04:06

Firefox DevTools 好用在哪？CSS 初学者别只用 Chrome

05:19

CSS 隐藏元素前，你需要先判断这件事

04:52

CSS 颜色表达方式：RGB、Hex、HSL、OKLCH 到底怎么选？

05:23

z-index 为什么会失效？理解 CSS Stacking Context 的核心规则

06:36

顶部