css - ポジショニングの CSS 短縮形

Question

top right bottom leftorwidthと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;

score 55 · Accepted Answer

2021 更新:insetプロパティは現在採用されています。このプロパティは、省略形プロパティと同じ複数値構文を使用しmarginます。ブラウザーの互換性については、 MDNを参照してください。

これらの値をすべて組み合わせる省略形はありません。これらはすべて異なるプロパティです。たとえばbackground、色、画像、位置、および繰り返し命令を持つとは異なり、短い形式にまとめることができます。

このタイプのコントロールが本当に必要な場合は、SASS などを使用してmixinを作成できます。

score 8 · Accepted Answer

答えは「いいえ」です。これらは異なるプロパティであるため、組み合わせることはできません。ただし、特定のプロパティを繰り返すのではなく、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;
}

score 2 · Accepted Answer

inset2020年にポジショニングの略記として使用できるものですが、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

score 0 · Accepted Answer

これを省略したい場合は、ミックスインと呼ばれるものを 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/

css - ポジショニングの CSS 短縮形

6 に答える 6

Related

Reference