CSS+DIV 2 日目_html/css_WEB-ITnose

2 日目から、CSS リファレンスといくつかの一般的な CSS 属性を含む CSS の基本的な使い方を学びました。 CSS の基本的な使い方をマスターすることは、CSS+div レイアウトの最初のステップにすぎません。レイアウトに関しては、最も重要なのは配置です。組版に表を使用する場合、Web ページ上にグリッドを直接描画し、対応するグリッドにコンテンツを入力します。 CSS を使用する場合も同じ原則が当てはまりますが、CSS には独自の配置メソッドのセットがありません。今日の目標はCSSの配置をマスターすることです。

まず、相対位置決めと絶対位置決めという 2 つの定義を紹介します。相対配置では、ドキュメントの元の位置からのオフセットが可能になります。絶対位置決めにより任意の位置決めが可能です。以下に、位置決めに使用する必要があるいくつかの属性を示します。

位置決めは一般に重要ではないため、各パラメーターの役割を詳しく説明します。

position: static |relative
static : 特別な配置はありません。オブジェクトは HTML の配置ルールに従います。
absolute: オブジェクトをドキュメント フローの外にドラッグし、絶対配置に left、right、top、bottom およびその他の属性を使用します。そして、そのカスケードは z-index 属性によって定義されます。現時点では、オブジェクトにはマージンがありませんが、パディングと境界線はまだあります
//通常、絶対配置を使用する場合はこの属性を使用します。
relative: オブジェクトは積み重ねることはできませんが、左、右、上、下およびその他の属性に基づいて通常のドキュメント フロー内でオフセットされます

left: auto|lenth
auto: 特別な位置決めはありません。ドキュメント フローは次のようにロードされますHTML の位置決めルールに割り当てられます。
length : 浮動小数点数と単位識別子 | から構成される長さの値。この値を有効にするには、位置属性値を絶対または相対として定義する必要があります。
例: div {position:Absolute; left: 1in; }
この値を有効にするには、top と left の使用法が同じであることにも注意してください。

width: auto|lenth
auto: 特別な配置なし、HTML 配置ルールに従ってドキュメント フローに割り当てられます
length: 浮動小数点数と単位識別子 | で構成される長さの値。
高さの構文は幅とまったく同じです。また、定義する必要はありません。位置は絶対値でなければなりません

clip : auto | rect (numbernumbernumbernumber)
auto :クリッピングなしのオブジェクト
rect(numbernumbernumbernumber) :右上-下の順に提供されます-left オブジェクトの左上隅から (0,0) 座標として計算された 4 つのオフセット値。いずれも auto に置き換えることができます。つまり、このエッジはクリップされません。 hidden |scroll

visible : no コンテンツは切り取られ、スクロール バーは追加されません。このデフォルト値が明示的に宣言されている場合、オブジェクトは、オブジェクトを含むウィンドウまたはフレームのサイズにクリップされます。また、clip 属性の設定は無効になります
//この属性の結果は、div がない場合に、どのくらいのコンテンツが表示されるかのようになります。

auto: これは本文オブジェクトとテキストエリアのデフォルト値です。必要に応じてコンテンツを切り取り、スクロールバーを追加します
hidden: オブジェクトのサイズを超えるコンテンツを表示しません
scroll: 常にスクロールバーを表示します


z-index: auto | number

auto: 親オブジェクトの位置に従います
number:単位のない整数値。負の数も可能です

// いくつかの 3 次元効果を生成するために使用する必要があります


visibility: 前の親オブジェクトの可視性を継承します

visible: オブジェクトが表示されます。 hidden
collapse : 主にテーブルの行または列を非表示にするために使用されます。非表示の行または列は、他のコンテンツで使用できます。テーブル外の他のオブジェクトの場合、その機能は非表示と同等です。 IE5.5 はまだこのプロパティをサポートしていません。

上記の属性の位置、幅、高さ、左、上、および z-index は div を配置するために使用され、クリップ、オーバーフロー、および可視性はコンテンツの表示を制御するために使用されます。レイヤーの基本属性と見なすことができます。レイヤーの基本的なプロパティをマスターしたら、レイヤーを使用して表示を配置および制御する例を見てみましょう:
& & Lt; HTML & gt;
& lt; タイトル & lt; スタイル タイプ = "text/css" & lt; !- # #Container1 {position: 絶対位置; TOP :100}

//*位置: 絶対位置としてコンテナ1を定義します*//
#container2{位置: 絶対位置: 100; }
//*container2を絶対配置として定義し、初期表示はhidden（非表示）*//
p{font-size: 12pt;} //*pのフォントを定義*//
-->

画像を選択してください: /p>//*フォント サイズ、名前、色を設定します*/ /

//*container1 の画像、識別子をインポートします*//

名前: 砂漠 p>//*フォント名、色、サイズを設定*//

280">
//*別のものをインポート識別子がcontainer2*//の画像

名前：sea

;

"button" value="Desert"
onclick="container1.style.visibility='visible';
container2.style.visibility='hidden'"> //*マウスクリックイベントを定義1 は表示され、画像 2 は表示されません*//
onclick="container2.style.visibility='visible'; ;
container1.style .visibility='hidden'">
//*画像 1 を非表示にし、画像 2 を表示するようにマウス クリック イベントを定義します*//

body>

ボタンは、CSS で可視性の値を制御するためにいくつかの JS スキルを使用します。
上の例はフラット レイアウトについてのみ説明しています。Tutuo のこれまでの CSS の知識はここで終わりですが、パラメータはステレオの位置決めに使用されるため、div は 3 次元にすることもできます。

1”>
//*画像をインポートし、z-index属性を1として定義します
*//

style="color:#ffff33;z-index:2" > このテキストは画像にオーバーレイされます。
//*テキストの色と z-index 属性を中央の位置で 2 に定義します*//
style="max-width:90%">
//*2 番目の画像をインポートし、「pile1」クラスにし、z-index 属性を 3 にし、位置を一番上にします
square* //