CSSボックスモード(DIVレイアウト)を徹底理解_html/css

前書き

Web ページのレイアウトにテーブルを使用するのではなく、Web ページの構造をレイアウトするために DIV を使用するという話がよく聞かれる CSS を使用して Web ページをレイアウトしたい場合、または Web 標準を学びたい場合あるいは、企業の競争力を向上させるために、上司が従来のテーブルレイアウト方法を変更するよう要求した場合、CSS ボックスモードを理解する必要があります。これは、従来のテーブルレイアウトの核心です。サイズに基づいて、Web ページのコンテンツの配置とレイアウトにさまざまなテーブルとテーブルのネストが使用されます。CSS レイアウトに切り替えた後、Web ページは、CSS で定義されたさまざまなサイズのボックスとボックスのネストによって配置されます。この方法で入力された Web ページのコードはシンプルで更新が簡単で、PDA デバイスなどのより多くのブラウザと互換性があり、通常に閲覧することもできるため、大好きだった表組版をあきらめる価値があります。さらに重要なのは、Web ページの CSS 組版の利点はここでは詳しく説明しません。関連する情報は自分で見つけることができます。

CSS ボックスパターンを理解する

CSS ボックスパターンとは何ですか?なぜボックスと呼ばれるのですか？まず、Web デザインでよく聞く属性名について説明します。content、padding、border、margin はすべてこれらの属性を持ちます。

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

CSS ボックスパターンをどの程度理解できましたか? 十分に理解できていない場合は、後で例を挙げてボックスの概念を使用して説明します。

考え方を変えましょう

従来のフロントエンド Web デザインは次のように実行されます。要件に従って、まずメインカラー、使用する画像の種類、フォント、色などを検討してから、ソフトウェアを使用します。 Photoshop などで自由に描画し、最終的には小さな絵に切り出すことができ、HTML をデザインしてページを生成する自由がなくなりました。この時点で、この考え方を変更する必要があります。強力な CSS によって Web ページが完成した後、Web ページのスタイルを簡単に調整できるため、考慮すべき点はページコンテンツのセマンティクスと構造です。さらに、CSS レイアウトのもう 1 つの目的はコードを作成することです。読みやすく、ブロックをクリアし、コードの再利用を強化するため、構造は非常に重要です。私の Web ページのデザインが非常に複雑であると言いたい場合、後でその効果を実現することは可能ですか?私が言いたいのは、CSS で効果を実現できない場合は、CSS の制御能力は非常に強力なので、それを実現するためにテーブルを使用することを考える必要さえないということです。組版に CSS を使用することの非常に実際的な利点は、Web サイトの構築を受注している場合、Web ページのレイアウトに CSS を使用している場合、後で顧客が不満を感じた場合、特に色調を変更するのが非常に簡単になることです。また、顧客が選択できるようにいくつかの CSS ファイルのスタイルをカスタマイズしたり、動的呼び出しを実装するプログラムを作成したりして、Web サイトに動的にスタイルを変更する機能を持たせることもできます。

構造とプレゼンテーションの分離を理解する

実際にレイアウトの練習を始める前に、もう 1 つ理解しましょう。これは、構造とプレゼンテーションの分離後の CSS レイアウトの特性を利用します。コードは簡潔で更新されます。これが CSS を学ぶ目的ではないでしょうか。たとえば、P タグがある場合、これは段落ブロックであることを示します。段落を 2 文字分右インデントしたいと考える人もいるでしょう。スペースを追加して続行スペースが追加されますが、P タグの CSS スタイルを指定できるようになります: P {text-indent: 2em;} または P{margin: 0em 0em 0em 2em;} 結果の本文コンテンツは次のようになります。追加のプレゼンテーション制御なしで、以下が続きます。タグ:

私はしばらく Tianya コミュニティに参加していますが、何も書く時間がありませんでした。今日は CSS レイアウトに関する記事を書き、例と写真を使って知識のポイントを説明しようとしました。 CSSレイアウトが初めての方には参考になると思います。

この段落にフォント、フォントサイズ、背景、行間隔、その他の変更を追加したい場合は、対応する CSS を P スタイルに追加するだけです。次のように記述する必要はありません。

＜p＞＜font color="#FF0000" face="宋体"＞段落内容＜/font＞＜/p＞

ログイン後にコピー

これは構造です。パフォーマンスも含めて記述します。多くの段落が統一された構造とパフォーマンスを持っている場合、このようにコードを書くのは面倒になります。
構造とパフォーマンスの分離についての理解を深めるために、コードを直接リストしてみましょう:

組版には CSS を使用します

＜style type="text/css"＞  
 ＜!--  
 #photoList img{  
 height:80;  
 width:100;  
 margin:5px auto;  
 }  
 --＞  
 ＜/style＞  
  
 ＜p id="photoList"＞  
 ＜img src="01.jpg" /＞  
 ＜img src="02.jpg" /＞  
 ＜img src="03.jpg" /＞  
 ＜img src="04.jpg" /＞  
 ＜img src="05.jpg" /＞  
 ＜/p＞

