CSSの備忘録を記載していく。

セレクタ

/* クラス */
.class
/* id */
# id
/* >区切り → 子要素のみ適用。「A > B」の場合、Bの要素のみ適用 */
# main > p
/* カンマ区切り → 複数のセレクタにまとめて適用 */
p,td
/* 半角スペース区切り → 子孫に適用。「A B」の場合、Aの子孫階層のBに適用 */
div p
/* +区切り → 隣接する（直後の）要素に適用 */
# A+div
/* ~区切り → 後にある要素に適用 */
# A~div
/* *= → 前後方一致した要素に適用 */
class*='aa'
/* :not → E:not(s)の場合、sでないセレクタを持つE要素に適用 */
div:not(.top)
/* n番目のE要素に適用。nの部分は任意の数値以外に、奇数の場合「odd」偶数の場合「even」が指定可能 */
E:nth-of-type(n)

/* 指定した要素にカーソルを重ねたときに適用 */
:hover
/* カーソルを重ね、クリックしてから離すまで適用 */
:active
/* 指定した要素にカーソルを重ねたときに適用 */
:focus

ボーダースタイル

/* ボーダー非表示、太さも0 */
border-style: none
/* ボーダー非表示、太さも0 */
border-style: hidden
/* 1本線 */
border-style: solid

width:autoとwidth:100%の違い

width:autoとpaddingを指定している場合、paddingを含んで横幅100%となる
width:100%とpaddingを指定している場合、paddingを含まずに横幅100%となる

マージンとパディング

margin　要素の外側の余白
padding　要素の内側の余白

position

/* デフォルト値。位置を指定できない */
position: static
/* 基本的にstaticと同じ。top、right、bottom、leftで指定した位置の相対位置に配置される */
position: relative
/* ページがスクロールされても同じ位置に表示される */
position: fixes
/* 親要素からの相対位置に配置される */
position: absolute

ブロックレベル要素とインラインレベル要素

ブロックレベル要素

h1、p、ul、ol、div、tableなど
要素の前後に改行が入る（縦に要素が並んで表示される）
width、height、margin、paddingを指定できる

インラインレベル要素

a、span、strongなど
要素の前後に改行がない。（横に要素が並んで表示される）
width、heightを指定できない
margin、paddingは左右のみ指定可能

display

/* ブロックレベル要素にする */
display: block
/* インライン要素にする */
display: inline
/* インライン要素だが、width、height、margin、paddingが可能 */
display: inline-block
/* ブロックレベルのflexコンテナボックスを生成。直下の要素が並列になる */
display: flex

flexのスタイル

/* 左から右に並ぶ */
flex-direction: row
/* 右から左に並ぶ */
flex-direction: row-reverse
/* 上から下へ並ぶ */
flex-direction: column
/* 下から上へ並ぶ */
flex-direction: column-reverse
/* 改行なし */
flex-wrap: nowrap
/* flexコンテナに入るよう改行して表示 */
flex-wrap: wrap

float

/* 指定した要素を左に寄せる */
float: left
/* 指定した要素を右に寄せる */
float: right
/* 初期値。なにもしない */
float: node
/* floatで左寄せ、右寄せした要素に対する回り込みを解除する */
clear: left
clear: right
clear: both
clear: none

スタイルの強制適用

!important

overflow

/* ボックスからはみ出して表示（初期値） */
overflow: visible
/* はみ出した場合、スクロール */　
overflow: scroll
/* はみ出した場合、表示しない */
overflow: hidden
/* ブラウザに依存 */
overflow: auto

box-sizing

/* パディングとボーダーを幅と高さに含めない */
box-sizing: content-box
/* パディングとボーダーを幅と高さを含める */
box-sizing: border-box
/* 親要素の値を継承する */
box-sizing: inherit

テキスト表示関連

/* 連続する空白を1つの空白として表示（改行あり） */
white-space: nomal
/* 連続する空白をそのまま表示 */
white-space: pre
/* 連続する空白を1つの空白として表示（改行なし） */
white-space: nowrap
/* テキストを切り取って省略記号を表示 */
text-overflow: ellipsis

z-index

z-index: 数値
positionでstatic以外が指定された場合、適用される
整数値　重なりの順序を指定。値が大きいほど上になる
z-index: auto　親要素と同じ階層。初期値

visibility

/* ボックスを表示 */
visibility: visible
/* ボックスを非表示 */
visibility: hidden
/* テーブルの行、列に指定した場合、その部分を詰めて表示 */
visibility: collapse