定位的 CSS 简写
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10855276/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS shorthand for positioning
提问by Vitim.us
There are any shorthand for toprightbottomleftor for widthand height?
toprightbottomleft或 for widthand有简写height吗？
I have a lot of css like this
我有很多这样的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;
}
I would like to do anything like this
我想做这样的事情
position: absolute 10px 50px 50px 100px;
or
或者
size: 400px 200px;
采纳答案by Sampson
No short-hand exists to combine all of these values. These are all differentproperties, unlike, for instance background, which has colors, images, positions and repeat instructions and as such canbe coalesced into a short-hand form.
不存在组合所有这些值的简写。这些都是不同的属性，例如background，它具有颜色、图像、位置和重复指令，因此可以合并为简写形式。
If you really wanted this type of control, you could use something like SASS and create a mixin.
如果你真的想要这种类型的控件，你可以使用类似 SASS 的东西并创建一个mixin。
回答by Adam Sparks
I just found this, was looking for the same, I ended up using sass for top, bottom, left, right
我刚刚找到这个，正在寻找相同的，我最终使用 sass 作为顶部，底部，左侧，右侧
here is my solution
这是我的解决方案
@mixin position($top, $right: $top, $bottom: $top, $left: $right) {
top: $top;
right: $right;
bottom: $bottom;
left: $left;
}
works like most css shorthands
像大多数 css 速记一样工作
@include position(5) // all 4
@include position(5) // all 4
@include position(5,4) // vertical, horizontal
@include position(5,4) // vertical, horizontal
@include position(5,4,3) // top, horizontal, bottom
@include position(5,4,3) // top, horizontal, bottom
@include position(5,4,3,2) // top, right, bottom, left
@include position(5,4,3,2) // top, right, bottom, left
回答by Dave Haigh
The answer is no as they are different properties so can not be combined. You can however consolidate your css a little bit rather than repeating certain properties, e.g:
答案是否定的，因为它们是不同的属性，所以不能组合。但是，您可以稍微整合您的 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;
}
回答by Andrew
If you want shorthand for this, you're gonna need to make what's called a mixin with Sass. Don't know what it is? Look it up!
如果你想要简写，你需要用 Sass 制作所谓的 mixin。不知道是什么？看看吧！
@mixin position($position, $args) {
@each $o in top right bottom left {
$i: index($args, $o);
@if $i and $i + 1< = length($args) and type-of(nth($args, $i + 1)) == number {
#{$o}: nth($args, $i + 1);
}
}
position: $position;
}
@mixin absolute($args) {
@include position("absolute", $args);
}
@mixin fixed($args) {
@include position("fixed", $args);
}
@mixin relative($args) {
@include position("relative", $args);
}
Here's a link that explains it:
这是一个解释它的链接：
回答by Mattia Astorino
insetis what you can use in 2020 as positioning shorthand, but you need to use PostCSS and this plugin https://github.com/jonathantneal/postcss-inset
inset是你可以在 2020 年使用的定位速记，但你需要使用 PostCSS 和这个插件https://github.com/jonathantneal/postcss-inset
Example:
例子：
.example {
inset: 10px 20px 80px;
}
/* becomes */
.example {
top: 10px;
right: 20px;
bottom: 80px;
left: 20px;
}
More info and spec here: https://www.w3.org/TR/css-logical-1/#propdef-inset
更多信息和规范在这里：https: //www.w3.org/TR/css-logical-1/#propdef-inset
