writing-mode
学习参考 MDN
1.原理
和float属性有些类似，writing-mode原本设计的是控制内联元素的显示的（即所谓的文本布局-Text Layout）。
因为在亚洲，尤其像中国这样的东亚国家，存在文字的排版不是水平式的，而是垂直的，例如中国的古诗古文。
2.writing-mode语法
<style>
writing-mode: horizontal-tb; /* 默认值 */
①默认值horizontal-tb表示，文本流是水平方向(horizontal)的，
元素是从上往下(tb:top-bottom)堆叠的。
②vertical-rl表示文本是垂直方向(vertical)展示，
然后阅读的顺序是从右往左(rl:right-left)，跟我们古诗的阅读顺序一致。
③vertical-lr表示文本是垂直方向(vertical)展示，
然后阅读的顺序还是默认的从左往右(lr:left-right)，也就是仅仅是水平变垂直。
</style>
如下，分别对应①②③所展示的显示方式：
3.demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.verticle-mode {
writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
/* IE7比较弱，需要做点额外的动作 */
.verticle-mode {
*width: 120px;
}
.verticle-mode h4,
.verticle-mode p {
*display: inline;
*writing-mode: tb-rl;
}
.verticle-mode h4 {
*float:right;
}
</style>
</head>
<body>
<h4>咏柳</h4>
<p>碧玉妆成一树高，<br>万条垂下绿丝绦。<br>不知细叶谁裁出，<br>二月春风似剪刀。</p>
<div class="verticle-mode">
<h4>咏柳</h4>
<p>碧玉妆成一树高，<br>万条垂下绿丝绦。<br>不知细叶谁裁出，<br>二月春风似剪刀。</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: #180000;
color: #ffffff;
}
.intro {
-webkit-writing-mode: vertical-rl;
writing-mode: tb-rl;
margin: auto;
margin-top: 50px;
width: 370px;
height: 270px;
}
.tb-rl {
list-style: none;
margin-left: 50px;
line-height: 25px;
}
h1 {
font-size: 20px;
margin-left: 10px;
padding-right: 5px;
border-right: 2px solid #ffffff;
height: 150px;
}
</style>
</head>
<body>
<div class="course">
<ul class="intro">
<li class="tb-rl">
<h1>课程简介>></h1>
本课程把中国传统作为一个整体加以观照，探讨传统中国的社会、政治以及文化生活同中国传统哲学之间的关系，从文化的观念……【详细内容】
</li>
<li class="tb-rl">
<h1>课程负责人>></h1>
李老师，博士，某著名师范大学老师，从事国学教育和培训多年，经验极为丰富……【详细内容】
</li>
</ul>
</div>
</body>
</html>
4.附加
css属性前加前缀有什么用？
现在主要流行的浏览器内核主要有：
Trident内核：主要代表为IE浏览器
Gecko内核：主要代表为Firefox
Presto内核：主要代表为Opera
Webkit内核：产要代表为Chrome和Safari
而这些不同内核的浏览器，CSS3属性（部分需要添加前缀的属性）对应需要添加不同的前缀，
也将其称之为浏览器的私有前缀，添加上私有前缀之后的CSS3属性可以说是对应浏览器的私有属性：
Trident内核：前缀为-ms
Gecko内核：前缀为-moz
Presto内核：前缀为-o
Webkit内核：前缀为-webkit