CSSレイアウトの問題と解答

4732 ワード

1、CSS labelの文字は垂直に中央にあり、簡単なコードです。


          
フォント行の高さを設定します.line-height:30 pxなどです.
2、z-indexはcssの中でどのように使いますか?
定義したCSSのposition属性値がabsolute、relative、fixedの場合、z-indexで値を取ると有効になります.このアトリビュートパラメータの値が大きいほど、一番上に積層されます.例:.z1,.z2,.z3{position:absolute;width:200px;height:100px;padding:5px 10px;color:#fff;text-align:right;} .z1{z-index:1;background:#000;} .z2{z-index:2;top:30px;left:30px;background:#C00;} .z3{z-index:3;top:60px;left:60px;background:#999;}
z-index:1
z-index:2
z-index:3
の3つのCSSは、z-indexの値に基づいて誰が最上位にいるかを決定します!
3、position属性

定義と使用法


positionプロパティは、要素の位置決めタイプを規定します.

説明


このプロパティは、要素レイアウトを確立するために使用される位置決めメカニズムを定義します.任意の要素は配置できますが、絶対または固定要素は、要素自体がどのタイプであるかにかかわらず、ブロック・レベル・ボックスを生成します.相対位置要素は、通常のストリーム内の既定の位置に対してオフセットされます.
デフォルト:
static
継承:
no
バージョン:
CSS2
JavaScript構文:
object.style.position="absolute"

可能な値



説明
absolute
絶対位置決めの要素を生成し、static位置決め以外の最初の親要素に対して位置決めします.要素の位置は、「left」、「top」、「right」および「bottom」属性で規定されます.
fixed
ブラウザウィンドウに対して絶対位置の要素を生成します.要素の位置は、「left」、「top」、「right」および「bottom」属性で規定されます.
relative
相対的に位置決めされた要素を生成し、通常の位置に対して位置決めします.したがって、「left:20」は、要素のLEFT位置に20ピクセルを追加します.
static
既定値.配置されず、要素は正常なストリームに表示されます(top、bottom、left、right、またはz-index宣言は無視されます).
inherit
親要素からposition属性を継承すべき値を指定します.

CSSディスプレイ属性


CSSリファレンスマニュアル

≪インスタンス|Instance|emdw≫


段落を移動させるボックス:
p.inline
  {
  display:inline;
  }

みずからやってみる

ブラウザのサポート


IE
Firefox
Chrome
Safari
Opera
 
 
 
 
 
すべての主流ブラウザはdisplayプロパティをサポートしています.
注釈:規定があれば!DOCTYPEでは、Internet Explorer 8(およびそれ以上のバージョン)は、属性値「inline-table」、「run-in」、「table」、「table-caption」、「table-cell」、「table-column」、「table-column-group」、「table-row」、「table-row-group」、および「inherit」をサポートします.

定義と使用法


displayプロパティは、要素が生成すべきボックスのタイプを指定します.

説明


このプロパティは、レイアウトの作成時に要素が生成する表示ボックスのタイプを定義するために使用します.HTMLなどのドキュメントタイプでは、HTMLで定義されている表示階層に違反する可能性があるため、displayを使用すると慎重でないと危険です.XMLの場合、XMLにはこのような階層が内蔵されていないため、すべてのdisplayが絶対に必要です.
注記:CSS 2にはcompactとmarkerの値があるが、広範なサポートが不足しているため、CSS 2から.1から削除しました.
デフォルト:
inline
継承:
no
バージョン:
CSS1
JavaScript構文:
object.style.display="inline"

可能な値



説明
none
この要素は表示されません.
block
この要素はブロックレベルの要素として表示され、前後に改行文字が付きます.
inline
デフォルト.この要素はインライン要素として表示され、要素の前後に改行はありません.
inline-block
行内のブロック要素.(CSS 2.1新規値)
list-item
この要素はリストとして表示されます.
run-in
この要素は、コンテキストに基づいてブロックレベルの要素またはインライン要素として表示されます.
compact
CSSにはcompactの値があるが、広範なサポートが乏しいため、CSS 2から既に存在する.1から削除します.
marker
CSSには値markerがあるが、広範なサポートが欠けているため、CSS 2からすでに.1から削除します.
table
この要素はブロックレベルの表として表示されます().表の前後に改行文字が表示されます.
inline-table
この要素はインライン表として表示されます(
).表の前後に改行はありません.
table-row-group
この要素は、)のような1つ以上の行のグループとして表示されます.
table-header-group
この要素は、1つ以上の行のグループとして表示されます().
table-footer-group
この要素は、のような1つ以上の行のグループとして表示されます.
table-row
この要素は、のような表行として表示されます.
table-column-group
この要素は、)のような1つ以上の列のグループとして表示されます.
table-column
この要素はセル列として表示されます()
table-cell
この要素は、
およびのような表のセルとして表示されます.
table-caption
この要素は表のタイトルとして表示されます(
)
inherit
親要素からdisplayプロパティの値を継承することを指定します.