HTML の基本 - CSS スタイルシート、スタイル属性、フォーマット、レイアウトの詳細

1.位置:固定

一部の Web サイトの右下隅にあるポップアップ ウィンドウなどの、ブラウザーを基準としたロックされた位置。

例：

2.位置：絶対

絶対位置:

1. 外側のレイヤーに position: absolute (または relative) が指定されていない場合、div はブラウザーを基準として配置されます (次の図の b を参照) (ブラウザーの右境界から 50 ピクセル、下境界から 20 ピクセル)。

2. 外側のレイヤーに position: absolute (または relative) が指定されている場合、div は外側の境界線を基準として配置されます (下の図の bb など) (d の右境界線から 50 ピクセル、d の下境界線から 20 ピクセル)。

例：

3.位置:相対的

相対位置:

下の図に示すように、この div を含む div の特定の位置を基準に固定されます。外側のレイヤーに含まれていない場合、相対位置はブラウザに対して固定されます。

例：

4. レイヤー化（ z-index ）

Z軸方向の階層化は、紙のスタックに分割することと理解でき、層の数が多いほど、上部に近くなります。

上記の相対的な例では、aa が a をカバーしていることがわかります。これは、後から記述したコードの表示レベルが前に近いためです。では、コードの順序を変えずに、aa をカバーさせるにはどうすればよいのでしょうか。次のように：

例：

5.フロート:左、右

Leftまたはrightを使用する場合、位置 (左または上) を指定する必要はなく、ブラウザに直接相対的になります。外側の部分が折り返されている場合、1 行を除いて外側のdivに対して左上または右上の位置に表示されます。

追加: 1. overflow: hidden; //余分な部分を非表示にします。スクロールすると、スクロールバーが表示されます。

<div ></div> //フローを切り捨てる

2. カーソル: マウスが指しているときのポインターの形状。

3. 半透明効果：

<div class="box">透明領域<div>

スタイルシート内のコードは次のとおりです。

。箱

{

不透明度:0.5; -moz-不透明度:0.5; フィルター:アルファ(不透明度=50)

}

練習例をまとめると、drubaウェブサイトのフォーマットレイアウトの一部を作成します。

HTMLコード:

Webページ操作表示効果図:

上記の HTML の基礎知識に関する記事 - CSS スタイルシート、スタイル属性、フォーマット、レイアウトの詳細な説明は、エディターが皆さんと共有するすべてのコンテンツです。この記事が皆さんの参考になれば幸いです。また、123WORDPRESS.COM をサポートしていただければ幸いです。

オリジナルURL: http://www.cnblogs.com/H2921306656/archive/2016/07/10/5658870.html