CSS基本知識4-CSSラインモデル

display:inline、block、inline-block

block要素の特徴は、常に新しい行で始まることです.高さ、行の高さ、頂部と底辺の距離を制御できます.幅のデフォルトは、幅を設定しない限り、コンテナの100%です.
inline要素の特徴は、他の要素と同じ行にあることです.高さ、行の高さと頂と底辺の距離は変えられない.幅は文字や画像の幅であり、変更できません.
display:inline-blockはオブジェクトをインラインオブジェクトとして渡しますが、オブジェクトの内容はブロックオブジェクトとして渡します.隣のインラインオブジェクトは同じ行に渡され、スペースが許可されます.
つまり、このオブジェクト自体は行要素ですが、その内容はブロック(つまり、幅を大きくすることができます.これは、1つのチャネル上のいくつかのものが、位置合わせができ、自分の大きさなどがあることを想像することができます.
 
ブロックレベル要素:ブロックレベル要素は他の要素が同じ行にあることを排斥し、要素の幅(width)と高さ(height)を設定することができ、ブロックレベル要素は一般的に他の要素の容器であり、ブロックレベル要素と行内要素を収容することができる.よく見られるブロック級元素はdiv,p,h 1~h 6などである.
≪行内要素|Row Elements|emdw≫:行内要素は幅(width)と高さ(height)を設定できませんが、他の行内要素と同じ行に配置できます.行内要素には一般的にブロックレベル要素は含まれません.行内の要素の高さは一般的に要素内部のフォントサイズによって決定され、幅は内容の長さによって制御されます.よく見られる行内要素はa,em,strongなどである.
たとえば、divまたはpに次のスタイルを適用できますが、aラベルでは次のスタイルを適用できません.
1.test{ width : 100px ; height : 100px ;}もちろん、スタイルdisplayプロパティを使用して要素の表示方法を変更することもできます.displayの値がblockに設定されると、要素はブロックレベルで表示されます.display値をinlineに設定すると、要素は行内に表示されます.aラベルに次のスタイルを適用できます.
1.test{ display : block ; width : 50px ; height : 50px ;}また、エレメントに幅の高さを設定したり、行内で表示したりしたい場合は、displayの値をinline-blockに設定できます.次のようになります.
1a{ display :inline- block ; width : 100px ; height : 100px ;}添付:
ブロック要素(block element)*address-アドレス*blockquote-ブロック参照*center-挙中整列ブロック*dir-ディレクトリリスト*div-常用ブロックレベルは簡単です.css layoutの主なラベル*dl-定義リスト*fieldset-form制御グループ*form-インタラクティブフォーム*h 1-大見出し*h 2-副題*h 3-3級見出し*h 4-4級見出し*h 5-5級見出し*h 6-6級見出し*hr-水平区切り線*isindex-input prompt*menu-メニューリスト*noframes-framesオプションです.(frameがサポートされていないブラウザに対してこのブロックの内容を表示する*noscript-)オプションのスクリプトの内容(scriptがサポートされていないブラウザに対してこの内容を表示する)*ol-ソートフォーム*p-段落*pre-フォーマットテキスト*table-テーブル*ul-非ソートリスト内要素(inline element)*a-アンカー*abbr-略称*acronym-頭文字*b-太字(推奨しません)*bdo-bidi override*big-大フォント*br-改行*cite-引用*code-コンピュータコード(ソースコードを参照する場合に必要)*dfn-定義フィールド*em-強調*font-フォント設定(推奨しない)*i-斜体*img-ピクチャ*input-入力ボックス*kbd-キーボードテキストを定義*label-テーブルラベル*q-短引用*s-中線(推奨しない)*samp-定義サンプルコンピュータコード*select-プロジェクト選択*small-小フォントテキスト*span-常用インラインコンテナテキスト内ブロックを定義*strike-中線を引く*strong-太字強調*sub-下付き*sup-上付き*textarea-複数行テキスト入力ボックス*tt-電報テキスト*u-下線*var-変数可変要素可変要素を定義コンテキスト文脈に基づいてブロック要素またはインライン要素として決定します.*applet-java applet*button-ボタン*del-削除テキスト*iframe-inline frame*ins-挿入テキスト*map-ピクチャブロック(map)*object-objectオブジェクト*script-クライアントスクリプト