CSSボックスモードをしっかり理解することを推奨（DIVレイアウトでクイックスタート）

前言

CSS盒子模式

转变思想

熟悉步骤

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSボックスモードをしっかり理解することを推奨（DIVレイアウトでクイックスタート）_体験交流

PHP中文网

May 16, 2016 pm 12:08 PM

まえがき
Web ページのレイアウトにテーブルを使用するのではなく、CSS を使用して Web ページのレイアウトを作成したい場合 (Web ページ構造のレイアウトに p を使用するという話はよく聞きます)、またはWeb ページを学ぶ標準的なデザイン、または企業の競争力を向上させるために上司が従来のテーブルレイアウト方法を変更することを望んでいる場合、知っておくべき知識ポイントの 1 つは CSS ボックスモードです。これは p レイアウトの核心であり、伝統的なテーブルタイプセットです。は、さまざまなサイズのテーブルとテーブルネストを使用して Web ページのコンテンツを配置し、タイプセットすることです。CSS タイプセットに切り替えると、CSS で定義されたさまざまなサイズのボックスとボックスネストを使用して Web ページが配置されます。この方法で入力された Web ページのコードはシンプルで更新が簡単で、PDA デバイスなどのより多くのブラウザと互換性があり、通常に閲覧することもできるため、大好きだった表組版をあきらめる価値があります。さらに重要なのは、Web ページの CSS 組版のメリットはこれだけではありませんが、ここでは詳しく説明しません。関連する情報は自分で見つけることができます。
CSS ボックスモデルについて理解する
CSS ボックスモデルとは何ですか?なぜボックスと呼ばれるのですか？まず、Web デザインでよく聞く属性名について説明します: content、padding、border、margin ですが、CSS ボックスモードにはすべてこれらの属性があります。

これらの属性を日常生活の箱（ボックス）に置き換えることで理解することができ、私たちが日常生活で目にする箱にもこれらの属性があるため、ボックスパターンと呼ばれています。そして、内容物は箱の中にあるもの、詰め物は中身（貴重品）が傷つかないようにする発泡体などの耐震補助材、枠線は箱そのもの、枠線については、通気性と取り出しやすさを考慮し、一定の隙間をあけて積み重ねてください。 Web デザインでは、コンテンツはテキスト、画像、その他の要素を指すことがよくありますが、小さなボックス (P ネスト) であることもあります。現実のボックスとは異なり、現実のものは一般にボックスより大きくすることはできません。それ以外の場合はボックスです。 CSS ボックスは伸縮性があり、ボックス自体よりも大きいため、せいぜい伸びますが、破損することはありません。塗りつぶしには幅属性のみがあり、これは生活の箱の耐震補助材の厚さとして理解できますが、境界線にはサイズと色があり、これは生活の中で見る箱の厚さとして理解できます箱が何色の素材でできているか、境界線は箱と他の物との距離です。現実の空間に、大きさや色の異なる箱を一定の間隔で一定の順序で配置し、最後に広場から見下ろすと、やりたいことと同じようなグラフィックや構造が現れるとします。 . Webページのレイアウトは以下のように設計されています。

「ボックス」で積み上げられた Web ページのレイアウト

