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コード: XML/HTML コードコンテンツをクリップボードにコピー
Webページ操作表示効果図: 上記の HTML の基礎知識に関する記事 - CSS スタイルシート、スタイル属性、フォーマット、レイアウトの詳細な説明は、エディターが皆さんと共有するすべてのコンテンツです。この記事が皆さんの参考になれば幸いです。また、123WORDPRESS.COM をサポートしていただければ幸いです。 オリジナルURL: http://www.cnblogs.com/H2921306656/archive/2016/07/10/5658870.html |
<<: 実践で遭遇するフロントエンドの基本(HTML、CSS)
>>: ページに img src が含まれている場合の二重読み込みの問題
nginx で proxy_pass を設定するときに、^~ に従ってパスを一致させる場合は、pro...
MySQL_8.0.2のオフラインインストール方法は参考までに。具体的な内容は以下のとおりです。次の...
前面に書かれた今日のインターネット分野では、Nginx は最も広く使用されているプロキシ サーバーの...
WeakMap オブジェクトは、キーが弱参照であるキー/値のペアのコレクションです。キーはオブジェク...
目次1. 値を入力し、そのデータ型を返す** 2. アレイ重複排除3. 文字列の重複排除4. ディー...
1. 新機能MySQL 5.7 はエキサイティングなマイルストーンです。デフォルトの InnoDB ...
コードを見てみましょう:コードをコピーコードは次のとおりです。 < !DOCTYPE html...
1. 削除delete は、オブジェクトのプロパティを残さずに削除する唯一の方法ですが、その「代替」...
導入あなたも面接でこれに遭遇したことがあるはずです。トランザクションの分離レベルについてお話ししまし...
<br />みなさんこんにちは!ここで皆さんとチャットできて光栄です! (*^__^*)...
yum か rpm か? yum によるインストール方法は非常に便利ですが、公式サイトから MySQ...
システム環境: Windows 7 1. DockerをインストールするDocker公式サイトからd...
1. 絶対配置レイヤーの隣接フローティング レイヤーの幅が親レイヤーの幅と等しくなく、フロートがクリ...
まず、私の基本的な開発環境を見てみましょう。オペレーティングシステム: MacOS 10.13.5 ...
この記事の例では、Reactカプセル化グローバルポップアップボックスの具体的なコードを参考までに共有...