新旧CSS逻辑属性和盒子模型对比

为什么Flex box和Grid box是基于start 、结束 是排列规则，而不是常规的 top 、 right 、bottom 后接 左？

先别急着往下看，先想想。

这个问题，鱼头将在文章中给出答案。欢迎您继续阅读这个问题。如果你已经知道答案，你还可以看看它与你知道的答案是否一致。

CSS 逻辑属性

2017 年 5 月 18 日，W3C CSS 工作组发布了 CSS 逻辑属性和值第一个工作草案​​​​​Level 1（第一个公共工作草案）。在不同的书写模式下，可以提取一般的抽象概念（例如起始位置或行）。这些逻辑抽象概念需要在不同的书写方式下映射到左、右、上、下等物理概念。某些 CSS 布局可能依赖于这些常见的逻辑概念。这个CSS模块提供了逻辑属性和值来以逻辑方式管理布局（而不是基于物理坐标、书写方向、尺寸分配等）。该模块源自与逻辑属性和值相关的 CSS21 函数。

以上是W3C中国的内容复制粘贴的。

对于前面，我们习惯使用顶部，右，底部 , 左 定义我们的 HTML元素，这符合我们的物理概念。但对于CSS这种原本用于图形和文本渲染的语言来说，实际上是不匹配的。为什么这么说？

写入模式

写入模式：定义文本的水平或垂直排列以及文本在块级元素中移动的方向。

写入模式以下HTML文本写入规则的值总共有5个变化（有几个也用于SVG） ，这是可能发生的本文不讨论）：

写入模式：horizo​​ntal-tb；

写入模式：horizo​​ntal-tb定义内容从左到右水平流动，从上到下垂直流动。下一条水平线位于上一条水平线的下方。

写入模式：vertical-rl；

写入模式：vertical-rl定义内容从上到下垂直流动，从右到左水平流动。下一条垂直线位于上一条垂直线的左侧。

写入模式：vertical-lr；

写入模式：vertical-lr定义内容从上到下垂直流动，从左到右水平流动。下一条垂直线位于上一条垂直线的右侧。

书写模式：sideways-rl； （仅限 Firefox41+）

书写模式：sideways-rl 定义从上到下垂直流动的内容，所有字形，甚至垂直脚本中的字形，都放置在右侧。

书写模式：side-lr； （仅 Firefox41+ 实现）

书写模式：sideways-lr内容从上到下垂直流动，所有字形，即使是垂直脚本的字形，都放置在左侧。

如上效果请参见DEMO

源码如下：

.wm-htb {
	writing-mode: horizontal-tb;
}
.wm-vrl {
	writing-mode: vertical-rl;
}
.wm-vlr {
	writing-mode: vertical-lr;
}
.wm-srl {
	writing-mode: sideways-rl;
}
.wm-slr {
	writing-mode: sideways-lr;
}
.text-content {
    width: 200px;
    padding: 20px;
    border: 1px solid;
    display: inline-block;
    vertical-align: top;
    padding-right: 100px;
}

<div class="text-content wm-htb">writing-mode: horizontal-tb;</div>
<div class="text-content wm-vrl">writing-mode: vertical-rl;</div>
<div class="text-content wm-vlr">writing-mode: vertical-lr;</div>
<div class="text-content wm-srl">writing-mode: sideways-rl;</div>
<div class="text-content wm-slr">writing-mode: sideways-lr;</div>
复制代码

图标如下：

如上图所示，当我们设置 padding-right 时： 100px；，这是不同的。书写规则和显示效果不同。

一开始，HTML和CSS仅服务于英语国家。然而，随着互联网的发展，不同书写规则的国家逐渐流行起来。

我们原创的CSS逻辑属性是按照上、右、下、左物理逻辑来划分的。

那么当你按照这个规则改变文本属性时，就会出现上述不符合语法规则的状态。

可能正是因为这个原因，W3C 发布了新的逻辑属性和值。

新旧逻辑属性对比

CSS新旧逻辑属性是两种完全不同的模型。 ？逻辑属性

/* 旧的逻辑属性 */
.popup{
  position:fixed;  
  top:0;
  bottom:0;
  left:0;
  right:0;
}
/* 新的逻辑属性 */
.popup{
   position:fixed;
   inset-block-start:0;  /*top - in English*/
   inset-block-end:0;    /*bottom - in English*/
   inset-inline-start:0; /*left - in English*/
   inset-inline-end:0;   /*right - in English*/
}
/* 新的逻辑属性支持简写 */
.popup{
   position:fixed;
   inset:0 0 0 0;   /*top, right, bottom, left - in English*/
}
复制代码

$$('*').forEach(e => {
  e.style.border = '1px solid';
})
复制代码

<div>
    <table>
        <tr>
            <td>hi</td>
        </tr>
    </table>
</div>
复制代码

插图：（图片来自 w3help）：

Box 生成

Box 生成是 CSS 视觉样式表 的一部分，用于从文档元素生成框架。框的类型取决于 CSS 外观 属性。

• 块级元素
  • 如果元素的视图是块，list -ite m 当或表时，它是一个块 水平元件。
• 块级框
  • 块级框用于描述块与其父元素和姐妹元素之间的关系。
  • 每个块级框将参与创建块格式化上下文。
  • 每个块级元素至少生成一个块级框，即： 块级主框（块级主框）
  • 块级主框包含生成的框和内容由后代，也将参与定位计划。
  • 块级盒子，同时也是块容器盒子，称为块盒子（块盒子）。
• 匿名框在某些需要可视化格式的情况下，需要添加一些额外的框。这些框无法使用 CSS 选择器（即所有可继承的 CSS 属性）进行选择。这些值都是 inherit，所有不可继承的 CSS 属性都是 initial 。这就是为什么这些被称为**匿名盒子**。

定位规则

一旦盒子形成，CSS 引擎必须定位它们以完成布局。

定位规则如下：

• 正常流程
  • 正常流程中，盒子是连续放置的。
  • 在 块布局上下文 中，框一个接一个地垂直排列。
  • 在内联格式化上下文中，框水平排列。
• 浮动：当盒子的浮动不是不是且位置时 是 静态 或 相对 ，盒子悬浮放置。
  • 悬停：左：盒子放置在当前行盒子的起始位置（左侧）。
  • 悬停：右：盒子放置在当前盒子行的末尾（右侧）。
• 绝对定位：如果元素的位置为绝对或固定 ，该元素是绝对定位的。
  • 通过绝对定位，盒子完全从流中移除，不再与其有任何连接。 ？ 包含块）

    结论

    本文主要介绍CSS的新旧逻辑属性的现状以及盒模型的具体情况。文章中还有一些内容没有介绍太多，比如blockformattingcontext（块格式化上下文）和inlineformattingcontext（内联格式化上下文）以及其他一些具体名称。后续文章会介绍，届时会进行详细说明。希望大家多多关注我的【Hello CSS】系列。

    一开始我问了大家一个问题，即：

    为什么Flex box和Grid box是基于 开始

  、 end是排列规则，而不是常规的top，right，bottom 与左？

  通过分享这篇文章你能回答这个问题吗？

  作者：陈大鱼头
  来源：掘金