Question

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

这种无能为力是CSS最大的问题。 CSS应该是一种描述网页可视组件的语言，但它忽略了关系和约束，这些都是艺术的核心。

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

Answer 1

您是否在寻找CSS Scripting Layout Specification或Constraint Cascading Style Sheets for the Web之类的内容？两者仍处于研究/原型阶段。

CSS Scripting Layout Specification已经实现为谷歌Chrome插件，似乎。

Answer 2

如果使用百分比设置尺寸属性，并将元素放置为正在调整尺寸的子元素，则可以相对于另一个元素调整元素的大小。然后，使用定位将孩子移动到父母之外。

Answer 3

1996年，Netscape还发布了一个JavaScript Style Sheets规范，http://en.wikipedia.org/wiki/JavaScript_Style_Sheets。

CSS脚本布局规范不是Chrome插件。提供的是概念证明。由于Microsoft的CSS Expressions实现存在严重的性能问题，许多人不相信JavaScript能够很好地执行CSS布局。

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

Answer 4

直接地说，由于来自不同浏览器的不同支持，这不是你可以在纯CSS中做的，而不会造成比帮助更多的麻烦。

间接地，像Less之前或running your CSS through a server-side script之类的框架在发送给客户之前是最好的选择，但就像你说的那样，并不理想。

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

var totalHeight = 1000;
$("#div2").height(totalHeight - $("#div1").outerHeight());

这将根据另一个的高度+边框+填充设置一个的高度。为了更加强大，需要考虑更多内容，但这是解决方案的开始。

Answer 5

您可能需要查看Clever CSS，这是一种编写CSS的pythonic方法。它包括变量，算术，甚至可以对颜色进行操作。

我也在研究一种这样的写作风格的方法，这种方法比CSS更高。但我相信，其中一个重大问题是CSS样式表通常由设计人员而不是程序员编写，使用的设计工具可能允许他们在更高级别工作并在之后生成CSS。对我们程序员来说，一个好的灵活方法可能无法奏效，因为它对设计师来说太过极了。

Answer 6

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

“如果您使用百分比设置尺寸属性，并将元素放置为您正在调整的元素的子元素，您将能够相对于另一个元素调整元素的大小”但是，如果父元素高度明确表示（这适用迭代直到html元素。）

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

使用绝对定位时，此解决方案会中断，因为“对于其包含块基于块级元素的绝对定位元素，百分比是根据该元素的填充框的高度计算的。这是对CSS1的更改，其中百分比总是相对于父元素的内容框计算。“

在下面的代码中，内部包装器div高度将使用绝对定位折叠，失去使用它们放置边距的能力。

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

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

6 个答案: