0

ページの上部にナビゲーションバーを備えたWebサイトを構築しようとしています。ページをスクロールするとき（FacebookやTwitterなど）はブラウザの上部で修正する必要がありますが、ページとともにスクロールすることはできません（google search ??など）。図のように参照してください：このナビゲーションバーここに画像の説明を入力してください のcss属性の位置を次のように設定する必要があるようです

#nav_bar {
  postion:fixed;
}

しかし、なぜこれらすべてのWebサイトがこれを行うために大量のdivを使用するのでしょうか。これらのすべてのdivは意味をなしますか？Twitterのように：ここに画像の説明を入力してください topbar js-topbarは、サイズが1583 * 40pxの最も外側のdivですが、そのサイズの定義が見つかりませんでした。次に、global-nav-> global-nav-inner-> containerに移動し、最後に... containerに移動します。これは、リストや検索バーなどのナビゲーション項目を実際に保持します。奇妙なのは、そのサイズが865*0pxであるということです。詳しくはツイッターのホームページの出典をご覧ください。そして私の質問は：しかし、なぜそれらのすべてのウェブサイトがこれを行うためにたくさんのdivを使用するのですか？これらのすべてのdivは意味をなしますか？高さが0pxのdivがこれらのナビゲーションアイテムを保持できるのはなぜですか？

4

2 に答える 2

2

なぜ「多くの」div？

一般的な考え方は、cssを使用したスタイリングで達成できることに関して、ラッピング要素が多いほど柔軟性が高くなることです。マークアップを読みやすくセマンティックに保つようにする必要があるため、明らかに制限があります。サイト内の多くの重要な領域または分離された領域は、3つのラッピング要素の恩恵を受けると思います。

<div class="positioner">
  <div class="padder">
    <div class="alignment">
      Menu Here
    </div>
  </div>
</div>

明らかに、よりセマンティックなHTML5要素を使用すると、これをより読みやすくすることができます。

<header class="positioner">
  <div class="padding>
    <nav class="alignment">
      Menu Here
    </nav> 
  </div>
</header>

  • パディング用に個別の要素を保持する理由は、ポジショナー（つまりヘッダー）に特定のディメンションを設定し、パディングを追加することで特定のブラウザー（古いボックスモデルを使用）で計算が混乱しないようにするためです。

  • アラインメントを分離しておく理由は、使用できるアラインメントのトリックの柔軟性が高くなるためです。

  • ヘッダー要素を使用する理由は、このコンテンツがヘッダーimoとして機能するためです。

上記の例では、各要素には間違いなく存在する理由があり、設計者がcssに関して望んでいたレイアウトを実現するためにそれらすべてが使用される可能性があります。追加のラッピングdivは、AJAX化される可能性のあるコンテンツのプレースホルダーとしても使用されることがあります。これは、Twitterなどを扱う場合に発生する可能性が非常に高くなります。

もちろん、単一のラッピング要素のみを使用することで回避できますが、後で達成できるスタイリングと配置を制限することになります。

なぜ高さ0px？

絶対位置ではなく相対位置に絶対レイヤーを配置する際によく使用されるトリックがあります。これがこれが表示される理由だと思いますが、トリック自体は実際の原因ではありませんheight:0px。このトリックでは、次の構造を使用します。

<div style="position: relative;">
  <div style="position: absolute;">
    The content here will float outside of the document flow, 
    but remain in the correct location within the document flow
     - in all viable browsers.
  </div>
</div>

ブラウザのデバッグ方法を使用して上記の構造を調べると、position: absolute;レイヤーが折りたたまれて高さがなくなっていることがわかります（最新のブラウザの場合）。これは、古いInternet Explorerの世界の外での絶対位置のデフォルトの動作です（他の位置や寸法の設定はありません）。絶対位置要素はドキュメントフローから削除され、デフォルトではその子とは何の関係も計算されないためです。 。

この動作をオーバーライドしたい場合は、単純に使用できますoverflow:hidden; （他のクラスまたはJavaScriptによって高さが特に0pxに設定されていない場合）。これにより、要素は子のサイズを計算してラップします。

于 2012-11-02T10:41:12.087 に答える
1

まず第一に、position：absoluteを使用します。スクロールするときに一緒に移動したくない場合。位置：固定; もし、するなら。

第二に、あなたがウェブサイトを構築するとき、あなたがしなければならない最初のことはあなたのウェブサイトの構造がどのように見えるかを決めることです。したがって、上部のメニューは次のようになります

<div id="Menu"> </div>

次に、その下にヘッダーを作成することをお勧めします

<div id="Header"> </div>

その下であなたはコンテンツを共有したいのです、それはそれがウェブサイトがすることだからです。

<div id="Content"> </div>

その下で、2012Copyrightなどのフッターが必要になる場合があります。

<div id="Footer">2012 Copyright zoujyjs &copy; </div>

今、あなたはすべてを中心に置きたいと思うかもしれません。これらの以前のすべてのdivをラッパーdiv内に配置してみませんか。次に、ラッパーdivを中央に配置するだけです。

<div id="Wrapper">
      <div id="Menu"> </div>
      <div id="Header"> </div>
      <div id="Content"> </div>
      <div id="Footer"> </div>
</div>

ヘッダー内にロゴなどを追加することもできます。

私はあなたがその考えを理解したと思います。しかし、あなたが「分裂」を得るのは明らかではありませんか？

また、divに高さが指定されていない場合、divはその中のコンテンツに合わせて自動的にサイズ変更されます。

<div style="background-color:black;">
   <!-- Nothing will be seen on your page, because the div is 0 height, 0 width by                default -->
</div>


<div style="background-color:black;">
   Height of the div will now be the same height as the height of this line. (15 px by    default I believe
</div>
于 2012-11-02T10:16:26.347 に答える