CSS简写定位

Question

有什么简写为top right bottom left或为width和height？

我有很多像这样的CSS

#topDiv {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    height:100px;
}
#centerDiv {
    position:absolute;
    top:100px;
    bottom:120px;
    left:0px;
    right:0px;
}
#consoleDiv {
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    height:120px;
}

我想做这样的事情

position: absolute 10px 50px 50px 100px;

要么

size: 400px 200px; 

Answer 1

没有简写来组合所有这些值.这些都是不同的属性,例如background,它们具有颜色,图像,位置和重复指令,因此可以合并为短手形式.

如果你真的想要这种类型的控件,你可以使用类似SASS的东西并创建一个mixin.

Answer 2

我刚刚发现了这个,正在寻找相同的东西,我最终使用sass为top,bottom,left,right

这是我的解决方案

@mixin position($top, $right: $top, $bottom: $top, $left: $right) {
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
 }

像大多数CSS短语一样工作

@include position(5) // all 4

@include position(5,4) // vertical, horizontal

@include position(5,4,3) // top, horizontal, bottom

@include position(5,4,3,2) // top, right, bottom, left

Answer 3

答案是否定的,因为它们是不同的属性,因此无法组合.但是,您可以稍微整合一下css而不是重复某些属性,例如:

#topDiv,
#centerDiv,
#consoleDiv {
    position:absolute;
    left:0;
    right:0;
}
#topDiv {
    top:0;
    height:100px;
}
#centerDiv {
    top:100px;
    bottom:120px;
}
#consoleDiv {
    bottom:0;
    height:120px;
}