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

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

！弱

！

！

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

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

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

您已經(jīng)做到了這么遠，讓我們現(xiàn)在看一些基于約束的布局。

gss

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

#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是像素中的數(shù)值
>

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

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

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

中的選擇器 GSS中的選擇器是一組HTML元素的查詢，它們用于確定最終受約束影響的元素。選擇器很重要，因為您必須在對其應用約束之前從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)在上面的示例中介紹了屬性，但讓我們更仔細地看一下它們。在GSS中，屬性是屬于元素的變量。當我們使用CSS已知的屬性時，它們相應的GSS計算值將分配為元素上的內聯(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>

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

刀片算法的計算限制

GSS背后的約束求解器稱為CASSOWARY算法。該算法只能計算線性的約束（即形式y(tǒng) = 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>

然后將此代碼添加到您的標記的