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