忘れてしまうCSSの超基本

普段書かないので、あれどうやるんだっけと思ったときにメモしてます。

margin プロパティの順番

margin: 10px;                /*上下左右*/
margin: 10px 20px;           /*上下、左右*/
margin: 10px 20px 30px;      /*上、左右、下*/
margin: 10px 20px 30px 40px; /*上、右、下、左*/

clearfix

float: left;

などfloat指定された要素のみを子要素として持つ親要素は、そのサイズが計算されず、正しく表示されない。
そこで、以下のようにclearfix classに疑似要素を作って

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

親要素に

<div class="clearfix">
  <div class="floating">I'm floating</div>
</div>

と指定することで、表示崩れを直せる。

width, height にpaddingとborderも含める

デフォルトではbox-sizing: content-boxとなっていて、widthの値が示すサイズはpadding, borderを含まない。box-sizing: border-boxとすると、padding,borderを含んだサイズになる。

width: 30%;
padding: 15px;
box-sizing: border-box;

line-height に倍率だけ指定する

line-heightに倍率だけ指定すると、fontサイズに対する倍率で高さを指定することができる。

font-size: 10px;
line-height: 1.5;

文字を上下の中心に配置する

heightとline-heightを同じにすることで、上下中央揃えにすることができる。
ただしこれは１行のものに有効。

height: 30px;
line-height: 30px;

marginの相殺

• 隣り合う要素のmarginは相殺される
• 子要素のmarginは親要素を突き抜ける

文字を省略して表示する

text-overflow: ellipsis; /*...と省略する*/
white-space: nowrap;     /*改行を禁止する*/
overflow: hidden;        /*はみ出した部分は表示しない*/