要素の表示方法を指定します。
要素をブロックとして表示します。
PやDIVはデフォルトでブロック表示です。
この要素は1行を占有し、他の要素を同一行に配置することが出来ません。
要素をインラインで表示します。
SPANはデフォルトでインライン表示です。
要素内に存在するエレメントに応じて横幅は変化し、他の要素を同一行に配置することが可能です。
要素をリストアイテムとして表示します。
LIなどはデフォルトでリストアイテム表示です。
要素をマーカーとして表示します。:before や :after スタイルの要素にのみ使えるようですが、詳細は不明です。
ブロックを表示しません。
隠し要素を作成するときに使います。
もちろん、いつでもdisplay属性値を変更させることで
画面に表示させることが出来ます。
詳細は不明です。
いくつかあるようですが、詳細は不明です。
要素の表示位置を指定します。
通常通りの位置に表示します。
通常表示される位置より相対的にずらして表示します。
ずらすオフセット量は top / left プロパティによって指定します。
relativeで指定した要素に続く要素は、
「直前の(relative表示の)要素が通常通りに配置されたとして」自らの位置を決定します。
これは、relative表示要素のオフセットをいくら変更しても
その他の要素が表示位置を決定する際には何の影響を与えない事を意味します。
絶対座標で位置を決定します。
座標は top / left プロパティによって指定します。
この要素は、width / height によりサイズを手動で決定する必要があります。
absoluteで指定した要素に続く要素は、
「直前の(absolute表示の)要素が存在しないものとして」自らの位置を決定します。
つまり、absolute表示要素はHTML内のどこに記述しても良いという事です。
absoluteと似ていますが、画面をスクロールしても
要素が常に同じ位置に表示されるようにします。
要素の表示位置を指定します。
position : relative の場合、通常位置からのY軸オフセット座標。
position : absolute / fixed の場合、ボックス左上点のキャンパス内Y座標。
要素の表示位置を指定します。
position : relative の場合、通常位置からのX軸オフセット座標。
position : absolute / fixed の場合、ボックス左上点のキャンパス内X座標。
要素の表示位置を指定します。
position : absolute / fixed の場合、ボックス右下点のキャンパス内Y座標。
要素の表示位置を指定します。
position : absolute / fixed の場合、ボックス右下点のキャンパス内X座標。
要素をフローティングボックス化します。
left / right / none が指定可能です。
フローティングボックスはdisplay : absoluteの要素に似ていますが
うまく表現できないので、実際に試してみて下さい(笑)。
#float { float: right; width: 160px; height: 120px; border: 1px blue dotted; }
要素のZ軸表示位置を決定します。
2つ以上の要素が重なるとき、どちらを上に表示するかという事です。
Z軸位置を数値で指定します。大きい程「上」に表示されます。
文字の表示方向を指定します。
左から右に表示します(デフォルト)。
右から左に表示します。
要素ボックスの横幅を指定します。
インライン要素の場合、この値は無視されます。
要素ボックスの縦幅を指定します。
インライン要素の場合、この値は無視されます。
要素ボックスの横幅の最小値を指定します。
例えば、要素内に何のエレメントが無かった場合でも
最低限ここで指定しただけの横幅が確保されるという事です。
要素ボックスの横幅の最大値を指定します。
例えば、要素内に長い文字列があった場合でも
ここで指定した横幅以上に要素ボックスは拡張されないという事です。
要素ボックスの縦幅の最小値を指定します。
要素ボックスの縦幅の最大値を指定します。
ボックス内文字列の改行幅を指定します。
数値で指定した場合、emによる倍数指定だと見なされます。
縦方向の表示位置を決定します。
baseline / middle / sub / super / text-top / text-bottom / top / bottom のいずれかが使用できます。
ブロックの内容が、指定されたブロックのサイズを超えるときの表示方法を指定します。
これがデフォルトです。
ブロックサイズを超えたコンテンツは、ブロックからはみ出て表示されます。
ブロックサイズを超えたコンテンツは表示されません。
(常に)スクロールバーを表示します。
コンテンツがブロックサイズを超えるときにのみ、スクロールバーを表示します。
ボックス内表示内容をクリップ(マスキング表示)します。
P { clip: rect(5px, 10px, 10px, 5px); }
ボックスの可視性を指定します。
これがデフォルト。ボックスを見えるようにします。
ボックスを見えないようにします。
見えないだけなので、display: none とは異なり
レイアウト上は存在しています。
詳細は不明です。