作者：陈大羽头github：KRISACHAN在【HelloCSS】CSS语法与工作流语法规则及基本渲染流程第一章中介绍了CSS。本文将分享CSS的逻辑属性和盒子模型。在开始这篇文章之前先问大家一个问题：为什么Flexbox和Gridbox的排列规则是用start和end而不是常规的top,right,bottom,left？不要急着往下翻，我们先想一想。这个问题将由鱼头在文章中给出答案。欢迎您带着这个问题往下读。如果你已经知道答案，你也可以检查它是否与你知道的答案一致。CSS的逻辑属性2017年5月18日，W3C的CSS工作组发布了CSS逻辑属性和值Level1的第一份公开工作草案。)可以提取。这些逻辑抽象概念需要在不同的书写方式下映射到左或右、上或下等物理概念。一些CSS布局可能依赖于这些常见的逻辑概念。这个CSS模块给出逻辑属性和值，用于以逻辑方式控制布局（而不是基于物理坐标、书写方向、维度映射等）。该模块源自CSS21中有关逻辑属性和值的特性。W3C中国里面的内容就是上面复制粘贴的。对于前端，我们已经习惯使用top,right,bottom,left来定义我们的HTML元素，这和我们的物理概念是一致的。但是对于CSS这种原本为服务于图形显示而诞生的语言，其实并不匹配。你为什么这么说？writing-modewriting-mode：定义块级元素中文本的水平或垂直排列以及文本的行进方向。writing-mode有以下5个改变HTML文本书写规则的值（SVG中用到的还有几个，本文不再赘述）：writing-mode:horizo??ntal-tb;writing-mode:horizo??ntal-tb定义内容从左到右水平流动，从上到下垂直流动。下一条水平线位于上一条线的下方。writing-mode:vertical-rl;writing-mode:vertical-rl定义内容从上到下垂直流动，从右到左水平流动。下一条垂直线位于上一条线的左侧。writing-mode:vertical-lr;writing-mode:vertical-lr定义内容从上到下垂直流动，从左到右水平流动。下一条垂直线位于上一条线的右侧。书写模式：sideways-rl；（仅限Firefox41+实现）writing-mode:sideways-rl定义内容从上到下垂直流动，所有字形，即使是垂直脚本中的字形，都设置为右侧。书写模式：sideways-lr；（仅限Firefox41+实现）writing-mode:sideways-lr内容从上到下垂直流动，所有字形，甚至是垂直脚本中的字形，都设置在左侧。以上效果请看DEMO源码：lr;}.wm-srl{书写模式：sideways-rl;}.wm-slr{书写模式：sideways-lr;}.text-content{宽度：200px;填充：20px；边框：1px实心；显示：内联块；垂直对齐：顶部；padding-right:100px;
