搜索
首页web前端css教程介绍GSS：网格样式表

介绍GSS：网格样式表

Jennifer Aniston
Jennifer Aniston
Feb 23, 2025 am 09:26 AM

Introducing GSS: Grid Style Sheets

介绍GSS：网格样式表

>您最近可能听说过HTML和CSS世界中的网格样式（GSS）。 GSS重新构想CSS布局，并用利用来代替浏览器的布局引擎。那些不明白这句话的人……你好，欢迎！> GSS承诺将获得更美好的未来。 GSS承诺相对定位和尺寸。 GSS承诺将任何元素以一行代码为中心。 GSS提供。问题是：如何？

> 在本文中，我将介绍GSS的简要历史，并深入概述其所提供的功能。我还将查看GSS的基于约束的布局，Cassowary约束算法，并引导您完成安装和使用GSS的过程。

那些宁愿不再等待W3C或浏览器赶上的人，我敦促您挂在那里并密切注意，而我解释了GSS的谜团。在这一点上，让我们从一点点历史开始。

钥匙要点

要开始使用GSS，需要通过bower安装它或通过github作为zip文件下载，然后可以通过在a

>上添加type = type/gss或使用

>来加载GSS样式表。

  • >简短的历史 GSS是与Dan Tocchini成为其创始人兼首席执行官的网格的创建。这回答了为什么不是基于网格的样式表被称为网格样式表。>
    • >网络开发人员与前端技术之间的战争已经持续了多年。在过去的十年中，CSS已被证明是胜利的。但是，Web开发人员会定期使用越来越多的工具来建立越来越复杂的用户界面。例如，以CSS为中心的元素并不是最简单的任务，尤其是使用可变的高度元素。

    >。

    flexbox是最新的解决方案之一，但是即使是小的更改也需要您深入HTML内容和CSS演示并进行更改。

    > GSS是时候参加竞技场了。 GSS解决了这些问题，还有更多的问题 - 开发人员十多年来遇到的问题。

    本质上，GSS是利用CassoWary.js的CSS预处理器和JavaScript运行时。那些尚未知道的人Cassowary.js是Apple在Cocoa AutoLayout中使用的JavaScript端口。

    GSS和CASSOWARY都建立在约束编程上，使其非常适合授权CSS等声明语言。约束编程是一个范式，Web开发人员关注声明“什么”并将“如何”留给数学求解器。

    约束编程的重点是意图，而不是实现。>

    >现在我们已经建立了一些背景信息，让我们继续进行GSS优惠的功能。

    GSS

    的概述 CSS最大的问题之一是相对论。您可以期望任何CSS元素都具有无休止的属性列表 - 填充，高度，宽度，浮动，边距，边界，轮廓 - 但是这些信息都不告诉我们该元素在页面上的其他元素（甚至整个页面）。无尽的列表也没有回答以不同的屏幕尺寸显示元素的位置。>

    这使我们成为GSS的第一个功能：您定义了想要的布局。花费无数小时的试用和错误的日子已经一去不复返了，制定了如何构建布局的策略。

    >由于我们已经讨论了GSS利用cassowary.js，因此这是GSS的另一个重要功能：一个元素可以以任何一行代码为中心。这使得很多解决方法都不必要和过去的事情。

    > 例如，如果要在网站页面右侧垂直添加订阅按钮，请使用以下代码：>

    另一个功能：GSS使浮子，表单元，透明封码和水平/垂直中心过时。告别危险的陷阱，因为我们有W3C本身，说浮子不是应用程序布局的理想之选。

    “随着网站从简单文档演变为复杂的，交互式应用程序，文档布局的工具，例如浮子不一定适合应用程序布局。”

    - W3C网格布局模块（工作草稿）
    .subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

    > CSS功能呢！ GSS的第四个功能也有类似的事情：GSS采用约束层次结构来优先考虑优势的约束。我们在这里谈论的四个内置力量级别：


    ！弱

    ！

    ！

    ！
    • 请注意，需要！
      • 特殊的
    • 强度，可确保约束成立，如果没有，一切都会破裂。建议仔细且不经常使用它。
      • >
    • >强度水平提高了列表，并且在执行过程中，优先级更高。让我们看一个示例：
      • 您已经做到了这么远，让我们现在看一些基于约束的布局。
    > 基于约束的布局

    gss 的约束基本上是两个或多个变量之间可能存在或可能不存在的变量之间的关系。元素的所有数字属性都有资格受到约束。这是一个示例：

    .subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>
    • p称为selector
      • >
    • > line-height是GSS将计算
      • >值的属性
    • []用于访问属性
    • =定义不等式约束
    • 10和20是像素中的数值
      • >

    在上面给出的示例中，这两个约束都有效。这是一个不存在的约束的示例。

    > 
    #light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

    最初，两个元素elementa和Elementb都被约束为150px的高度。在第三行中，两个元素的总和为225px。因此，这两个元素的约束之一将无法成立。

    GSS

    中的选择器 GSS中的选择器是一组HTML元素的查询，它们用于确定最终受约束影响的元素。选择器很重要，因为您必须在对其应用约束之前从DOM中选择和观察元素。

    >

    GSS支持以下基本选择器。

    GSS

    中的规则集

    规则集将使您在单个选择器上定义多个约束。您也可以嵌套它们并在其中使用CSS属性。
    p[line-height] >= <span>10;
