CSSレイアウトモデル学習

回転:http://www.cnblogs.com/erliang/p/4092192.html
CSSレイアウトモデル学習
 
参照リンク慕課ネット：HTML+CSS基礎コース
知識の基礎
1.スタイル

インライン

埋め込み

外部

2.セレクタ

類セレクタ（.）

idセレクタ（「啱」）

サブセレクタ（>）

は、後代セレクタ（「」）

を含む。

汎用セレクタ（*）

ダミー選択子（「:」は状態設定スタイル）

パケット選択子("，")

3.権利

継承の権利値は0.1で、ラベルの権利値は1であり、クラス選択子の権利値は10であり、ID選択子の権利値は最高100

である。

重要性

p{color:red!important;}

4.元素の分類
CSSでは、htmlのタグ要素は大きく三つのタイプに分けられています。
1.ブロック要素（display：block）

常用<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

特徴

の各ブロックレベル要素は、新しい行から始まり、その後の要素も別の行に移る。(本当に横暴で、一つのブロックレベルの要素が一つの行を独占する)

要素の高さ、幅、行の高さ、トップとボトムの距離は設定できます。

要素の幅は、幅を設定しない限り、親容器の100%である。

2.インライン要素(display:inline)

常用<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

特徴

と他の要素は全部一行にあります。

要素の高さ、幅、行の高さおよび上部と下部の余白は設定できません。

要素の幅は、文字または画像の幅であり、変更できない。

3.内部連結ブロック要素(display:inline-block)

常用<img>、<input>

特徴は、インライン要素、ブロック要素の特徴を同時に備えている

。

と他の要素は全部一行にあります。

要素の高さ、幅、行の高さ、トップとボトムの距離は設定できます。

cssレイアウトモデル
1.流動モデル（Flow）
デフォルトの状態のHTMLページの要素はすべてフローモデルに基づいてウェブページの内容を分布しています。最初の点は、ブロック要素は、デフォルトの状態では、ブロック要素の幅が100%であるので、上から下へと順序よく垂直に分布します。実際には、ブロックは行の形で位置を占めます。右のコードエディタの3つのブロックのラベル（div，h 1，p）の幅が100%で表示されます。第二の点では，流れモデルの下で，インライン要素はいずれもそこに含まれる要素の中で左から右に水平分布して表示される。（内部連結要素はブロック要素のように横暴に1行を独占してはいけません。）右側のコードエディタの中の要素ラベルa、span、em、strongはすべてインライン要素です。
2.フロートモデル（Float）
ブロック要素がこのように横暴なのはすべて1行を独占するので、もし今私達は2つのブロックの元素を並べて表示させたいならば、どうすればいいですか？心配しないでください。元素の浮動を設定すれば、この願望が実現できます。いずれの要素もデフォルトでは浮動できませんが、div、p、table、imgなどのCSSで浮動小数点と定義できます。次のコードは2つのdiv要素の1行の表示を実現することができます。

div{ width:200px; height:200px; border:2px red solid; float:left; } <div id="div1"></div> <div id="div2"></div>

3.層モデル（Layer）
レイヤーは正確に位置決めできますが、ウェブページのデザイン領域では、ウェブページのサイズの活動性のために、レイヤーレイアウトは人気がありませんでした。しかし、サイト上の部分使用層のレイアウトには、まだ便利なところがあります。層モデルには三つの形があります。
1.絶対位置決め（position：absolute）
要素をドキュメントストリームから引っ張り出して、left、right、top、bottom属性を使用して、最も近い位置付け属性を持つ親のブロックに対して絶対的に位置決めします。このようなブロックが存在しない場合は、body要素に対して、ブラウザウィンドウに対してである。下のコードのように、div要素がブラウザウィンドウに対して右に100 px移動し、50 px下に移動することができます。

div{  width:200px;  height:200px;  border:2px red solid;  position:absolute;  left:100px;  top:50px; } <div id="div1"></div>

2.相対位置決め（position：relative）
通常のドキュメントフローにおける要素のオフセット位置は、left、right、top、bottom属性により決定される。相対的な位置決めが完了したプロセスは、まずstatic（float）方式で一つの要素を生成し（そして要素が層のように浮動した）、そして以前の位置に対して移動する方向と幅は、left、right、top、bottom属性によって決定され、オフセット前の位置はそのまま保持されます。前の位置に対して下に50 px移動し、右に100 px移動するコードです。

#div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } <div id="div1"></div>

3.固定位置決め（position：fixed）
absolute位置決めタイプと似ていますが、相対的に移動する座標はビュー（画面内のウェブページウィンドウ）自体です。ビュー自体は固定されているので、ブラウザウィンドウのスクロールバーによっては変化しません。ブラウザウィンドウの画面位置を画面内に移動したり、ブラウザウィンドウの表示サイズを変更したりしない限り、固定された位置の要素は常にブラウザウィンドウ内にあります。ドキュメントの流れに影響されません。これはbackground-attachment:fixed;属性機能と同じです。以下のコードは、ブラウザビューに対して100 pxを右に移動し、50 pxを下に移動させることができます。また、スクロールバーをドラッグすると位置が固定されます。

#div1{ width:200px; height:200px; border:2px red solid; position:fixed; left:100px; top:50px; } <p>                                                                    。</p> ....

4.RelativeとAbsoluteを組み合わせて使用する
他の要素に対して位置決めする1.参照する要素は相対的な位置決め要素の先輩要素でなければなりません。

<div id="box1"><!--       --> <div id="box2">          </div><!--      --> </div>

上記のコードから、box 1はbox 2の親要素であることが分かります。2.位置決めを参照する要素はposition:relativeを追加しなければならない。

#box1{ width:200px; height:200px; position:relative; }

  3.       position:absolute，     top、bottom、left、right        。

#box2{ position:absolute; top:20px; left:30px; }

これにより、box 2は親の要素であるbox 1に対して位置づけられます（ここでは参照物はブラウザではなく、自由に設定できます）。
コードの書き込み
1.箱のモデルコードの略記
padding、border、marginは通常次の3つの略語方法があります。

top、right、bottom、leftの値が同じであれば、以下のコード：

margin:10px 10px 10px 10px;

を略して、

margin:10px;

と呼ぶことができます。

topとbottomの値が同じであれば、leftとrightの値が同じである。以下のコード：

margin:10px 20px 10px 20px;

を略して、

margin:10px 20px;

と呼ぶことができる。

leftとrightの値が同じであれば、以下のコード：

margin:10px 20px 30px 20px;

を略してもいいです。

margin:10px 20px 30px;

2.色の略語
色のcssスタイルについても略語できます。設定した色が16進数の色の値の場合、2桁の値が同じなら、半分を略してもいいです。例1:

p{color:#000000;}

略語:

p{color: #000;}

例2：

p{color: #336699;}

略語:

p{color: #369;}

3.フォントの略語
ウェブページのフォントcssスタイルコードには彼自身の略語があります。以下はウェブページにフォントを設定するコードです。

body{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"  ",sans-serif; }

このような複数行のコードは、実は1文として略語されます。

body{ font:italic small-caps bold 12px/1.5em "  ",sans-serif; }

注意:

この簡単な書き方では、少なくともfont-sizeとfont-family属性を指定してください。他の属性（font-weight、font-style、font-varient、line-heightなど）は、指定されていない場合は、自動的にデフォルト値を使用します。

略語の時font-sizeとline-heightの間に「/」を入れて斜めに担ぐ。一般的には中国語サイトに対しては英語はまだ少ないので、以下の略語コードはよく使われています。