CSSの左、上、右、下を思い出す


19

CSSを使用する場合、ボーダー、マージン、パディングなどのCSS属性を組み合わせて定義する際に、左、上、右、下の順序を覚えるために(たぶん言いたいことはありますが)ちょっとしたトリックを行います。

私は永遠に忘れてしまい、GoogleはW3Schoolsのようながらくたでいっぱいのようです。


6
w3schools.comの「がらくた」はどうですか?それは彼らの読み取りに目に簡単ですCSS3リファレンスをよりW3C CSS 3仕様 ...文書
danlefree

8
@danlefree参照W3Fools苦情の長いリストのため。(この特定の質問に関してはどこにも間違っているとは思いませんが。)
Su '

Danlefee、Suの応答を参照してください。w3schoolsは、HTML / CSS / JSでの学習とリソースの促進に関する悪魔です。ページ1グーグルからがらくたを落とす動きが進行中です。
マットフレーマン

2
なぜ北、東、南、西に言及した人がいないのだろう。時計回りに相当しますが、ちょっと:)。
ケビン

回答:


24

それらはすべて上から順に時計回りに移動します。


4
背景の配置(この場合は少し関連があるように見えます)を除き、最初に左オフセットを選択し、次に上オフセットを選択します。
マルセル

@Marcel、非常に真実です。これは、私がいつも最初に間違っている理由を説明しています。
ジョンコンデ

バックグラウンドポジショニングは、x-y座標ではなく、数値ではなく数値を使用する場合に合理的ですleft top
zzzzBov


8

時計の文字盤を視覚化して覚えています。12時(上)から始まり、3時(右)、6時(下)、最後に9時(左)に移動します。


5

アナロジーを巻く簡単なことに加えて、私は別のニーモニック提供:上、右、下を、左 initialismの与えTRBLを、発音ひどい -or トラブルをあなたのような場合。(ねえ、高音でさえバリトンとしての悩みを与えてくれます。)サウンドWebデザインの4つの原則であるCRAP(コントラスト、繰り返し、アライメント、近接)によく合います。


1
がらくた。よくやった、サー
レイミッチェル

2

練習

私は、このちょっとしたちょっとしたことを暗記する特別な方法を使ったことは一度もありません。上から時計回りの順序で設定されていることは知っていましたが、その後多くのCSSを書き始めました。

タスクを繰り返し実行すると、効率のために詳細を記憶する傾向があるため、この時点で次のようになります。

  1. すべて
  2. 上下左右
  3. 右上と左下
  4. 右上、左下

第二の性質です。と同じように:

border: <width> <style> <color>;

そして

background: <color> <image> <repeat> <attachment> <position>;
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.