writing-mode竖排文字_python margin: 2em; writing-mode: vertical-rl;-程序员宅基地

技术标签：笔记 css3

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

本文链接：https://blog.csdn.net/weixin_41056807/article/details/109577532

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Java 解决同步数据时 Read timed out； nested exception is java.net.SocketTimeoutException: Read timed out_read timed out; nested exception is java.net.socke-程序员宅基地

文章浏览阅读1.3k次，点赞12次，收藏6次。Java 解决同步数据时 Read timed out; nested exception is java.net.SocketTimeoutException: Read timed out_read timed out; nested exception is java.net.sockettimeoutexception: read ti

Docker安装Nginx详细步骤-程序员宅基地

文章浏览阅读880次。安装Nginx服务器可以使用Docker容器，详细步骤如下：1. 使用docker pull命令从Docker Hub下载Nginx镜像：docker pull nginx2. 使用docker run命令运行Nginx容器：docker run --name my_nginx -d -p 80:80 nginx3. 进入容器：docker exec -it my_nginx /bin/bash4..._docker 安装nginx

Dubbo源码分析，读完定能有所收获_dubbo源码和-程序员宅基地

文章浏览阅读6.1k次，点赞25次，收藏29次。Dubbo、源码、调用关系、整体设计、分层、服务注册与消费源码分析、注册中心Zookeeper剖析、目录结构、注册过程分析、URL规则分析、消费过程分析、拓展SPI源码分析、getExtensionLoader加载过程、Adaptive功能实现原理、集群容错源码分析、信息缓存Directory、路由规则实现原理、Cluster组件、负载均衡源码分析、Invoker执行逻辑、网络通信原理剖析、数据包结构分析、数据协议详解、粘包和拆包问题_dubbo源码和

x722网卡支持百兆吗_英特尔（Intel）X722-DA2以太网网络适配器万兆服务器网卡X722DA2...-程序员宅基地

文章浏览阅读1.4k次。英特尔以太网网络适配器 X722-DA2基本要素产品集700 系列网络适配器(高达 40GbE)状态Launched发行日期:Q4'18垂直市场:Server中等电缆:Copper布线类型:SFP+ Direct Attached Twinaxial Cabling up to 10m支架高度:Low Profile and Full Height支持的操作系统订购与规格信息Intel Et..._塔式服务器中的intel(r) ethernet connection x722 for 1gbe是网线接口吗

Docker容器下Redis/ES/RabbitMQ/MongoDB/FastDFS启动命令总结_bitnami etcd镜像地址-程序员宅基地

文章浏览阅读1k次。1.Docker启动命令介绍例:docker run -d --name myredis -p 6379:6379 redis 命令解析: run:运行容器 -d:表示后台运行,守护进程 --name [myredis]:自定义一个名称 //[中括号内的是自己写,且命令里面没有中括号] -p 6379:6379 容器里面的端口映射到外部电脑的端口2.Docker中..._bitnami etcd镜像地址

git 使用场景本地分支关联远程分支-程序员宅基地

文章浏览阅读796次，点赞8次，收藏7次。【代码】git 使用场景本地分支关联远程分支。

随便推点

完美解决丨 - [SyntaxError: invalid syntax](#SyntaxError-invalid-syntax)_invalid create index syntax, use `create index for-程序员宅基地

文章浏览阅读3.6k次，点赞76次，收藏5次。「SQL面试题库」是由不吃西红柿发起，全员免费参与的SQL学习活动。我每天发布1道SQL面试真题，从简单到困难，涵盖所有SQL知识点，我敢保证只要做完这100道题，不仅能轻松搞定面试，代码能力和工作效率也会有明显提升。_invalid create index syntax, use `create index for ...` instead. (line 1, co

[网络安全自学篇] 三十五.恶意代码攻击检测及恶意样本分析_如何在数据包中分析那些是带有恶意攻击的和正常语句-程序员宅基地

文章浏览阅读1.7w次，点赞14次，收藏78次。本文主要结合作者的《系统安全前沿》作业，相关论文及绿盟李东宏老师的博客，从产业界和学术界分别详细讲解恶意代码攻击溯源的相关知识。在学术界方面，用类似于综述来介绍攻击追踪溯源的不同方法；在产业界方面，主要参考李东宏老师从企业恶意样本分析的角度介绍溯源工作。关于攻击溯源的博客和论文都比较少，希望这篇文章对您有所帮助，如果文章中存在错误或理解不到位的地方，还请告知作者与海涵~_如何在数据包中分析那些是带有恶意攻击的和正常语句

如何带好一个团队？团队管理的要点有哪些？_如何管理好一个团队-程序员宅基地

文章浏览阅读2k次。以目标为基准，以结果为导向，一个目标明确的团队，项目成员的个人目标也会更加明确，从而发挥最大的效率。合理运用自己的权限是管理者必修的一门功课，因为你的一个决策会影响到员工的工作态度、发展等要素，所以一定要深思熟虑，对团队和团队中的每一个人负责。在项目管理中，使用项目管理软件可以实现全面，可视化管理，在软件上制定计划，统一分配任务，不仅能够提高效率，还能够实现更好的管理。作为管理者，要学会适度的放权，有的放矢，管理者手中的权限是为了团队更好的发展，肩负着重要的责任。实现有效沟通，避免信息孤岛的出现。_如何管理好一个团队