ホームページ ウェブフロントエンド htmlチュートリアル 3つのHTML CSSレイアウト(自然レイアウト/流動レイアウト/位置決めレイアウト)_HTML/Xhtml_Webページ制作

3つのHTML CSSレイアウト(自然レイアウト/流動レイアウト/位置決めレイアウト)_HTML/Xhtml_Webページ制作

May 16, 2016 pm 04:40 PM
CSSレイアウト CSSチュートリアル

1. 自然なレイアウト
何も変更しないレイアウトが自動的に残ります。
2. 流体レイアウト
上記の float:left の状況。
3. レイアウトの配置
相対配置と絶対配置はどちらも親 div タグに対して相対的です。
相対 -- この要素の元の位置を参照点として取得します
絶対 -- 親 div タグの原点 (左上隅) を参照点として取得します。

外層は位置:相対であるため、内層が絶対であれば外層の左上隅が変位基準として位置合わせされます。もちろん、外層にはposition:relativeだけが書かれ​​ており、leftとtopの2つの値が書かれています。つまり、この要素の元の位置が左揃えと上揃えのレイアウト基準原点として使われることになります。 。

もう 1 つの状況は、外側の層にposition:absolute があるだけで、position:relative がないということです。この場合、どの点が参照として見つかるでしょうか。このときの原則は、親要素にrelativeがある場合は親要素を基準原点とし、position:relativeがない場合はbodyを基準原点とします。 Position:absolute の外側の層にrelativeがない場合、2つのレイアウト間に違いはありません。

もちろん、最後の状況は次のとおりです: 外側の層はposition:absolute; 内側の層はposition:relative、どうなるでしょうか?本来の原理では、絶対は本体を、相対は元の位置をレイアウト原点としますが、このとき実際には外層の左上隅をレイアウト原点とします。 。
その他は実際の状況によって異なります。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

フロントエンドの面接官からよく聞かれる質問 フロントエンドの面接官からよく聞かれる質問 Mar 19, 2024 pm 02:24 PM

フロントエンドの面接官からよく聞かれる質問

純粋な CSS を使用してウォーターフォール フロー レイアウトを実装する方法とテクニック 純粋な CSS を使用してウォーターフォール フロー レイアウトを実装する方法とテクニック Oct 20, 2023 pm 06:01 PM

純粋な CSS を使用してウォーターフォール フロー レイアウトを実装する方法とテクニック

CSS レイアウトのヒント: 円形グリッド アイコン レイアウトを実装するためのベスト プラクティス CSS レイアウトのヒント: 円形グリッド アイコン レイアウトを実装するためのベスト プラクティス Oct 20, 2023 am 10:46 AM

CSS レイアウトのヒント: 円形グリッド アイコン レイアウトを実装するためのベスト プラクティス

CSS レイアウト単位の進化と応用: ピクセルからルート要素のフォント サイズに基づく相対単位へ CSS レイアウト単位の進化と応用: ピクセルからルート要素のフォント サイズに基づく相対単位へ Jan 05, 2024 pm 05:41 PM

CSS レイアウト単位の進化と応用: ピクセルからルート要素のフォント サイズに基づく相対単位へ

CSS レイアウト チュートリアル: 聖杯レイアウトを実装する最良の方法 CSS レイアウト チュートリアル: 聖杯レイアウトを実装する最良の方法 Oct 19, 2023 am 10:19 AM

CSS レイアウト チュートリアル: 聖杯レイアウトを実装する最良の方法

レスポンシブな画像レイアウトを実装する CSS Positions レイアウト メソッド レスポンシブな画像レイアウトを実装する CSS Positions レイアウト メソッド Sep 26, 2023 pm 01:37 PM

レスポンシブな画像レイアウトを実装する CSS Positions レイアウト メソッド

フロントエンド SEO — 詳細な説明 フロントエンド SEO — 詳細な説明 Mar 12, 2024 pm 06:13 PM

フロントエンド SEO — 詳細な説明

CSS レイアウト チュートリアル: 2 列のレスポンシブ レイアウトを実装する最良の方法 CSS レイアウト チュートリアル: 2 列のレスポンシブ レイアウトを実装する最良の方法 Oct 18, 2023 am 11:04 AM

CSS レイアウト チュートリアル: 2 列のレスポンシブ レイアウトを実装する最良の方法

See all articles