ログイン後にコピー

CSS 組版は必要ありません

＜img src="01.jpg" width="100" height="80" align="center" /＞  
 ＜img src="02.jpg" width="100" height="80" align="center" /＞  
 ＜img src="03.jpg" width="100" height="80" align="center" /＞  
 ＜img src="04.jpg" width="100" height="80" align="center" /＞  
 ＜img src="05。jpg" width="100" height="80" align="center" /＞

ログイン後にコピー

最初の方法は、構造を分離することです。コンテンツ部分のコードはシンプルである必要があります。画像リストの数が多い場合は、最初の CSS レイアウト方法の方が有利です。例として、BODY で人物を紹介します。 , そして、彼がどんな人なのか、身長はどれくらいなのか、男の子なのか女の子なのかについては、CSSで調べればわかります。このようにして、BODY での作業はシンプルになります。つまり、BODY のコードもシンプルになります。 BODY にチームメンバーがいる場合は、CSS に項目を記録するだけで済みます。これは、Flash ソフトウェアのコンポーネントとインスタンスの概念に似ているため、アニメーションファイルは大きくなりません。アイデアを CSS Web デザインに移行することです。つまり、コードが複雑ではなく、Web ページファイルが小さく、クライアントがより速くダウンロードできます。

デモアドレス: http://www.hsptc.com/css1.html

CSS 写植を使用して Web ページファイルのサイズを削減します

上で作成したレイアウトと同様に、4 つのブロックに分かれています。各ブロックのフレームワークは同じです。このフレームワークは、一度スタイルを作成すると、テキストの内容を変更する限り、何度でも呼び出すことができます。多くのセクションがあり、そのスタイルと構造コードは次のとおりです (Web ページを直接コピーして生成せず、次のコードを Web ページの適切な場所に貼り付けてください):

＜style type="text/css"＞   
 ＜!--   
 body {   
 font-size: 12px;   
 margin: 0px auto;   
 height: auto;   
 width: 805px;   
 }   
 .mainBox {   
 border: 1px dashed #0099CC;   
 margin: 3px;   
 padding: 0px;   
 float: left;   
 height: 300px;   
 width: 192px;   
 }   
 .mainBox span {   
 float: left;   
 height: 20px;   
 width: 179px;   
 color: #FFFFFF;   
 padding: 6px 3px 3px 10px;   
 background-color: #0099CC;   
 font-size: 16px;   
 }   
 .mainBox p {   
 line-height: 1.5em;   
 text-indent: 2em;   
 margin: 35px 5px 5px 5px;   
 }   
 --＞   
 ＜/style＞   
   
 ＜p class="mainBox"＞   
 ＜span＞前言＜/span＞   
 ＜p＞正文内容＜/p＞   
 ＜/p＞   
   
 ＜p class="mainBox"＞   
 ＜span＞CSS盒子模式＜/span＞   
 ＜p＞正文内容 ＜/p＞   
 ＜/p＞   
   
 ＜p class="mainBox"＞   
 ＜span＞转变思想＜/span＞   
 ＜p＞正文内容 ＜/p＞   
 ＜/p＞   
   
 ＜p class="mainBox"＞   
 ＜span＞熟悉步骤＜/span＞   
 ＜p＞正文内容 ＜/p＞   
 ＜/p＞

ログイン後にコピー

ワークフローに精通している

実際に作業を開始する前に、次の考えを頭の中で形成する必要があります。テーブルが何なのかわからないので、フォント、色、高さなどのパフォーマンス制御タグをコンテンツ部分に再表示させることはできません。、width、align、その他のタグは再表示できません（簡単に言えば、それは機能します。最初に洗脳し、古い慣行を忘れて、新しいメソッドを受け入れて使用します）。 DIV はブロックレベルの要素であり、P もブロックレベルの要素です。たとえば、テキストコンテンツを複数のブロックに分割する場合、DIV を使用して DIV 植字を行う必要はありません。

テキストブロック 1

テキストブロック 2

テキストブロック 3

" ですが、"

テキストブロック 1

を使用する方が適切です。

テキストブロック 2

テキストブロック 3

"。

DIV+CSS を使用したデザインのアイデアは次のとおりです: 1. p を使用してセマンティック構造を定義します。 2. 次に、CSS を使用して、背景、境界線、配置属性などを追加します。最後に、この CSS で定義されたボックスにテキストや画像などのコンテンツを追加します (属性を表すタグはありません)。このステップの理解を深めるために、例を見てみましょう。まずは結果の画像を見てみましょう:

デモのアドレス: http://www.hsptc.com/css2.html
CSS 組版結果の画像
1. p を使用してセマンティック構造を定義します
次に、これは典型的なレイアウト列構造です。つまり、ページヘッダー、ナビゲーションバー、コンテンツ、著作権 (以下に示すように)、

典型的なレイアウト列構造

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

