よく見るfont-family

@charset"utf-8";body{font-family:Arial,sans-serif;}

複数書く理由はOSによって入っているフォントが異なるため。
左のものから優先的に使用される。

最後に総称フォントファミリー名を書く

個々のフォント名ではなく、フォントのカテゴリーを指定するもの。
もし指定したフォントが全く入っていなかった場合にせめてこういう系統のフォントを表示してほしいと伝えるためのもの。

レイアウトが楽になる

body{box-sizing:border-box;}

こうすることでwidthとheightがmarginとborderを含めるようになる。

コンテンツが領域から溢れた時に使う

#box1{overflow:hidden;//隠れるoverflow:scroll;//スクロールバーがつく}

ボタンを無効っぽく見せる

#btn.disabled{opacity:0.5;}

特定のinputタグにスタイルを当てる

input[type=text]{width:100%;height:100%;}

複数のセレクタにスタイルを当てる

• セレクタをつなげて記述
  • 同じ要素にクラス名を複数指定していて、その全てに同じCSSを適用する
• セレクタの間に半角スペースを入れて記述
  • 入れ子構造の時に適用
• カンマ区切りで記述
  • 異なる要素にクラス名を複数指定している時に適用する

positon

absolute:基準の位置が「親要素」
fixed:基準の位置が「ウィンド全体」

※absolute注意点
子要素をabsoluteにした場合、親要素に必ずrelative(もしくはfixed)を指定しておく

flex-box

参考記事
https://ics.media/entry/13117/

• ボックス(HTMLが生成する領域)の横並びや縦並びといったスタイル付けをする時、ボックスの親要素のスタイルのdisplayプロパティにflexを指定する。
• Flexboxにおけるレイアウトは、主軸と交差軸により決定され、初期状態では横方向の軸が主軸、縦方向の軸が交差軸となる。
  • 主軸の並びはjustify-contentプロパティで指定する。
  • 交差幅の並びはalign-itemsプロパティで指定する。

• ボックスを複数行に並べる

  • 初期設定では、ボックスは親要素の幅にかかわらず一行に並ぶ。設定を変えるにはflex-wrapプロパティの値を変える。
    • nowrap:ボックスを単一行に配置
    • wrap:ボックスを複数行に配置
  • ボックスごとの高さは揃う。これはalign-itemsプロパティの初期値(strech)によるもの。

• ボックスの並び方向

  • 初期状態ではボックスは横方向に並ぶ。並び方向を変更するにはflex-directionプロパティを用いる。

margin

左右にautoを指定すると、左右中央に要素を配置できる。

css
.foo {
  margin: 0 auto;
}