Fatal编程技术网
  • css/
  • 有没有办法将关系/约束放入CSS中？

有没有办法将关系/约束放入CSS中？

css

有没有办法将关系/约束放入CSS中？,css,Css,在我所听说的每一个设计工具或艺术原则中，关系都是一个中心主题。我所说的关系是指你可以在Adobe Illustrator中指定一个形状的高度等于另一个形状高度的一半。您不能用CSS表达此信息。CSS硬编码所有值。使用这样一种允许变量和算术的语言，您可以更接近关系，但它仍然是一种CSS变体 我认为这是CSS最大的问题。CSS被认为是一种描述网页视觉成分的语言，但它忽略了关系和约束，这些是艺术的核心思想 想象一种新的Web设计语言能够表达关系和约束，并且可以使用当前的CSS属性在JavaScript

在我所听说的每一个设计工具或艺术原则中，关系都是一个中心主题。我所说的关系是指你可以在Adobe Illustrator中指定一个形状的高度等于另一个形状高度的一半。您不能用CSS表达此信息。CSS硬编码所有值。使用这样一种允许变量和算术的语言，您可以更接近关系，但它仍然是一种CSS变体

我认为这是CSS最大的问题。CSS被认为是一种描述网页视觉成分的语言，但它忽略了关系和约束，这些是艺术的核心思想

想象一种新的Web设计语言能够表达关系和约束，并且可以使用当前的CSS属性在JavaScript中实现，这有多可能呢？

您正在寻找类似于或的东西吗？不过，这两个项目仍处于研究/原型阶段

CSS脚本布局规范似乎已经作为一个Google Chrome插件实现了。

早在1996年，Netscape就有一个JavaScript样式表规范

CSS脚本布局规范不是Chrome插件。所提供的是概念证明。由于微软的CSS表达式实现存在严重的性能问题，许多人不相信JavaScript能够在CSS布局中表现得足够好

它仅限于布局，因为这似乎是CSS最大的抱怨。它的目的是让超级用户能够做几乎任何他们想做的事情，但同时使布局能够被新手用户封装、引用和重用。

直接来说，由于不同浏览器的支持程度不同，在纯CSS中做这件事比帮助用户更麻烦

间接地说，像Less或by这样的框架在发送给客户机之前是最好的选择，但正如您所说的，并不理想

在Javascript中，使用jQuery根据另一个元素设置一个元素可能是一个不错的解决方案的开始，但我找不到任何人编写的代码示例来解决您的特定问题。但我想可能是这样的：

var totalHeight = 1000;
$("#div2").height(totalHeight - $("#div1").outerHeight());
这将根据另一个的高度+边框+填充设置一个的高度。为了变得更健壮，需要做的还不止这些，但这是解决方案的开始。

您可能想看看，一种编写CSS的pythonic方法。它包括变量、算术，甚至可以对颜色进行运算

我也在寻找一种写作风格的方法，这种方法比CSS更高级。但我相信，最大的问题之一是，CSS样式表通常是由设计师而不是程序员编写的，使用的设计工具可能允许他们在更高的级别上工作，然后生成CSS。对于我们程序员来说，一个好的灵活方法可能不起作用，因为它对设计师来说太古怪了。

如果您使用百分比设置大小属性，并将元素作为要调整大小的元素的子元素，您将能够相对地调整元素的大小。然后，使用定位将子对象移动到父对象之外。

使用百分比确定高度是为了表示与硬编码值的关系

“如果使用百分比设置大小属性，并将元素作为要调整大小的元素的子元素，则可以相对于另一个元素调整元素的大小”，但前提是明确表示父元素的高度（这将应用迭代，直到html元素）

在CSS级别2中，“百分比是根据生成的框的包含块的高度计算的。如果没有明确指定包含块的高度（即，它取决于内容高度），则该值被解释为“自动”。 但从第1版开始，“当未明确指定包含块的高度时，绝对定位图元上的百分比高度不再视为“自动”

使用绝对定位，此解决方案会中断，因为“对于包含块基于块级元素的绝对定位元素，百分比是根据该元素填充框的高度计算的。”。这与CSS1不同，CSS1始终根据父元素的内容框计算百分比。”

在下面的代码中，内部包装器divs height将使用绝对定位进行折叠，从而失去使用它们放置边距的能力

<body>

<style type="text/css">
html, body {
    height: 100%;
}

div#wrapper {
    height: 100%;   
}

div#content-wrap {
    height: auto;
}

div#wrapper-upper-half {
    height: 50%;    
    background-color:aqua;
}

div#wrapper-lower-half {
    height: 50%;    
    background-color:fuchsia;
}

</style>

<div id="wrapper">
    <div id="wrapper-upper-half">   
    </div>

    <div id="content">
    </div>

    <div id="wrapper-lower-half">   
    </div>  
</div>

</body>


html，正文{
身高：100%；
}
div#wrapper{
身高：100%；
}
div#内容包装{
高度：自动；
}
div#包装上半部分{
身高：50%；
背景色：浅绿色；
}
div#包装下半部分{
身高：50%；
背景色：紫红色；
}

是的，这是对我的想法的非常详细的描述。关于约束层叠样式表的论文是很精彩的。它是在1999编写的，不幸的是，我找不到任何进展的记录。在JavaScript中在当前浏览器中实现类似的系统在技术上是可行的吗？或者至少是W3C考虑的。在未来版本的CSS中使用这些功能？很抱歉，我无法回答您的任何问题。我在自己的工作中偶然发现了1999年的论文，但显然没有什么成果。该论文的一位作者启动了一个项目来实现这一称为网格样式表的功能：顺便说一句，对于弹性布局，我使用了基于jQuery的方法JoshMock建议。我仍然不认为这是一个好的解决方案，因为很难明确且易读地表达元素之间的关系/约束。尽管CSS与LESS或Sass非常相似。这些语言确实使CSS更容易，但它们并没有真正编码