介绍GSS：网格样式表
>您最近可能听说过HTML和CSS世界中的网格样式（GSS）。 GSS重新构想CSS布局，并用利用
那些宁愿不再等待W3C或浏览器赶上的人，我敦促您挂在那里并密切注意，而我解释了GSS的谜团。在这一点上，让我们从一点点历史开始。
钥匙要点
要开始使用GSS，需要通过bower安装它或通过github作为zip文件下载，然后可以通过在a
>上添加type = type/gss或使用>来加载GSS样式表。
>。
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] <= <span>::window[height] / 20;</span>
此嵌套规则集：
与：
相同
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 < article {
</span> <span><span>.aclass</span> {
</span> <span>height: == 150;
</span> <span>}
</span><span>}</span>>不需要用户确保输入约束不会彼此矛盾。实际上，这是刀片算法的本质。它会逐步评估约束并自动发现最佳解决方案。
><span>(section < article .aclass)[height] == 150;</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] <= <span>::window[height] / 20;</span>
如果您愿意，可以将其放置在引擎脚本后包含的单独的JavaScript文件中。
#elementa[height] == <span>150; </span>#elementb[height] == <span>150; </span>#elementa[height] <span>+ #elementb[height] == 225;</span>
我将创建一个div，并将一些文本包装在GSS布局中的H2标签中，然后将其添加到HTML：
中
>添加一些基本样式后，我可以添加一些GSS来创建布局。这是乐趣开始的地方。
#elementID[height] == <span>150; /* id */ </span>div[height] == <span>150; /* element */ </span>.className[height] == <span>150; /* class */</span>
这是我将适用于实现此目标的限制：
>使用::窗口选择器将元素与浏览器中的页面的可见部分保持为中心。
>使用:: [intinsic-height]属性要获得元素高度的相对值，该值将用于确定相对宽度。
- 首先，我将带有类型属性设置为文本/GSS的HTML添加一个块：
- >
- a 块对于定义我要添加的GSS是必要的。我将通过在标签中添加以下代码来将元素放置在屏幕的中心：
>
参见codepen上的SitePoint（@sitepoint）的GSS的笔垂直中心。
<span>section < article {
</span> <span><span>.aclass</span> {
</span> <span>height: == 150;
</span> <span>}
</span><span>}</span>>尝试全屏演示，然后尝试垂直调整浏览器大小以查看元素以任何窗口尺寸的中心保持。
<span>(section < article .aclass)[height] == 150;</span>
的元素旋转 在下一个示例中，
>我将创建一个简单的彩色正方形形状，并动态旋转。首先，让我们通过在文档的部分中添加以下代码行来引导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：
>
#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] <= <span>::window[height] / 20;</span>
>使用::窗口[中心]选择器将元素置于浏览器中的页面的可见部分。
>使用::窗口[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>
如果您查看全屏演示，请尝试调整窗口大小。您会注意到，当窗口的宽度更改时，方框将改变其旋转位置。
#elementID[height] == <span>150; /* id */ </span>div[height] == <span>150; /* element */ </span>.className[height] == <span>150; /* class */</span>
的未来 GSS的未来看起来很有希望。是时候我们前进了前端技术了。我建议您在撕裂整个样式表图书馆之前练习较小的原型。
>我在这里介绍的只是您可以使用GSS的一小部分样本，但我希望您发现本教程有用且有益的是让您开始。
您是否使用过GSS？您的经历如何？在评论部分中让我知道。经常询问有关GSS（网格样式）的问题
>>什么是GSS（网格样式表）？
GSS或网格样式表，是Web开发人员和设计师的强大工具。这是一种基于约束的布局引擎，可让您使用简单而直观的语法创建响应式和灵活的布局。 GSS通过引入约束概念来扩展传统的CSS模型，这使您能够以更精确，更灵活的方式来定义元素之间的关系，并以更精确和灵活的方式来控制其行为。 > >使用GSS？ GSS的未来是什么？但是，其强大的功能以及对基于约束的布局的日益兴趣表明，它具有有希望的未来。随着越来越多的开发人员采用GSS，我们可以期望看到更多的资源，工具和社区支持这项创新技术。
使浮子，桌子细胞，透明封装和水平/垂直居中过时，并采用约束层次结构来优先使用强度的约束，提供四个内置的强度水平：！弱，中等，！强，！ 本质上，GSS是利用CassoWary.js的CSS预处理器和JavaScript运行时。那些尚未知道的人Cassowary.js是Apple在Cocoa AutoLayout中使用的JavaScript端口。
的概述
CSS最大的问题之一是相对论。您可以期望任何CSS元素都具有无休止的属性列表 - 填充，高度，宽度，浮动，边距，边界，轮廓 - 但是这些信息都不告诉我们该元素在页面上的其他元素（甚至整个页面）。无尽的列表也没有回答以不同的屏幕尺寸显示元素的位置。
“随着网站从简单文档演变为复杂的，交互式应用程序，文档布局的工具，例如浮子不一定适合应用程序布局。”
>强度水平提高了列表，并且在执行过程中，优先级更高。让我们看一个示例： 您已经做到了这么远，让我们现在看一些基于约束的布局。 的约束基本上是两个或多个变量之间可能存在或可能不存在的变量之间的关系。元素的所有数字属性都有资格受到约束。这是一个示例： 在上面给出的示例中，这两个约束都有效。这是一个不存在的约束的示例。 最初，两个元素elementa和Elementb都被约束为150px的高度。在第三行中，两个元素的总和为225px。因此，这两个元素的约束之一将无法成立。 GSS支持以下基本选择器。
中的规则集
相同
>我已经在上面的示例中介绍了属性，但让我们更仔细地看一下它们。在GSS中，属性是属于元素的变量。当我们使用CSS已知的属性时，它们相应的GSS计算值将分配为元素上的内联样式。
>
cassowary约束算法的简介 >不需要用户确保输入约束不会彼此矛盾。实际上，这是刀片算法的本质。它会逐步评估约束并自动发现最佳解决方案。 GSS背后的约束求解器称为CASSOWARY算法。该算法只能计算线性的约束（即形式y = mx c）。基本运算符（ - ， *， /）由算法支持。两个（或多个）约束变量的乘法和划分不是线性的，因此会丢弃错误。 >用于客户端安装，请通过鲍尔安装： 然后将此代码添加到您的标记的 安装GSS后，通过在上添加type = type/gss来加载.gss样式表
或使用元素： >一旦您启动并运行了所有内容，就可以开始关注一些代码示例。在下面，我将介绍初学者的教程。
我将创建的示例将通过Codepen显示，但我将像标准HTML文档一样浏览教程。首先，我将以下代码行添加到我的HTML中以添加GSS引擎脚本：
>示例1：垂直居中元素 中
>我的目标是尽管大小尺寸将.foo元素垂直将.foo元素集中在视口内，并且即使元素的大小更改，也能够将相同的对齐保持在适当的位置。
>使用::窗口选择器将元素与浏览器中的页面的可见部分保持为中心。 >使用:: [intinsic-height]属性要获得元素高度的相对值，该值将用于确定相对宽度。
首先，我将带有类型属性设置为文本/GSS的HTML添加一个块： 参见codepen上的SitePoint（@sitepoint）的GSS的笔垂直中心。 >尝试全屏演示，然后尝试垂直调整浏览器大小以查看元素以任何窗口尺寸的中心保持。 >我将创建一个简单的彩色正方形形状，并动态旋转。首先，让我们通过在文档的> GSS与传统CSS有何不同？
>传统CSS使用框模型进行布局，在创建复杂的布局时，该模型可能会限制和复杂。另一方面，GSS使用基于约束的模型，该模型允许更具灵活性和精确度。使用GSS，您可以定义元素之间的关系，并以更直观的方式控制其行为。是的，是的，GSS旨在工作。与传统CSS一起。这意味着您可以逐渐将GSS引入项目，而无需重写现有的CSS代码。 GSS代码可以用单独的文件编写或与常规CSS代码混合。
gss开源吗？这意味着任何人都可以为其开发做出贡献，并在其项目中免费使用它。 GSS的源代码可在GitHub上获得。
网格样式表（GSS）是CSS预处理器和JavaScript运行时，用CassoWary约束求解器，有前途的相对定位和尺寸以及将任何元素置于另一个代码中的任何元素的能力。 >
gss采用约束编程，该编程的重点是意图而不是实施，使开发人员可以声明“什么”并将“如何”留给数学求解器。
GSS 。
> GSS是时候参加竞技场了。 GSS解决了这些问题，还有更多的问题 - 开发人员十多年来遇到的问题。
约束编程的重点是意图，而不是实现。
GSS >由于我们已经讨论了GSS利用cassowary.js，因此这是GSS的另一个重要功能：一个元素可以以任何一行代码为中心。这使得很多解决方法都不必要和过去的事情。
>
例如，如果要在网站页面右侧垂直添加订阅按钮，请使用以下代码：.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>
！弱
！
！
特殊的
.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] <= <span>::window[height] / 20;</span>
中的选择器
GSS中的选择器是一组HTML元素的查询，它们用于确定最终受约束影响的元素。选择器很重要，因为您必须在对其应用约束之前从DOM中选择和观察元素。
>
#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>
<span>section < article {
</span> <span><span>.aclass</span> {
</span> <span>height: == 150;
</span> <span>}
</span><span>}</span>
等于：<span>(section < article .aclass)[height] == 150;</span>
刀片算法的计算限制
.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] <= <span>::window[height] / 20;</span>
#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>
>我将使用该文件的Codepen托管版本，但是您可以在此处找到CDN托管版本。接下来，我将在GSS参考脚本（我刚刚添加的行）下添加以下代码，以传递GSS文档对象。
<span>section < article {
</span> <span><span>.aclass</span> {
</span> <span>height: == 150;
</span> <span>}
</span><span>}</span><span>(section < article .aclass)[height] == 150;</span>
>添加一些基本样式后，我可以添加一些GSS来创建布局。这是乐趣开始的地方。
<span><span>.container</span> {
</span> <span>height: == #elm[height];
</span><span>}</span>
>示例2：基于动态更改窗口宽度
的元素旋转
在下一个示例中，
.subscribe-button[right] == <span>::window[width]; </span>.subscribe-button[center-y] == .header[center-y]<span>;</span>
>
注意：由于某些错误，上面的文件路径指向pre-2.0.0 gss的版本以使其工作。现在，让我们通过将其添加到html：
现在，我将返回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] <= <span>::window[height] / 20;</span>
>使用::窗口[中心]选择器将元素置于浏览器中的页面的可见部分。
>使用::窗口[width]用旋转-Z创建约束，该约束将对其Z轴周围的元素产生旋转效果。在这里，从:: window [width]收到的值表示旋转程度。
>>就像我在第一个示例中一样，我将在html上添加一个样式块，并在文本/gss上添加样式块。请记住，要定义我要添加的GSS的样式块是必需的。
- >
- >我将通过在样式标签中添加以下代码来将方框与屏幕相关联：
>请参阅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（网格样式）？对于网络开发人员和设计师来说，>传统CSS使用框模型进行布局，在创建复杂的布局时，该模型可能会限制和复杂。另一方面，GSS使用基于约束的模型，该模型允许更具灵活性和精确度。使用GSS，您可以定义元素之间的关系，并以更直观的方式控制其行为。>如何开始使用GSS？ 要开始使用GSS，您需要在项目中包括GSS引擎。这可以通过从官方网站下载GSS库或使用NPM等软件包管理器来完成。项目中包含GSS引擎后，您可以在CSS文件中开始编写GSS代码。 gss使用JavaScript实现其基于约束的布局引擎，这意味着它应该在支持JavaScript的任何现代浏览器中工作。但是，与任何新技术一样，在多个浏览器中测试您的设计总是一个好主意，以确保兼容性。 是的，有几种资源可以学习GSS。 GSS官方网站提供了综合指南和文档。还有几个在线教程和课程可深入涵盖GSS。是的，GSS是移动Web开发的绝佳工具。其基于约束的布局引擎允许适应不同屏幕尺寸和方向的响应式设计。这使得更容易在不同设备上创建一致的用户体验。 GSS的未来是什么？作为一种相对较新的技术，GSS仍在发展。但是，其强大的功能以及对基于约束的布局的日益兴趣表明，它具有有希望的未来。随着越来越多的开发人员采用GSS，我们可以期望看到更多的资源，工具和社区支持这项创新技术。
以上是介绍GSS：网格样式表的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
