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

答案是否定的，因为它们是不同的属性，因此无法组合。但是，您可以稍微整合一下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;
}

Answer 3

我刚刚发现这个，正在寻找相同的东西，我最终使用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 4

如果你想要速记，你需要制作所谓的混合使用Sass。不知道它是什么？查一查！

@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);
}

这是一个解释它的链接：

http://hugogiraudel.com/2013/08/05/offsets-sass-mixin/

Answer 5

inset是您可以在2020年用作定位速记的方法，但是您需要使用PostCSS和此插件https://github.com/jonathantneal/postcss-inset

示例：

.example {
  inset: 10px 20px 80px;
}

/* becomes */

.example {
  top: 10px;
  right: 20px;
  bottom: 80px;
  left: 20px;
}

更多信息和规格在这里： https://www.w3.org/TR/css-logical-1/#propdef-inset

CSS简写定位

5 个答案: