“隨著網(wǎng)站從簡單文檔演變?yōu)檠}雜的，交互式應(yīng)用程序，文檔佈局的工具，例如浮子不一定適合應(yīng)用程序佈局。”

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

！弱

！

！

特殊的
• 強(qiáng)度，可確保約束成立，如果沒有，一切都會(huì)破裂。建議仔細(xì)且不經(jīng)常使用它。
>

>強(qiáng)度水平提高了列表，並且在執(zhí)行過程中，優(yōu)先級(jí)更高。讓我們看一個(gè)示例：

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

您已經(jīng)做到了這麼遠(yuǎn)，讓我們現(xiàn)在看一些基於約束的佈局。

gss

的約束基本上是兩個(gè)或多個(gè)變量之間可能存在或可能不存在的變量之間的關(guān)係。元素的所有數(shù)字屬性都有資格受到約束。這是一個(gè)示例：

#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將計(jì)算
>值的屬性
• []用於訪問屬性
• =定義不等式約束
• 10和20是像素中的數(shù)值
>

在上面給出的示例中，這兩個(gè)約束都有效。這是一個(gè)不存在的約束的示例。

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

最初，兩個(gè)元素elementa和Elementb都被約束為150px的高度。在第三行中，兩個(gè)元素的總和為225px。因此，這兩個(gè)元素的約束之一將無法成立。

中的選擇器 GSS中的選擇器是一組HTML元素的查詢，它們用於確定最終受約束影響的元素。選擇器很重要，因?yàn)槟仨氃趯ζ鋺?yīng)用約束之前從DOM中選擇和觀察元素。

GSS支持以下基本選擇器。

中的規(guī)則集

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

此嵌套規(guī)則集：

相同

#elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>

>我已經(jīng)在上面的示例中介紹了屬性，但讓我們更仔細(xì)地看一下它們。在GSS中，屬性是屬於元素的變量。當(dāng)我們使用CSS已知的屬性時(shí)，它們相應(yīng)的GSS計(jì)算值將分配為元素上的內(nèi)聯(lián)樣式。

<span>section < article {
</span>  <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</span>

>

cassowary約束算法的簡介

<span>(section < article .aclass)[height] == 150;</span>

>不需要用戶確保輸入約束不會(huì)彼此矛盾。實(shí)際上，這是刀片算法的本質(zhì)。它會(huì)逐步評估約束並自動(dòng)發(fā)現(xiàn)最佳解決方案。

刀片算法的計(jì)算限制

GSS背後的約束求解器稱為CASSOWARY算法。該算法只能計(jì)算線性的約束（即形式y(tǒng) = mx c）?；具\(yùn)算符（ - ， *， /）由算法支持。兩個(gè)（或多個(gè)）約束變量的乘法和劃分不是線性的，因此會(huì)丟棄錯(cuò)誤。

.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>

然後將此代碼添加到您的標(biāo)記的