Question

我正在研究一个名为zerofour的免费css模板，该模板位于http://html5up.net/zerofour/，并且正在运行我以前从未见过的css编码。在HTML中，一些div具有类“4u”，但是当我检查css文件时，这是唯一包含这些术语的文本部分，它看起来像这样：

/* Grid */

/* Cells */

    .\31 2u { width: 100% }
    .\31 1u { width: 91.6666666667% }
    .\31 0u { width: 83.3333333333% }
    .\39 u { width: 75% }
    .\38 u { width: 66.6666666667% }
    .\37 u { width: 58.3333333333% }
    .\36 u { width: 50% }
    .\35 u { width: 41.6666666667% }
    .\34 u { width: 33.3333333333% }
    .\33 u { width: 25% }
    .\32 u { width: 16.6666666667% }
    .\31 u { width: 8.3333333333% }
    .\-11u { margin-left: 91.6666666667% }
    .\-10u { margin-left: 83.3333333333% }
    .\-9u { margin-left: 75% }
    .\-8u { margin-left: 66.6666666667% }
    .\-7u { margin-left: 58.3333333333% }
    .\-6u { margin-left: 50% }
    .\-5u { margin-left: 41.6666666667% }
    .\-4u { margin-left: 33.3333333333% }
    .\-3u { margin-left: 25% }
    .\-2u { margin-left: 16.6666666667% }
    .\-1u { margin-left: 8.3333333333% }

当我使用chrome developer删除4u类时，页面会受到影响。但是，当我从css文件中删除此部分时，没有任何反应。我对此感到非常难过，这真的让我烦恼！

Answer 1

阅读此规范：http://www.w3.org/International/questions/qa-escapes#cssescapes。反斜杠后面的字符代表一个unicode代码点。如果允许下一个字符作为十六进制值的一部分，则需要空格。

Answer 2

这是我第一次看到这样的类名，我想知道它的含义。 W3C页面说：

在CSS 2.1中，反斜杠（\）字符可以表示三种类型之一   人物逃脱。在CSS评论中，反斜杠代表   本身，如果一个反斜杠后紧跟着   样式表，它也代表自己（即DELIM令牌）。第一，   在字符串内，忽略换行符后跟换行符（即   该字符串被认为不包含反斜杠或   新队）。在字符串之外，反斜杠后跟换行符   本身（即DELIM后跟换行符）。

其次，它取消了特殊CSS字符的含义。任何   字符（十六进制数字，换行符，回车符或   form for）可以用反斜杠转义以删除它的特殊内容   含义。例如，"\""是由一个双引号组成的字符串。   样式表预处理器不得从a中删除这些反斜杠   样式表，因为这会改变样式表的含义。

第三，反斜杠转义允许作者引用它们的字符   不能轻易放入文件。在这种情况下，反斜杠是   后跟最多六个十六进制数字（0..9A..F），代表   带有该号码的ISO 10646（[ISO10646]）字符，但不得   为零。（在CSS 2.1中未定义如果样式表会发生什么   确实包含Unicode代码点为零的字符。）如果是一个字符   在[0-9a-fA-F]范围内跟随十六进制数字，结尾   这个数字需要明确。有两种方法可以做到这一点：   带空格（或其他空白字符）：\26 B（&B）[...]

注意：反斜杠转义符始终被视为一部分   标识符或字符串（即\7B不是标点符号，即使   {是，并且在类名称的开头允许 \32，即使如此   2不是。）标识符te\st与标识符完全相同   test。

据我所知，此处的\3 +数字+空格部分用于仅将数字用作类名。

Answer 3

它看起来像基金会。我也是Html5up的新手，但这是我的猜测。它通常如何运作（至少在基金会）你有一个＆＃34;行＆＃34;这是页面的整个宽度（通常）。在该行中，您有列（或＃34; u＆＃34;此处由于某种原因），每列占据相同的宽度百分比。通常，Foundation的标准是12列/行，我在这里猜测它是相同的。所以基本上如果你想让一行的前50％成为一个巨大的div，然后是两个div，将剩下的50％分开，它会是这样的：

<div class="row">
  <div class="6u">
    Big Div Here.
  </div>

  <div class="3u">
    Small Div Here.
  </div>

  <div class="3u">
    Small Div here (same size as the other small div)>
  </div>
</div>  (This ends the row).

所有这些疯狂的原因是它使您的页面更容易响应（这是Foundation和HTML5Up的主要要点之一）。

查看基金会的Dev Docs以获得更深入的解释和其他示例（尽管它不一定是基础） - Here

Answer 4

html5up.net使用一个名为skel的框架来使布局响应。

如果您的问题是＆＃34;我如何理解这些课程＆＃34;而不是＆＃34;这些转义序列如何工作＆＃34;，那么您正在寻找的引用位于https://github.com/n33/skel/blob/master/docs/skel-layout.md#usage-1。

Answer 5

我认为这种类型的css用于移动兼容性。

css - 我从未见过的css编码

5 个答案: