CSS之writing-mode

writing-mode的原本作用

writing-mode 就是用来实现文字可以竖着呈现的。

 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>writing-modetitle>
    <style>
        .div2 {
            writing-mode: tb-rl;
            -webkit-writing-mode: vertical-rl;
            writing-mode: vertical-rl;
        }
    style>
head>
<body>
<div class="div1">
    <b>江城子b>
    <p>十年生死两茫茫,<br>不思量,<br>自难忘。<br>
        千里孤坟,<br>无处话凄凉。<br> 纵使相逢应不识,<br>尘满面,<br>鬓如霜。p>
div>
<div class="div2">
    <b>江城子b>
    <p>夜来幽梦忽还乡,<br>小轩窗,<br>正梳妆。<br>相顾无言,<br>惟有泪千行。<br>
        料得年年肠断处,<br>明月夜,<br>短松冈。p>
div>
body>
html>

CSS3语法

/* 关键字值 */
writing-mode: horizontal-tb;    /* 默认值文本流是水平方向(horizontal)的,元素是从上往下(tb:top-bottom)堆叠的*/
writing-mode: vertical-rl; /*垂直方向(vertical)展示,然后阅读的顺序是从右往左(rl:right-left)*/
writing-mode: vertical-lr; /*垂直方向(vertical)展示,然后阅读的顺序还是默认的从左往右(lr:left-right),也就是仅仅是水平变垂直*/

/* 全局值-关键字inherit IE8+,initial和unset IE13才支持 */
writing-mode: inherit;
writing-mode: initial;
writing-mode: unset;

英文字符横过来了,可以试试使用text-orientation:upright让其直立,IE不支持,FireFox, Chrome支持

IE8下的writing-mode我们需要关注:初始值lr-tb, tb-rl以及tb-lr,分别对应于CSS3中的horizontal-tb, vertical-rl以及vertical-lr

writing-mode: lr-tb | tb-rl | tb-lr (IE8+);
writing-mode: horizontal-tb | vertical-rl | vertical-lr; 

如果元素是默认的水平流,则垂直margin会重叠;如果元素是垂直流,则水平margin会重叠。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>writing-modetitle>
    <style>
        p{
            -webkit-margin-before: 0em;
            -webkit-margin-after: 0em;
        }
        .div1 {
            border: 1px solid goldenrod;
            width: 200px;
            margin: 50px;
        }
        .div2 {
            border: 1px solid goldenrod;
            width: 200px;
            margin: 50px;

            writing-mode: tb-rl;
            -webkit-writing-mode: vertical-rl;
            writing-mode: vertical-rl;
        }
        p{
            margin: 20px;
            background: aqua;
        }
    style>
head>
<body>
<div class="div1">
    <P>margin 20pxP>
    <P>margin 20pxP>
div>
<div class="div2">
    <P>margin 20pxP>
    <P>margin 20pxP>
div>
body>
html>

应用1 使用text-align:center实现图片垂直居中


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>writing-modetitle>
    <style>
        *{margin: 0;padding: 0}
        p{
            -webkit-margin-before: 0em;
            -webkit-margin-after: 0em;
        }
        div {
            border: 1px solid goldenrod;
            width: 400px;
            margin: 50px;
            height: 300px;
            text-align: center;
        }
        .div2 {
            writing-mode: tb-rl;
            -webkit-writing-mode: vertical-rl;
            writing-mode: vertical-rl;
            text-align: center;
        }
        p{
            margin: 20px;
            background: aqua;
        }
    style>
head>
<body>
<div class="div1">
    <img src="../img/11.jpg" alt="">
div>
<div class="div2">
    <img src="../img/11.jpg" alt="">
div>
body>
html>

你可能感兴趣的:(html+css)