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、どうなるでしょうか?本来の原理では、絶対は本体を、相対は元の位置をレイアウト原点としますが、このとき実際には外層の左上隅をレイアウト原点とします。 。
その他は実際の状況によって異なります。
何も変更しないレイアウトが自動的に残ります。
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 までご連絡ください。

人気の記事
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌

人気の記事
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック
Gmailメールのログイン入り口はどこですか?
7287
9


Java チュートリアル
1622
14


CakePHP チュートリアル
1342
46


Laravel チュートリアル
1259
25


PHP チュートリアル
1206
29



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

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

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

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

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