</span>p[line-height] ::window[height] / 20;

    此嵌套规则集：

    与：

    相同

    GSS 
    #elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>
    中的属性

    >我已经在上面的示例中介绍了属性，但让我们更仔细地看一下它们。在GSS中，属性是属于元素的变量。当我们使用CSS已知的属性时，它们相应的GSS计算值将分配为元素上的内联样式。

    类似的东西：
    #elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>

    等于：

    >

    cassowary约束算法的简介

    GSS使用Badros，Borning and Stuckey，1999年的CASSOWARY线性算术约束解决算法的JavaScript端口（cassowary.js），1999年。算法找到基于用户使用自然语言给出的输入约束的布局的最佳解决方案。 
    <span>section   <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</span></span>

    >不需要用户确保输入约束不会彼此矛盾。实际上，这是刀片算法的本质。它会逐步评估约束并自动发现最佳解决方案。

    > 
    <span>(section </span>
    刀片算法的计算限制

    GSS背后的约束求解器称为CASSOWARY算法。该算法只能计算线性的约束（即形式y = mx c）。基本运算符（ - ， *， /）由算法支持。两个（或多个）约束变量的乘法和划分不是线性的，因此会丢弃错误。

    >安装GSS

    >用于客户端安装，请通过鲍尔安装：

    然后将此代码添加到您的标记的部分：> 
    <span><span>.container</span> {
</span>  <span>height: == #elm[height];
</span><span>}</span>

    >您还可以通过github作为zip文件下载版本2.0.0。

    安装GSS后，通过在上添加type = type/gss来加载.gss样式表 

    .subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>
    或使用元素：

    #light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>
    >一旦您启动并运行了所有内容，就可以开始关注一些代码示例。在下面，我将介绍初学者的教程。

    a GSS初学者的教程

    我将创建的示例将通过Codepen显示，但我将像标准HTML文档一样浏览教程。首先，我将以下代码行添加到我的HTML中以添加GSS引擎脚本：>

    >我将使用该文件的Codepen托管版本，但是您可以在此处找到CDN托管版本。接下来，我将在GSS参考脚本（我刚刚添加的行）下添加以下代码，以传递GSS文档对象。

    p[line-height] >= <span>10;
</span>p[line-height] ::window[height] / 20;

    如果您愿意，可以将其放置在引擎脚本后包含的单独的JavaScript文件中。

    #elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>
    >示例1：垂直居中元素

    我将创建一个div，并将一些文本包装在GSS布局中的H2标签中，然后将其添加到HTML：

    中

    >添加一些基本样式后，我可以添加一些GSS来创建布局。这是乐趣开始的地方。

    #elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>
    >我的目标是尽管大小尺寸将.foo元素垂直将.foo元素集中在视口内，并且即使元素的大小更改，也能够将相同的对齐保持在适当的位置。

    这是我将适用于实现此目标的限制：>

    >使用::窗口选择器将元素与浏览器中的页面的可见部分保持为中心。

    >使用:: [intinsic-height]属性要获得元素高度的相对值，该值将用于确定相对宽度。

      首先，我将带有类型属性设置为文本/GSS的HTML添加一个块：
    • >
    • a 块对于定义我要添加的GSS是必要的。我将通过在标签中添加以下代码来将元素放置在屏幕的中心：>
    >这就是需要的。现在，使用GSS将该元素垂直（动态高度）居中。以下是演示：

    参见codepen上的SitePoint（@sitepoint）的GSS的笔垂直中心。
    <span>section   <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</span></span>

    >尝试全屏演示，然后尝试垂直调整浏览器大小以查看元素以任何窗口尺寸的中心保持。

    <span>(section </span>
    >示例2：基于动态更改窗口宽度

    的元素旋转 在下一个示例中，

    >我将创建一个简单的彩色正方形形状，并动态旋转。首先，让我们通过在文档的部分中添加以下代码行来引导GSS：>
    .subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

    >请注意，您必须编辑上面的代码才能指向文件的正确位置。您可以在此处获取worker.js文件，然后在此处获取GSS.JS文件。>

    >

    注意：由于某些错误，上面的文件路径指向pre-2.0.0 gss的版本以使其工作。 现在，让我们通过将其添加到html：来创建平方形状。

    …并在CSS中添加一些样式：

    > 

    #light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>
    现在，我将返回HTML并添加一些GSS约束。

    >

    >请记住，使用GSS，您只需做出意图，然后将数学计算留在算法上。在此示例中，我正在尝试在窗口宽度动态变化时在元素和元素中产生旋转的窗口之间创建一个约束。>>>>>。 
    p[line-height] >= <span>10;
</span>p[line-height] ::window[height] / 20;
    这是我将适用于实现此目标的限制：>

    >使用::窗口[中心]选择器将元素置于浏览器中的页面的可见部分。

    >使用::窗口[width]用旋转-Z创建约束，该约束将对其Z轴周围的元素产生旋转效果。在这里，从:: window [width]收到的值表示旋转程度。

    >

      >就像我在第一个示例中一样，我将在html上添加一个样式块，并在文本/gss上添加样式块。请记住，要定义我要添加的GSS的样式块是必需的。
    • >
    • >我将通过在样式标签中添加以下代码来将方框与屏幕相关联：

    >就这样做了。查看最终的Codepen演示：

    #elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>
    >请参阅codepen上的sitepoint（@sitepoint）使用GSS的笔动力旋转。

    如果您查看全屏演示，请尝试调整窗口大小。您会注意到，当窗口的宽度更改时，方框将改变其旋转位置。 
    #elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>
    GSS

    的未来 GSS的未来看起来很有希望。是时候我们前进了前端技术了。我建议您在撕裂整个样式表图书馆之前练习较小的原型。

    >

    我在这里介绍的只是您可以使用GSS的一小部分样本，但我希望您发现本教程有用且有益的是让您开始。

    您是否使用过GSS？您的经历如何？在评论部分中让我知道。

    经常询问有关GSS（网格样式）的问题

    >

    >什么是GSS（网格样式表）？

    GSS或网格样式表，是Web开发人员和设计师的强大工具。这是一种基于约束的布局引擎，可让您使用简单而直观的语法创建响应式和灵活的布局。 GSS通过引入约束概念来扩展传统的CSS模型，这使您能够以更精确，更灵活的方式来定义元素之间的关系，并以更精确和灵活的方式来控制其行为。

    > GSS与传统CSS有何不同？

    >传统CSS使用框模型进行布局，在创建复杂的布局时，该模型可能会限制和复杂。另一方面，GSS使用基于约束的模型，该模型允许更具灵活性和精确度。使用GSS，您可以定义元素之间的关系，并以更直观的方式控制其行为。

    >

    >我如何开始使用GSS？

    开始使用GSS，您需要包括GSS引擎在您的项目中。这可以通过从官方网站下载GSS库或使用NPM等软件包管理器来完成。项目中包含GSS引擎后，您可以在CSS文件中开始编写GSS代码。

    我可以将GSS与我现有的CSS代码一起使用吗？

    是的，是的，GSS旨在工作。与传统CSS一起。这意味着您可以逐渐将GSS引入项目，而无需重写现有的CSS代码。 GSS代码可以用单独的文件编写或与常规CSS代码混合。

    >使用GSS？

    GSS提供了比传统CSS的多种好处。它允许对布局进行更精确的控制，从而更轻松地创建复杂而响应的设计。 GSS还简化了代码，使阅读和维护更加容易。此外，GSS支持实时编辑，这意味着您可以在代码时实时看到更改。

    > GSS是所有浏览器支持的吗？

    GSS使用JavaScript来实现其基于约束的布局引擎，这意味着它应该在支持JavaScript的任何现代浏览器中工作。但是，与任何新技术一样，在多个浏览器中测试您的设计总是一个好主意。可用于学习GSS的资源。 GSS官方网站提供了综合指南和文档。还有几个在线教程和课程可深入覆盖GSS。其基于约束的布局引擎允许适应不同屏幕尺寸和方向的响应式设计。这使得在不同设备上创建一致的用户体验变得更加容易。

    gss开源吗？这意味着任何人都可以为其开发做出贡献，并在其项目中免费使用它。 GSS的源代码可在GitHub上获得。

    GSS的未来是什么？但是，其强大的功能以及对基于约束的布局的日益兴趣表明，它具有有希望的未来。随着越来越多的开发人员采用GSS，我们可以期望看到更多的资源，工具和社区支持这项创新技术。

    网格样式表（GSS）是CSS预处理器和JavaScript运行时，用CassoWary约束求解器，有前途的相对定位和尺寸以及将任何元素置于另一个代码中的任何元素的能力。 >

    gss采用约束编程，该编程的重点是意图而不是实施，使开发人员可以声明“什么”并将“如何”留给数学求解器。 GSS

    使浮子，桌子细胞，透明封装和水平/垂直居中过时，并采用约束层次结构来优先使用强度的约束，提供四个内置的强度水平：！弱，中等，！强，！

    GSS使用CASSOWARY线性算术约束算法解决算法来根据用户自然语言给出的输入约束来找到最佳的布局解决方案，从而逐渐评估约束并自动发现最佳解决方案。>>>>>>>>>>>>
      。
      • 要开始使用GSS，需要通过bower安装它或通过github作为zip文件下载，然后可以通过在a
    • >上添加type = type/gss或使用
      • >来加载GSS样式表。
    • 简短的历史
      • GSS是与Dan Tocchini成为其创始人兼首席执行官的网格的创建。这回答了为什么不是基于网格的样式表被称为网格样式表。>
    • >网络开发人员与前端技术之间的战争已经持续了多年。在过去的十年中，CSS已被证明是胜利的。但是，Web开发人员会定期使用越来越多的工具来建立越来越复杂的用户界面。例如，以CSS为中心的元素并不是最简单的任务，尤其是使用可变的高度元素。>。 flexbox是最新的解决方案之一，但是即使是小的更改也需要您深入HTML内容和CSS演示并进行更改。
    > GSS是时候参加竞技场了。 GSS解决了这些问题，还有更多的问题 - 开发人员十多年来遇到的问题。

    本质上，GSS是利用CassoWary.js的CSS预处理器和JavaScript运行时。那些尚未知道的人Cassowary.js是Apple在Cocoa AutoLayout中使用的JavaScript端口。

    GSS和CASSOWARY都建立在约束编程上，使其非常适合授权CSS等声明语言。约束编程是一个范式，Web开发人员关注声明“什么”并将“如何”留给数学求解器。

    约束编程的重点是意图，而不是实现。>

    >现在我们已经建立了一些背景信息，让我们继续进行GSS优惠的功能。
    GSS

    的概述 CSS最大的问题之一是相对论。您可以期望任何CSS元素都具有无休止的属性列表 - 填充，高度，宽度，浮动，边距，边界，轮廓 - 但是这些信息都不告诉我们该元素在页面上的其他元素（甚至整个页面）。无尽的列表也没有回答以不同的屏幕尺寸显示元素的位置。>

    这使我们成为GSS的第一个功能：您定义了想要的布局。花费无数小时的试用和错误的日子已经一去不复返了，制定了如何构建布局的策略。

    >由于我们已经讨论了GSS利用cassowary.js，因此这是GSS的另一个重要功能：一个元素可以以任何一行代码为中心。这使得很多解决方法都不必要和过去的事情。

    > 例如，如果要在网站页面右侧垂直添加订阅按钮，请使用以下代码：>

    另一个功能：GSS使浮子，表单元，透明封码和水平/垂直中心过时。告别危险的陷阱，因为我们有W3C本身，说浮子不是应用程序布局的理想之选。

    “随着网站从简单文档演变为复杂的，交互式应用程序，文档布局的工具，例如浮子不一定适合应用程序布局。”

    - W3C网格布局模块（工作草稿）

    .subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>
    > CSS功能呢！ GSS的第四个功能也有类似的事情：GSS采用约束层次结构来优先考虑优势的约束。我们在这里谈论的四个内置力量级别：

    ！弱


    ！

    ！
    ！

    请注意，需要！
      特殊的
    • 强度，可确保约束成立，如果没有，一切都会破裂。建议仔细且不经常使用它。
      • >

      >强度水平提高了列表，并且在执行过程中，优先级更高。让我们看一个示例：

    .subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

    您已经做到了这么远，让我们现在看一些基于约束的布局。

    > 基于约束的布局

    gss

    的约束基本上是两个或多个变量之间可能存在或可能不存在的变量之间的关系。元素的所有数字属性都有资格受到约束。这是一个示例：

    #light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>
    • p称为selector
      • >
    • > line-height是GSS将计算
      • >值的属性
    • []用于访问属性
    • =定义不等式约束
    • 10和20是像素中的数值
      • >

    在上面给出的示例中，这两个约束都有效。这是一个不存在的约束的示例。

    > 
    p[line-height] >= <span>10;
</span>p[line-height] ::window[height] / 20;

    最初，两个元素elementa和Elementb都被约束为150px的高度。在第三行中，两个元素的总和为225px。因此，这两个元素的约束之一将无法成立。

    GSS

    中的选择器 GSS中的选择器是一组HTML元素的查询，它们用于确定最终受约束影响的元素。选择器很重要，因为您必须在对其应用约束之前从DOM中选择和观察元素。

    >

    GSS支持以下基本选择器。

    GSS

    中的规则集

    规则集将使您在单个选择器上定义多个约束。您也可以嵌套它们并在其中使用CSS属性。
    #elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

    此嵌套规则集：

    与：

    相同

    GSS 
    #elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>
    中的属性

    >我已经在上面的示例中介绍了属性，但让我们更仔细地看一下它们。在GSS中，属性是属于元素的变量。当我们使用CSS已知的属性时，它们相应的GSS计算值将分配为元素上的内联样式。

    类似的东西：
    <span>section   <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</span></span>

    等于：

    >

    cassowary约束算法的简介

    GSS使用Badros，Borning and Stuckey，1999年的CASSOWARY线性算术约束解决算法的JavaScript端口（cassowary.js），1999年。算法找到基于用户使用自然语言给出的输入约束的布局的最佳解决方案。 
    <span>(section </span>

    >不需要用户确保输入约束不会彼此矛盾。实际上，这是刀片算法的本质。它会逐步评估约束并自动发现最佳解决方案。

    >

    刀片算法的计算限制

    GSS背后的约束求解器称为CASSOWARY算法。该算法只能计算线性的约束（即形式y = mx c）。基本运算符（ - ， *， /）由算法支持。两个（或多个）约束变量的乘法和划分不是线性的，因此会丢弃错误。

    .subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

    >安装GSS

    >用于客户端安装，请通过鲍尔安装：

    #light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

    然后将此代码添加到您的标记的

    部分：> 

    p[line-height] >= <span>10;
</span>p[line-height] ::window[height] / 20;
    >您还可以通过github作为zip文件下载版本2.0.0。

    安装GSS后，通过在上添加type = type/gss来加载.gss样式表

    或使用元素：

    #elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

    >一旦您启动并运行了所有内容，就可以开始关注一些代码示例。在下面，我将介绍初学者的教程。

    #elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>
    a GSS初学者的教程

    我将创建的示例将通过Codepen显示，但我将像标准HTML文档一样浏览教程。首先，我将以下代码行添加到我的HTML中以添加GSS引擎脚本：>

    >我将使用该文件的Codepen托管版本，但是您可以在此处找到CDN托管版本。接下来，我将在GSS参考脚本（我刚刚添加的行）下添加以下代码，以传递GSS文档对象。

    如果您愿意，可以将其放置在引擎脚本后包含的单独的JavaScript文件中。
    <span>section   <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</span></span>

    >示例1：垂直居中元素

    <span>(section </span>
    我将创建一个div，并将一些文本包装在GSS布局中的H2标签中，然后将其添加到HTML：

    中

    >添加一些基本样式后，我可以添加一些GSS来创建布局。这是乐趣开始的地方。

    >我的目标是尽管大小尺寸将.foo元素垂直将.foo元素集中在视口内，并且即使元素的大小更改，也能够将相同的对齐保持在适当的位置。

    这是我将适用于实现此目标的限制：> 
    <span><span>.container</span> {
</span>  <span>height: == #elm[height];
</span><span>}</span>

    >使用::窗口选择器将元素与浏览器中的页面的可见部分保持为中心。

    >使用:: [intinsic-height]属性要获得元素高度的相对值，该值将用于确定相对宽度。

    首先，我将带有类型属性设置为文本/GSS的HTML添加一个块：

    >
    • a 块对于定义我要添加的GSS是必要的。我将通过在标签中添加以下代码来将元素放置在屏幕的中心：>
    • >这就是需要的。现在，使用GSS将该元素垂直（动态高度）居中。以下是演示：

      • 参见codepen上的SitePoint（@sitepoint）的GSS的笔垂直中心。

      >尝试全屏演示，然后尝试垂直调整浏览器大小以查看元素以任何窗口尺寸的中心保持。

      >示例2：基于动态更改窗口宽度

      的元素旋转 在下一个示例中，

      >我将创建一个简单的彩色正方形形状，并动态旋转。首先，让我们通过在文档的

      部分中添加以下代码行来引导GSS：> 

    .subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>
    >请注意，您必须编辑上面的代码才能指向文件的正确位置。您可以在此处获取worker.js文件，然后在此处获取GSS.JS文件。>

    >

    注意：由于某些错误，上面的文件路径指向pre-2.0.0 gss的版本以使其工作。

    现在，让我们通过将其添加到html：来创建平方形状。 …并在CSS中添加一些样式：

    >

    现在，我将返回HTML并添加一些GSS约束。
    #light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>
    >

    >请记住，使用GSS，您只需做出意图，然后将数学计算留在算法上。在此示例中，我正在尝试在窗口宽度动态变化时在元素和元素中产生旋转的窗口之间创建一个约束。>>>>>。

    这是我将适用于实现此目标的限制：> 
    p[line-height] >= <span>10;
</span>p[line-height] ::window[height] / 20;

    >使用::窗口[中心]选择器将元素置于浏览器中的页面的可见部分。

    >使用::窗口[width]用旋转-Z创建约束，该约束将对其Z轴周围的元素产生旋转效果。在这里，从:: window [width]收到的值表示旋转程度。

    >

    >就像我在第一个示例中一样，我将在html上添加一个样式块，并在文本/gss上添加样式块。请记住，要定义我要添加的GSS的样式块是必需的。
      >
      • >我将通过在样式标签中添加以下代码来将方框与屏幕相关联：
    >就这样做了。查看最终的Codepen演示：

    >请参阅codepen上的sitepoint（@sitepoint）使用GSS的笔动力旋转。
    #elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

    如果您查看全屏演示，请尝试调整窗口大小。您会注意到，当窗口的宽度更改时，方框将改变其旋转位置。

    GSS 
    #elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>
    的未来 GSS的未来看起来很有希望。是时候我们前进了前端技术了。我建议您在撕裂整个样式表图书馆之前练习较小的原型。

    >

    我在这里介绍的只是您可以使用GSS的一小部分样本，但我希望您发现本教程有用且有益的是让您开始。

    您是否使用过GSS？您的经历如何？在评论部分中让我知道。

    经常询问有关GSS（网格样式）的问题

    > > 什么是GSS（网格样式）？对于网络开发人员和设计师来说， gss或网格样式表是一个有力的工具。这是一种基于约束的布局引擎，可让您使用简单而直观的语法创建响应式和灵活的布局。 GSS通过引入约束的概念来扩展传统的CSS模型，该模型使您能够以更精确，更灵活的方式来定义元素之间的关系。

    >传统CSS使用框模型进行布局，在创建复杂的布局时，该模型可能会限制和复杂。另一方面，GSS使用基于约束的模型，该模型允许更具灵活性和精确度。使用GSS，您可以定义元素之间的关系，并以更直观的方式控制其行为。>如何开始使用GSS？

    要开始使用GSS，您需要在项目中包括GSS引擎。这可以通过从官方网站下载GSS库或使用NPM等软件包管理器来完成。项目中包含GSS引擎后，您可以在CSS文件中开始编写GSS代码。

    >我可以将GSS与现有的CSS代码一起使用吗？是的，GSS旨在与传统CSS一起工作。这意味着您可以逐渐将GSS引入项目，而无需重写现有的CSS代码。 GSS代码可以用单独的文件编写或与常规CSS代码混合。

    >使用GSS有什么好处？ GSS比传统CSS提供了多种好处。它允许对布局进行更精确的控制，从而更轻松地创建复杂而响应的设计。 GSS还简化了代码，使阅读和维护更加容易。此外，GSS支持实时编辑，这意味着您可以在编码时实时看到更改。 GSS是否由所有浏览器支持？

    gss使用JavaScript实现其基于约束的布局引擎，这意味着它应该在支持JavaScript的任何现代浏览器中工作。但是，与任何新技术一样，在多个浏览器中测试您的设计总是一个好主意，以确保兼容性。

    > 是否有任何资源可以学习GSS？

    是的，有几种资源可以学习GSS。 GSS官方网站提供了综合指南和文档。还有几个在线教程和课程可深入涵盖GSS。是的，GSS是移动Web开发的绝佳工具。其基于约束的布局引擎允许适应不同屏幕尺寸和方向的响应式设计。这使得更容易在不同设备上创建一致的用户体验。

    是的，GSS是一个开源项目。这意味着任何人都可以为其开发做出贡献，并在其项目中免费使用它。 GSS的源代码可在GitHub上获得。

    GSS的未来是什么？作为一种相对较新的技术，GSS仍在发展。但是，其强大的功能以及对基于约束的布局的日益兴趣表明，它具有有希望的未来。随着越来越多的开发人员采用GSS，我们可以期望看到更多的资源，工具和社区支持这项创新技术。

    以上是介绍GSS：网格样式表的详细内容。更多信息请关注PHP中文网其他相关文章！

    声明
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    相关文章
    链接HTML中CSS文件的最终指南链接HTML中CSS文件的最终指南May 13, 2025 am 12:02 AM

    链接CSS文件到HTML可以通过在HTML的部分使用元素实现。1)使用标签链接本地CSS文件。2)多个CSS文件可通过添加多个标签实现。3)外部CSS文件使用绝对URL链接，如。4)确保正确使用文件路径和CSS文件加载顺序，优化性能可使用CSS预处理器合并文件。

    CSS Flexbox与网格：全面评论CSS Flexbox与网格：全面评论May 12, 2025 am 12:01 AM

    选择Flexbox还是Grid取决于布局需求：1)Flexbox适用于一维布局，如导航栏；2)Grid适合二维布局，如杂志式布局。两者在项目中可结合使用，提升布局效果。

    如何包括CSS文件：方法和最佳实践如何包括CSS文件：方法和最佳实践May 11, 2025 am 12:02 AM

    包含CSS文件的最佳方法是使用标签在HTML的部分引入外部CSS文件。1.使用标签引入外部CSS文件，如。2.对于小型调整，可以使用内联CSS，但应谨慎使用。3.大型项目可使用CSS预处理器如Sass或Less，通过@import导入其他CSS文件。4.为了性能，应合并CSS文件并使用CDN，同时使用工具如CSSNano进行压缩。

    Flexbox vs Grid：我应该学习两者吗？Flexbox vs Grid：我应该学习两者吗？May 10, 2025 am 12:01 AM

    是的，youshouldlearnbothflexboxandgrid.1）flexboxisidealforone-demensional，flexiblelayoutslikenavigationmenus.2）gridexcelstcelsintwo-dimensional，confffferDesignssignssuchasmagagazineLayouts.3）blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction

    轨道力学（或我如何优化CSS KeyFrames动画）轨道力学（或我如何优化CSS KeyFrames动画）May 09, 2025 am 09:57 AM

    重构自己的代码看起来是什么样的？约翰·瑞亚（John Rhea）挑选了他写的一个旧的CSS动画，并介绍了优化它的思维过程。

    CSS动画：很难创建它们吗？CSS动画：很难创建它们吗？May 09, 2025 am 12:03 AM

    CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

    @KeyFrames CSS：最常用的技巧@KeyFrames CSS：最常用的技巧May 08, 2025 am 12:13 AM

    @keyframesispopularduetoitsversatoryand and powerincreatingsmoothcssanimations.keytricksinclude：1）definingsmoothtransitionsbetnestates，2）使用AnimatingmatematingmultationmatingMultationPropertiessimultane，3）使用使用4）使用BombingeNtibalibility，4）使用BombingingWithjavofofofofofoffo

    CSS计数器：自动编号的综合指南CSS计数器：自动编号的综合指南May 07, 2025 pm 03:45 PM

    CSSCOUNTERSAREDOMANAGEAUTOMANAMBERINGINWEBDESIGNS.1）他们可以使用forterablesofcontents，ListItems，and customnumbering.2）AdvancedsincludenestednumberingSystems.3）挑战挑战InclassINCludeBrowsEccerCerceribaliblesibility andperformiballibility andperformissises.4）创造性

    See all articles

    热AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驱动的应用程序，用于创建逼真的裸体照片

    AI Clothes Remover

    AI Clothes Remover

    用于从照片中去除衣服的在线人工智能工具。

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    Video Face Swap

    Video Face Swap

    使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

    显示更多

    热门文章

    <🎜>：种植花园 - 完整的突变指南
    3 周前ByDDD
    <🎜>：泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
    3 周前By尊渡假赌尊渡假赌尊渡假赌
    如何修复KB5055612无法在Windows 10中安装？
    3 周前ByDDD
    北端：融合系统，解释
    3 周前By尊渡假赌尊渡假赌尊渡假赌
    Mandragora：巫婆树的耳语 - 如何解锁抓钩
    3 周前By尊渡假赌尊渡假赌尊渡假赌
    显示更多

    热工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神级代码编辑软件(SublimeText3)

    Dreamweaver CS6

    Dreamweaver CS6

    视觉化网页开发工具

    WebStorm Mac版

    WebStorm Mac版

    好用的JavaScript开发工具

    PhpStorm Mac 版本

    PhpStorm Mac 版本

    最新（2018.2.1 ）专业的PHP集成开发工具

    mPDF

    mPDF

    mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），

    显示更多

    热门话题

    Java教程
    1666
    14
    CakePHP 教程
    1425
    52
    Laravel 教程
    1328
    25
    PHP教程
    1273
    29
    C# 教程
    1253
    24
    显示更多