CSS ボックスパターンについてどの程度理解できましたか?十分に理解できていない場合は、読み続けてください。後ほど例を挙げ、ボックスの概念を使用して説明します。
考え方を変える
従来のフロントエンド Web デザインは次のように実行されます。要件に応じて、まずメインカラー、使用する画像の種類、内容を検討します。使用するフォントや色を待って、Photoshopなどのソフトで自由に描いて、最後に小さな絵に切り出すという、HTMLを自由にデザインしてページを生成するのではなく、レイアウトをCSSに切り替えてからは、この考え方を変えなければなりません。この時点で私たちが主に考慮するのは、ページコンテンツのセマンティクスと構造ですが、Web ページは強力な CSS 制御を備えているため、Web ページが完成した後でも、必要な Web ページのスタイルを簡単に調整できます。レイアウトはコードを読みやすくし、ブロックを明確にすることであり、コードの再利用を強化するため、構造は非常に重要です。私の Web ページのデザインが非常に複雑であると言いたい場合、後でその効果を実現することは可能ですか?私が言いたいのは、CSS の制御能力が強すぎるため、CSS で実現できない効果をテーブルで実現するのは一般的に難しいということです。ウェブサイトの構築を受注している場合、CSSを使用してウェブページをレイアウトすると、後で顧客が不満を感じた場合、特に色調を変更するのは非常に簡単で、カスタマイズすることもできます。 CSS ファイルにはいくつかのスタイルがあり、顧客が選択するか、動的呼び出しを実装するプログラムを作成して、Web サイトにスタイルを動的に変更する機能を持たせることができます。
構造と表示の分離を実現する
実際にレイアウトの練習を始める前に、もう 1 つ、構造と表示の分離について理解しましょう。これも CSS レイアウトの特性を利用しています。構造と表示の分離後、コードがシンプルで更新しやすい、これが CSS を学ぶ目的ではないでしょうか。例えば、Pは構造化タグです。Pタグがあるところは段落ブロックであることを意味します。マージンはパフォーマンス属性です。段落を2文字ずつ右インデントしたいのです。スペースを追加せずにスペースを追加することもできますが、P タグの CSS スタイル: P {text-indent: 2em;} を指定できるようになり、追加のパフォーマンスを追加することなく、結果の本文の内容は次のようになります。コントロールタグ:
それでも変更したい場合は、この段落をフォント、フォントサイズ、背景、行間などで変更する必要があります。対応する CSS を P スタイルに直接追加するだけです。次のように記述する必要はありません。これ:

段落の内容

これは書かれています構造と表現が混在している多くの段落で構造と表現が統一されている場合、このようにコードを記述するのは面倒です。
構造とパフォーマンスの分離についての理解を深めるために、コードの一部を直接リストしてみましょう:
植字には CSS を使用します

CSSボックスモードをしっかり理解することを推奨（DIVレイアウトでクイックスタート）_体験交流

不用CSS排版

CSSボックスモードをしっかり理解することを推奨（DIVレイアウトでクイックスタート）_体験交流

最初の方法は構造表现相分离、内容部分代码简单吧、如果更多图片列表的话、那么第一种CSS布局方法就更有优势，我打比喻你好理解：我在BODY向你介一个人，我只对你说他是一个人，至上是一个什么样的人，有多高、男は女、CSS を去ってください。完了しました、これには点画像 Flash パッケージの要素と例の概念があり、異なる例が同じ要素を共有しています。このようなアニメーションムービードキュメントは不重要であり、この方法を CSS ネットワーク設計に移すことはできません。

CSS 版小型ネットワークファイル本体

画像の上の私が行っている那のバージョン、1 つの共有は 4 つのエリアブロック、各エリアブロックのフレームは同じものです、このフレームは CSS で書き込まれており、一度だけ書き込まれます。何度も使用済み (ID ではなくクラス使用) を使用するだけで、その中の文字内容を変更するだけで、格付け一の多板ブロックを生成できます。ウェブ页中它们应在的位置）：

前言

CSS盒子模式

正文内容 pppcngtphpcn

转变思想

正文内容

php cnltphpcnp class="mainBox">

熟悉步骤

正文内容

作業プロセスに精通している
実際に作業を開始する前に、次の考えを頭の中で形成する必要があります。テーブルが何であるかはわかりません。パフォーマンスを制御させることはできません。コンテンツ部分に表示されるラベル、フォント、色、高さ、幅、整列などのタグが表示されなくなります（簡単に言うと、作業前に洗脳し、これまでの習慣を忘れて、新しい方法を受け入れて使用します）。私は組版を実装するために p を使用するだけではありません。ネスティング、p はブロックレベルの要素であり、P もブロックレベルの要素です。たとえば、テキストコンテンツの複数のブロックを分離したい場合、次のような必要はありません。 p を使用して p レイアウトと呼びます。「

