简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

HTML CSS スタイルシートのレイアウト

WBOY
リリース： 2016-09-11 11:19:47
オリジナル
1313 人が閲覧しました

1. 位置: 固定

ロック位置 (ブラウザーに対する相対的な位置)。一部の Web サイトの右下隅にあるポップアップ ウィンドウなど。

例:

2 番目、位置: 絶対

1. 外側のレイヤーには position がありません: absolute (または relative) は、下の図に示すように、ブラウザーに対して相対的に配置されます b (デバイスの右の境界線は 50 ピクセル、下の境界線からの距離は 20 ピクセルから閲覧します)。 2.外側のレイヤーには

position

があります: absolute (またはrelative); 下の図に示すように、divは外側の境界線に対して相対的に配置されます。 bb (距離dの右の境界線は50ピクセル、dの下の境界線は20ピクセル)。 例:

3、

ポジション:

相対 相対的な位置。

以下に示すように、は、このdiv

を含む

divの特定の位置に対して固定されています。外層にそれが含まれていない場合、相対位置はブラウザを基準にして固定されます。 例:

4. レイヤー化 (

z-index)

z 軸方向に重ねて、紙の山に分割すると理解でき、層の数が多いほど上位になります。

上記のrelativeの例では、

aa

がaをカバーしていることが分かりますが、これは後から書いたコードの表示レベルが高いため、コードの順序を変えることなく、 aのカバーaaを作りますか？以下の通り: 例:

5、フロート: 左、右

Left、rightの場合、ブラウザを基準とした直接相対位置(left、top)を指定する必要はありません。外側を折り返した場合は、外側のdivの左上または右上の位置が1行を除いて表示されます。

オーバーフロー: hidden; スクロール、スクロールバーを表示します。

//ストリームを切り詰めます;

ハイパーリンクのスタイル設定の例:

添付: カーソル

:

ポインター

マウスがポイントしたときの形状

半透明効果:

透明領域

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

.ボックス

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

関連ラベル：
HTML CSS样式表布局
ソース：php.cn
前の記事：HTML 演算子、型変換 次の記事：URL についての深い理解
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
hr タグが単色白に設定されているのに半透明になるのはなぜですか? HTML（ブートストラップ付き）とCSSがあり、HTMLにはクラスを持つ<hr>タグがあり、CSSにはその境界線スタイルがあります。半透明で白い色は見えますが、「固体」...
から 2024-04-06 16:13:26
0
1
500
表セルのコンテナが親セルの高さ全体を占めるようにしてください。 Flexboxを使用せずにコンテンツを垂直方向に整列させようとしています。このユースケースにはいくつかの問題があるため、垂直方向に整列されたテーブルでそれを行おうとしていますが、問...
から 2024-04-04 16:03:18
0
1
404
CSS ハイパーリンク スタイル クラスを HTML コードから呼び出すことができないのはなぜですか? ハイパーリンク スタイル用に複数のクラスを作成したいと考えています。ナビゲーション メニュー用の特別なクラスだけでなく、デフォルト クラスも必要です。これは私のCSSコードです: ...
から 2024-04-04 11:20:16
0
2
306
CSS スタイルシートが機能しなくなり、HTML ファイルにリンクしなくなりました。原因は何でしょうか? 多くのフォーラムで答えを探し、約 50 の Google リンクを調べましたが、有効なものが見つかりませんでした。CSS が HTML に表示されません。私のコードは、フレックスボ...
から 2024-04-03 09:49:45
0
1
402
HTML <pre><code> タグをラップせずにオーバーフローしようとすると、フレックススペースが壊れる GitHub などで見られるようなスタイル付きのコード ブロックを作成するために、CSS をプリコード セレクターに適用します。レイアウトに Flexbox を使用しており、「bo...
から 2024-04-01 12:22:06
0
1
296
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！