0

アイコンがたくさんあるアプリケーションの場合、画像スプライトを作成したいと考えています。Webデザイン/フロントエンドWeb開発の世界で「冒険」を始めて以来、私はいつも疑問に思っていました:背後にあるロジックは何ですか?background-position: (left)<number>px (top)<number>px;

これを padding または margin のいずれかの省略形プロパティ (top と left のみを指定する場合) と比較すると、これらは両方であるため、property: (top)<number>px (left)<number>px; top と left の値が逆になります。

また、64px (長さ) x 16px (高さ) で、合計 4 つの 16x16 アイコンを含むスプライトがあるとします。スプライトの 2 番目のアイコンを取得するには (| _ ___| | _this_| _ __| | ____|) のbackground-image: -16px 0px;代わりに入力する必要があります16px 0px(2 番目のアイコンは最初のアイコンよりも 16 ピクセル遅れて開始されるため、これは論理的です)。

例が必要な場合 (w3schools が常に正しいとは限りませんが、例としては適切です): http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_nav

だから私の質問は: background-position プロパティのすべての値が...逆になっているのはなぜですか? その背後に何かロジックはありますか？CSS はプロパティを右から左に読み取りますか?

4

1 に答える 1

1

2 つの値のみでマージン (またはパディング) の短縮形を使用する場合、X/Y 位置を設定していません。上下 (垂直マージン) と左右 (水平方向) に同じ値を使用して、4 つのマージンを設定しています。余白）。4 つの値を渡すこともできます。値は margin-top で始まり、ボックスの周りを時計回りに (上 -> 右 -> 下 -> 左) 続きます。

私は通常、母音なしで「トラブル」という単語（TRBL）を使用してこれを覚えています。

とにかく:配置には 2 つの値しかありません。縦軸 (x 軸、0 が上) を使用してから横軸 (y 軸、0 が左) を使用するのが一般的な方法です。 background-position の y 軸は、ボックスに負の左マージンを与える場合にボックスを移動するのと同じ方向に背景を移動します。

.class1 {
    background-position: -20px 0; // move background 20px left
    margin-left: -20px; // move box 20px left (margin, following items will also move)
}

.class2 {
    position: relative;
    left: -20px; // move box 20px left (position, following items will stay put)
}

つまり、私が言おうとしているのは、見方によっては、値は基本的に一貫しているということです;)

マージンのドキュメント (構文リストを確認してください)

于 2013-05-07T12:23:27.380 に答える