カテゴリー:
CSS
閲覧数:471 配信日:2017-01-15 11:29
従来の問題点
適当に設定していたため、確認に手間取る
きっかけ
「box-sizing: border-box;」指定しても「margin」は対象外
従来
「margin」「padding」をセットで考えていた
昨日、気が付いたこと
・「margin」は、「width」「height」よりも上位レイヤー
・少なくともレイアウトにとっては
「レイアウトベース」で記述していく
レイアウトに影響を及ぼす内容から順番に記載していく
完璧さを求めない
・どうせ覚えられないので、主要なもののみ順番ルールを設定
・具体的には、下記7種類のみ
特徴
・「margin」を「padding」から分離
・「margin」を「width」「height」より先に記述
ルール
セレクタ{
display
position
top
left
margin
width
height
padding
background-color
color
font-size
font-weight
}
display
position
top
left
margin
width
height
padding
background-color
color
font-size
font-weight
}
※Googleコーディング規約では、アルファベット順