テキストブロック 2

テキストブロック 3

」ではありません。

テキストブロック 2

テキストブロック 3 」の方が適切です。
p CSS を使用する設計上のアイデアは次のとおりです: 1. p を使用してセマンティック構造を定義します; 2. 次に、CSS を使用して、背景、境界線、配置属性などの追加など、Web ページを美しくします。 .; 3. 最後に、この CSS で定義しますテキスト、画像などのコンテンツをボックスに追加します (属性を示すラベルはありません) このステップの理解を深めるために、例を見てみましょう。まずは結果の画像をご覧ください:

デモのアドレス: http://www.php.cn/

CSS レイアウト結果図

p を使用してセマンティック構造を定義します
ここで、典型的なレイアウト列を示したいと思います。構造。つまり、ページヘッダー、ナビゲーションバー、コンテンツ、および著作権 (以下を参照)、

一般的なレイアウト列の構造

構造コードは次のとおりです。

コードをコピーコードは次のとおりです。

body>

一番外側の大きなボックス (小さなボックスを含む大きなボックス) については、ページの中央に配置し、その幅を 760 ピクセルに再定義し、境界線を追加する必要があります。スタイルは次のとおりです:

コードをコピーコードは次のとおりです。 p>

body {
font-family: Arial、Helvetica、sans-serif;
font-size: 12px;
margin: 0px auto ;
高さ: 自動;
幅: 760 ピクセル;
境界線: 1 ピクセルの実線 #006633;
}

簡単のため、ここではブロック全体に背景画像を適用し、ページヘッダーの画像がナビゲーションバーと干渉しないように、その下端に一定の隙間を設計するだけで済みます。つなげる、これも美しさのためです。そのスタイルコードは次のとおりです:

#header {
高さ: 100px;
幅: 760px;
background-image: url( headPic.gif);
background-repeat: no-repeat;
margin:0px 0px 3px 0px;
}

ナビゲーションバーの外観を作りました小さなボタンのようなものです。マウスを上に動かすと、ボタンの背景色とフォントの色が変わります。すると、これらの小さなボタンを小さなボックスとして理解できます。この場合、これはボックスの入れ子問題です。スタイルコードは次のとおりです:

#nav {
高さ: 25px;
幅: 760px;
font-size: 14px;
list- style-type : none;
}
#nav li { >text-decoration:none;
padding-top:4px;
display:block;
width: 97px;
高さ:22px;
text-align:center ;
background-color: #009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633; color:#FFFFFF;
}

コンテンツ部分には主に記事が含まれますタイトルと段落を含むコンテンツです。タイトルは太字です。標準化のために、H タグと段落を使用します。最初の行を 2 単語ずつ自動的にインデントするには、同時にすべてのコンテンツがテキストから一定の距離にあるように見える必要があります。外側の大きなボックスの境界線、ここでパディングを使用します。コンテンツブロックのスタイルコードは次のとおりです:

#content {
height:auto;
width: 740px;
line-height: 1.5em;
パディング: 10px;
}
#content p {
text-indent: 2em;
}
#content h3 {
font-size: 16px;
margin: 10px;

著作権列には、ページのヘッダーと一致するように背景を追加します。内部のテキストは自動的に表示されます。内容、行間隔は適切である必要があり、ここでのリンクスタイルも個別に指定できますが、ここでは行いません。スタイルコードは次のとおりです:

#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}

最後に、 return次のようなスタイルコードが表示されます:

* {
margin: 0px;
padding: 0px; }

これは、ワイルドカードを使用して各タグの境界とパディングを初期化するためです (Form タグなど、一部のタグにはデフォルトで特定の境界があるため)。その場合、そのような制御を各タグに追加する必要はありません。コードをある程度まで簡素化します。最終的に完成したスタイルコードは次のとおりです。

構造コードは次のとおりです。