フロントエンドの基本??CSS+DIV レイアウト_html/css_WEB-ITnose
ランダムに Web ページを開いて F12 を押すと、多数の高密度の「DIV」が表示されます。そのとおり、現在、ほとんどの Web ページでは CSS+DIV レイアウト方法が使用されています。
前回の記事ではボックス モデルについて説明しましたが、ここではボックス モデルを基礎として、一般的に使用される Web ページのレイアウト方法である CSS+DIV レイアウトを簡単に理解します。
CSS+DIV レイアウトは、
これは、最初に Web ページ全体のフレームワークを構築し、次にパーツを個別に調整するようなものです。ここで、
1. 材料を選択するときは、使用する鋼棒を理解する必要があります 理解することは DIV を理解することです
：「ボックスモデルって何ですか？DIVですか？」私の意見では、Web ページには p、h1、form、div、span、table、tr、td などの多くの要素が表示されます。それらにはすべてマージン、ボーダーがあります。 、パディング属性。
ただ、Web ページ全体のレイアウトを構築するときは、一般に、上記の例の「補強バー」として DIV を使用します。
ボックスモデルは DIV+CSS の基礎であり鍵です。簡単に言うと、ボックス モデルの中心となるのは、これらの「ボックス」のマージン、ボーダー、パディング属性です。これは、合理的で美しい Web ページをレイアウトしたい場合の基本的なスキルです。
2. 材料を切断して溶接します
| | |
| ここでの焦点は溶接です。溶接するときは、異なるサイズの DIV ブロックを選択し、それらを適切に配置する必要があります。これは、DIV の位置、浮動小数点、Z インデックス属性の設定を含む、DIV 位置決めと呼ばれます。 。 T i POSITION 属性: 4 つの属性値は、Static、Absolute、Relacted、Fixed です。次の表は、W3C でのこれらの属性値の説明です。 | |
| static | デフォルト値。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)。 |
| inherit Position 属性の値を親要素から継承することを指定します。 | |
| absolute | |
配置。 4 つの属性値があります: left、right、none、
説明
none
| inherit | float 属性の値を親要素から継承することを指定します。 |
| left | 要素は左にフロートします。 |
| 要素は右にフローティングします。 | |
| 不明な学生は、いくつかの小さな例を作成して自分で練習することも、W3School にアクセスして練習することもできます。豊富な Web チュートリアルといくつかの小さな例を練習できます。オンライン。在 Float は難しいので、読者が上手にマスターできることを願って、ここに焦点を当てます。 | z-index の値は任意の整数値にすることができます。要素の「表示優先度」を表す正の数または負の数です。値が大きいほど表示優先度が高くなります。 2 つの簡単な図で十分に説明できます。最初の図の 3 つの div の Z-Index 値は、次のとおりです。 A & LT; B & LT;インデックス値は、A>B>C です。|
| これらは CSS+DIV レイアウトの最も基本的な知識にすぎません。実際に使いこなしたい場合は、レイアウトのヒントをいくつか練習して経験する必要があります。たとえば、マージンに負の値を使用することは非常に実用的なトリックです (コンテナの幅が 700 ピクセルであると仮定して) コンテナを中央に固定幅で表示したい場合は、コンテナの相対配置方法を使用できます。 、左の値をページの 50% に設定し、Margin-Left を自身の幅の半分に設定すると、ブラウザの解像度に関係なく、効果は固定幅で中央に配置されます。以下のように: |
もっと積み重ねて、あなたと一緒に成長していきたいと思っています。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7563
15
1384
52
84
11
28
99
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
