文章目录
一、引子二、writing-mode1.语法horizontal-tb（默认：水平方向，文字 从左到右，行 从上到下）vertical-rl（垂直方向，文字 从上到下，行 从右到左）vertical-lr（垂直方向，文字 从上到下，行 从左到右）sideways-rl (实验值)sideways-lr (实验值)
2.属性搭配（1）盒子垂直居中 —— `margin: auto 0;`（2）文本图片垂直居中 —— `text-align: center;`（3）首行缩进 变 文字下沉 —— `text-indent`（4）其他
3.前世今生
三、拓展学习direction
⭐️ 好书推荐《Node.js从基础到项目实践（视频教学版）》
文档：writing-mode - CSS：层叠样式表 | MDN
一、引子
项目中有需求需要文字垂直排布，第一时间想到了 CSS 中的 direction 这个属性，但这个属性只能设置文字“从左到右“或从右到左，经过查找才发现有个”生僻属性“ —— writing-mode
如下即可实现：
writing-mode: vertical-lr;
二、writing-mode
writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。
1.语法
/* 关键字值 */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
/* 全局值 */
writing-mode: inherit;
writing-mode: initial;
writing-mode: revert;
writing-mode: revert-layer;
writing-mode: unset;
horizontal-tb（默认：水平方向，文字 从左到右，行 从上到下）
对于左对齐（ltr）文本，内容从左到右水平流动。对于右对齐（rtl）文本，内容从右到左水平流动。下一水平行位于上一行下方。
vertical-rl（垂直方向，文字 从上到下，行 从右到左）
对于左对齐（ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐（rtl）文本，内容从下到上垂直流动，下一垂直行位于上一行右侧。
vertical-lr（垂直方向，文字 从上到下，行 从左到右）
对于左对齐（ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐（rtl）文本，内容从下到上垂直流动，下一垂直行位于上一行左侧。
sideways-rl (实验值)
对于左对齐（ltr）文本，内容从下到上垂直流动。对于右对齐（rtl）文本，内容从上到下垂直流动。所有字形（即使是垂直文本中的字形）都朝向右侧。
sideways-lr (实验值)
对于左对齐（ltr）文本，内容从上到下垂直流动。对于右对齐（rtl）文本，内容从下到上垂直流动。所有字形（即使是垂直文本中的字形）都朝向左侧。
2.属性搭配
writing-mode 可以改变文本排布方向，那么一些与文字相关的属性也会有更多妙用：
（1）盒子垂直居中 —— margin: auto 0;
.container {
width: 100%;
height: 100%;
background-color: #f00;
writing-mode: vertical-lr;
}
.container .content {
height: 100px;
width: 200px;
margin: auto 0;
background-color: #0f0;
}
注意：定宽定高
（2）文本图片垂直居中 —— text-align: center;
我是一行文字
程序边界
.container {
width: 100%;
height: 100%;
background-color: #0fF;
writing-mode: vertical-lr;
text-align: center;
}
程序边界 原文地址：https://iseeu.blog.csdn.net/article/details/131709017
（3）首行缩进 变 文字下沉 —— text-indent
我是一行文字
程序边界
.container {
width: 100%;
height: 100%;
background-color: #0fF;
writing-mode: vertical-lr;
text-indent: 2rem;
}
绝妙应用 https://www.zhangxinxu.com/study/201604/writing-mode-text-indent-vertical-down.html
程序边界 原文地址：https://iseeu.blog.csdn.net/article/details/131709017
（4）其他
更多玩法慢慢探索发现，未完待续。。。
3.前世今生
writing-mode属性 最初只是ie中的属性，只有ie支持，现在在css3中谷歌，火狐也开始支持。
所以使用的时候就需要记住两套不同的语法，ie的私有属性和css3的规范属性
如果只需要兼容到ie8+就可以只使用css3的规范属性就可以了
三、拓展学习
direction
文档：direction - CSS：层叠样式表 | MDN
direction CSS 属性用于设置文本、表格列和水平溢出的方向。
改变CSS世界纵横规则的writing-mode属性 « 张鑫旭-鑫空间-鑫生活writing-mode属性 css古文写法
⭐️ 好书推荐
《Node.js从基础到项目实践（视频教学版）》
《Node.js从基础到项目实践（视频教学版）》以理论结合实践的形式，讲解了Node.js 基础、框架、进阶知识和项目实践。本书为视频教学版，每一章节都有相对应的视频讲解，通过视频讲解可快速切入主题，提高学习效率。
全书分为4 大部分，共13 章，分别是Node.js 基础入门、Node.js 框架、Node.js 进阶以及企业项目实践。其中，第1～3 章为Node.js 基础入门讲解，包括Node.js 核心模块、自定义模块、第三方模块；第4～7 章为Node.js 框架讲解，包括Express 流行框架、MySQL 数据库、在Express 框架中操作MySQL 数据库以及Express 框架身份验证；第8～12 章为Node.js 进阶讲解，包括Node.js 事件循环、Koa 框架、socket.io、网络爬虫、GraphQL 基础语法；第13 章为企业项目实践讲解，使用Express 框架和MySQL 数据库完成x闻管理系统API 的开发。
文章来源
您阅读本篇文章共花了：
发表评论