＜p id="header"＞＜/p＞  
 ＜p id="nav"＞＜/p＞  
 ＜p id="content"＞＜/p＞  
 ＜p id="footer"＞＜/p＞

ログイン後にコピー

上では 4 つを定義しました。希望する結果に従って、これらのボックスを同じ幅にして下から下にきちんと配置し、制御を容易にするためにページ全体の中央に配置します。 4 つのボックスを更新されたボックスに追加するため、コードは次のようになります。

＜p id=”mainBox”＞  
 ＜p id="header"＞＜/p＞  
 ＜p id="nav"＞＜/p＞  
 ＜p id="content"＞＜/p＞  
 ＜p id="footer"＞＜/p＞  
 ＜/p＞

ログイン後にコピー

一番外側の大きなボックス (小さなボックスを含む大きなボックス) については、ページの中央に配置して枠線を追加します。そのスタイルは次のとおりです:

#mainBox {  
 margin: 0px auto;  
 height: auto;  
 width: 760px;  
 border: 1px solid #006633;  
 }

ログイン後にコピー

簡単にするために、ここでは背景画像をブロック全体に適用し、その下の境界線に一定のギャップをデザインするだけです。目的は、ページヘッダーの画像を防ぐことです。以下のナビゲーションバーに接続することから始めます。これも美しさのためです。スタイルコードは次のとおりです:

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

ログイン後にコピー

マウスを上に動かすと、ボタンの背景色とフォントの色が変わります。このように、これらの小さなボタンを小さなボックスとして理解できます。これはボックスのネストの問題です。スタイルコードは次のとおりです。

#nav {  
 height: 25px;  
 width: 760px;  
 font-size: 14px;  
 list-style-type: none;  
 }  
 #nav li {  
 float:left;  
 }  
 #nav li a{  
 color:#000000;  
 text-decoration:none;  
 padding-top:4px;  
 display:block;  
 width:97px;  
 height: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;  
 padding: 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;  
 }  
 最后回到样式开头大家会看到这样的样式代码：  
 * {  
 margin: 0px;  
 padding: 0px;  
 }

ログイン後にコピー

这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。最终完成全部样式代码是这样的：

＜style type="text/css"＞  
 ＜!--  
 * {  
 margin: 0px;  
 padding: 0px;  
 }  
 body {  
 font-family: Arial, Helvetica, sans-serif;  
 font-size: 12px;  
 }  
 #mainBox {  
 margin: 0px auto;  
 height: auto;  
 width: 760px;  
 border: 1px solid #006633;  
 }  
 #header {  
 height: 100px;  
 width: 760px;  
 background-image: url(headPic.gif);  
 background-repeat: no-repeat;  
 margin:0px 0px 3px 0px;  
 }  
 #nav {  
 height: 25px;  
 width: 760px;  
 font-size: 14px;  
 list-style-type: none;  
 }  
 #nav li {  
 float:left;  
 }  
 #nav li a{  
 color:#000000;  
 text-decoration:none;  
 padding-top:4px;  
 display:block;  
 width:97px;  
 height:22px;  
 text-align:center;  
 background-color: #009966;  
 margin-left:2px;  
 }  
 #nav li a:hover{  
 background-color:#006633;  
 color:#FFFFFF;  
 }  
 #content {  
 height:auto;  
 width: 740px;  
 line-height: 1.5em;  
 padding: 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;  
 }  
 --＞  
 ＜/style＞

ログイン後にコピー

结构代码是这样的：

＜p id="mainBox"＞  
 ＜p id="header"＞＜/p＞  
 ＜ul id="nav"＞  
 ＜li＞＜a href="#"＞首 页＜/a＞＜/li＞  
 ＜li＞＜a href="#"＞文 章＜/a＞＜/li＞  
 ＜li＞＜a href="#"＞相册＜/a＞＜/li＞  
 ＜li＞＜a href="#"＞Blog＜/a＞＜/li＞  
 ＜li＞＜a href="#"＞论 坛＜/a＞＜/li＞  
 ＜li＞＜a href="#"＞帮助＜/a＞＜/li＞  
 ＜/ul＞  
 ＜p id="content"＞  
 ＜h3＞前言＜/h3＞  
 ＜p＞第一段内容＜/p＞  
 ＜h3＞理解CSS盒子模式＜/h3＞  
 ＜p＞第二段内容＜/p＞  
 ＜/p＞  
 ＜p id="footer"＞  
 ＜p＞关于华升 　 广告服务 　 华升招聘 　 客服中心 　 Q Q留言 　 网站管理 　 会员登录 　 购物车＜/p＞
 ＜p＞Copyright &copy; 2006 - 2008 Tang Guohui. All Rights Reserved＜/p＞  
 ＜/p＞  
 ＜/p＞

ログイン後にコピー

以上就是彻底弄懂CSS盒子模式（DIV布局）_html/css_WEB-ITnose的内容，更多相关内容请关注PHP中文网（www.php.cn）！