ホームページ ウェブフロントエンド 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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++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

フロントエンド開発のインタビューでは、HTML/CSS の基本、JavaScript の基本、フレームワークとライブラリ、プロジェクトの経験、アルゴリズムとデータ構造、パフォーマンスの最適化、クロスドメイン リクエスト、フロントエンド エンジニアリング、デザインパターン、新しいテクノロジーとトレンド。面接官の質問は、候補者の技術スキル、プロジェクトの経験、業界のトレンドの理解を評価するように設計されています。したがって、候補者はこれらの分野で自分の能力と専門知識を証明するために十分な準備をしておく必要があります。

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

px から rem へ: CSS レイアウト ユニットの進化と応用 はじめに: フロントエンド開発では、多くの場合 CSS を使用してページ レイアウトを実装する必要があります。過去数年にわたって、CSS レイアウト ユニットは進化し、発展してきました。最初は要素のサイズと位置を設定する単位としてピクセル (px) を使用しました。しかし、レスポンシブ デザインの台頭とモバイル デバイスの普及により、ピクセル ユニットにはいくつかの問題が徐々に明らかになってきました。これらの問題を解決するために、新しい単位 rem が登場し、CSS レイアウトで徐々に広く使用されるようになりました。 1つ

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

純粋な CSS を使用してウォーターフォール フロー レイアウトを実装する方法とテクニック。ウォーターフォール レイアウト (ウォーターフォール レイアウト) は、Web デザインで一般的なレイアウト方法です。コンテンツを高さの異なる複数の列に配置して画像を形成します。ウォーターフォールのような視覚効果です。このレイアウトは、写真表示や商品表示など、大量のコンテンツを表示する必要がある場面でよく使用され、ユーザーエクスペリエンスが優れています。ウォーターフォール レイアウトを実装するにはさまざまな方法があり、JavaScript または CSS を使用して実行できます。

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

CSS レイアウトのヒント: 円形グリッド アイコン レイアウトを実装するためのベスト プラクティス グリッド レイアウトは、最新の Web デザインにおける一般的で強力なレイアウト手法です。円形のグリッド アイコン レイアウトは、よりユニークで興味深いデザインの選択です。この記事では、円形グリッド アイコン レイアウトの実装に役立ついくつかのベスト プラクティスと具体的なコード例を紹介します。 HTML 構造 まず、コンテナ要素を設定し、このコンテナにアイコンを配置する必要があります。順序なしリスト (<ul>) をコンテナとして使用でき、リスト項目 (<l

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

レスポンシブな画像レイアウトを実装するための CSSPositions レイアウト メソッド 現代の Web 開発では、レスポンシブ デザインは必須のスキルとなっています。レスポンシブ デザインでは、画像のレイアウトは重要な考慮事項の 1 つです。この記事では、CSSPositions レイアウトを使用してレスポンシブ画像レイアウトを実装する方法を紹介し、具体的なコード例を示します。 CSSPositions は、必要に応じて要素を Web ページ内に任意に配置できるようにする CSS のレイアウト方法です。レスポンシブ画像レイアウトでは、

CSS レイアウトのヒント: 積み重ねられたカード効果を実装するためのベスト プラクティス CSS レイアウトのヒント: 積み重ねられたカード効果を実装するためのベスト プラクティス Oct 22, 2023 am 08:19 AM

CSS レイアウトのヒント: 積み重ねられたカード効果を実現するためのベスト プラクティス 最新の Web デザインでは、カード レイアウトは非常に人気のあるデザイン トレンドになっています。カード レイアウトは情報を効果的に表示し、優れたユーザー エクスペリエンスを提供し、レスポンシブ デザインを促進します。この記事では、積み重ねられたカード効果を実現するための最良の CSS レイアウト テクニックのいくつかを、具体的なコード例とともに共有します。 Flexbox を使用したレイアウト Flexbox は、CSS3 で導入された強力なレイアウト モデルです。カードを重ねる効果を簡単に実現できます

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

CSS レイアウト チュートリアル: 聖杯レイアウトを実装する最良の方法、コード例付き はじめに: Web 開発において、レイアウトは非常に重要な部分です。優れたレイアウトにより、Web ページがより読みやすくアクセスしやすくなります。その中でもHoly Grailレイアウトは非常に古典的なレイアウト方法であり、コンテンツを中央に配置し、エレガントな表示効果を維持しながら適応性を実現します。この記事では、聖杯レイアウトを実装する最適な方法と具体的なコード例を紹介します。 1. 聖杯レイアウトとは何ですか? Holy Grail レイアウトは、一般的な 3 列レイアウトです。

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

CSS レイアウト チュートリアル: 2 列レスポンシブ レイアウトを実装する最良の方法 はじめに: Web デザインにおいて、レスポンシブ レイアウトは、ユーザーのデバイスの画面サイズと解像度に応じて Web ページが自動的にレイアウトを調整できるようにする非常に重要なテクノロジであり、より優れたパフォーマンスを提供します。ユーザー体験。このチュートリアルでは、CSS を使用して単純な 2 列のレスポンシブ レイアウトを実装する方法を示し、具体的なコード例を示します。 1. HTML 構造: まず、以下に示すような基本的な HTML 構造を作成する必要があります: <!DOCTYPEht

See all articles