66

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

6 回答 6

55

2021 年更新：该inset物业目前正在获得采用。此属性使用与速记属性相同的多值语法margin。有关浏览器兼容性，请参阅MDN。

不存在将所有这些值组合起来的简写形式。这些都是不同的属性，不像，例如background，它具有颜色、图像、位置和重复指令，因此可以合并成一个速记形式。

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

于 2012-06-01T18:11:15.130 回答
17

我刚找到这个，正在寻找相同的东西，我最终使用 sass 作为顶部、底部、左侧、右侧

这是我的解决方案

@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

于 2017-09-14T15:43:42.977 回答
8

答案是否定的，因为它们是不同的属性，所以不能组合。但是，您可以稍微巩固您的 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;
}
于 2012-06-01T18:23:18.610 回答
2

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

于 2020-04-15T14:21:11.867 回答
1

你可以使用插图：右上角左下角；.

#topDiv {
    position: absolute;
    inset: 0;
    min-height: 100px;
}

#centerDiv {
    position: absolute;
    inset: 100px 0 120px;
}

#consoleDiv {
    position: absolute;
    inset: auto 0 0 0;
}
于 2022-01-15T08:10:20.520 回答
0

如果你想要这个的简写，你需要用 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);
}

这是一个解释它的链接：

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

于 2015-06-10T19:22:34.623 回答