优化我的CSS

Question

我有如下的CSS代码：

div#sbar {position:absolute;top: 10px;bottom: 10px;left:10px; right: 10px;}

有很多属性指定了左、右、上和下等方向。是否有一种方法可以优化/简化CSS呢？我希望像border一样有一个快捷方式。

谢谢

- Hiroki

---

你能展示更多的代码，比如怎样在布局中使用此代码的例子吗？http://jsfiddle.net - David

@Shaz - 你为什么建议使用一个不同的属性？还有谁投了赞成票？ - easwee

@easwee：不太确定那个是否有效，所以我把它作为了一个注释。刚刚测试了一下，看起来你是对的。已删除该注释，谢谢！ - Shaz

Answer 1

没有关于 top、bottom、left、right 的速记。

- Fabian

---

top:10px;bottom:10px 这样写有什么作用吗？ - Wesley Murch

Answer 2

您无法缩短这个：

div#sbar {position:absolute;top: 10px;bottom: 10px;left:10px; right: 10px;}

但是你可以将其缩短为以下形式：

div#sbar {position:absolute;top: 10px;bottom: 10px;left:10px; right: 10px;}
div#gbar {position:absolute;top: 10px;bottom: 10px;left:500px; right: 30px;}
div#nbar {position:absolute;top: 10px;bottom: 10px;left:50px; right: 200px;}

转换成这样：

div#sbar, div#gbar, div#nbar { position:absolute; top: 10px; bottom: 10px }

div#sbar { left:10px; right: 10px }
div#gbar { left:500px; right: 30px }
div#nbar { left:50px; right: 200px }

这可能很有用。

此外，在div#sbar中没有必要使用div：按定义，id是唯一的，因此无需使用标记名称限定id。实际上，使用它会（极其微小地）减慢浏览器速度。

因此，以下代码更好（而且更简洁）：

#sbar, #gbar, #nbar { position:absolute; top: 10px; bottom: 10px }

#sbar { left:10px; right: 10px }
#gbar { left:500px; right: 30px }
#nbar { left:50px; right: 200px }

---

这里有一个实际例子，与我刚才所建议的非常相似：

• 如何重构一些重复的HTML和CSS代码？

在那个问题中，这种方法确实效果更好，因为所有的div都包含在一个共同的父元素中，所以没有必要将元素列出两次。

- thirtydot

Answer 3

你需要的是类似这样的东西：

div#sbar {position: absolute 10px 10px 10px 10px;}`

据我所知，这并不存在。不过如果有的话，那就太好了。

- Jan

Answer 4

一个优化提示：在#sbar之前不需要div -- 附加说明 --

所有这些属性都不会互相抵消吗？将某物向下移动10px，然后再向上移动10px将等于没有移动。

- user527892

---

他们不会。在现代浏览器中，这将使一个div绝对定位并填满除了周围10px的整个浏览器空间。选择器的使用很好。 - easwee

这在ie6中不起作用。不需要指定任何宽度或其他内容。尝试一个示例 - http://jsfiddle.net/easwee/5ZHEy/ - easwee

很棒的东西，谢谢。不过有趣的是，这显然违反了上下规则及其所用的目的。它（本质上）是为元素添加边距，而不是改变其位置。 - user527892

嗯，我现在明白你的意思了。我想这会影响元素的外边缘并移动它们，而不是整个元素本身。 - user527892

可能值得温习一下，是的。在我多年编写CSS的经历中，从未遇到过这种情况，感觉有点奇怪！ - user527892

Answer 5

没有简写的方法可以表示 top, bottom, left, 或 right。

至于你的 CSS 选择器本身，它重复了两次。我的意思是 CSS 是从右到左解析的。

如果你有这样一个例子: div table tr td#myContent{} 这里发生了什么：

div table tr td#myContent{}
找到 #myContent！

div table tr td #myContent {}
我们已经找到  #myContent 了，但没关系！

div table tr td #myContent {}
我告诉过你，我们已经找到 #myContent了...！

divtable tr td #myContent {}
就像我之前说的三次一样，我们已经找到 #myContent 了！！！

div table tr td #myContent {}
...

- Shaz