1

デザインと機能性を分けておくのが良いというのは、合意された考え方です。罰金。この場合、HTML と CSS の分離、特にメニュー階層の編成を見てみましょう。

ネストされたとの問題は<ol>、(レスポンシブに設計された設定で) パーセンテージに基づくスタイルに対して完全に直感に反するように見えることです。<ul><li>

私の問題:

次のように、数層の深さのリストがあります。

<ul>
  <li>
    <a>Item 1</a>
    <ul>
      <li>
      <a>Submenu 1</a>
        <ul>
          <li>
            <a>Submenu 1 (1)<a>
          </li>
          <li>
            <a>Submenu 1 (2)<a>
          </li>
          <li>
            <a>Submenu 1 (3)<a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

レスポンシブ Web デザインの目的で、このリストをドキュメントの本文relativeと同じようにスタイルしたいとしましょう。absoluteだから私ulはリストを下に続ける手段でトップをスタイリングします:

body > ul{

  position:relative;

  width:20%;

}

すべてとても順調です。<li>しかし、その後、リストのより深くネストされたに絶対位置または相対幅/高さを与える必要がある場合はどうなりますか? トップレベルのパーセンテージ スタイルに準拠するようになりました<ul>( として定義されているためrelative)。これは基本的に、すべてのリスト項目を と比較して同じサイズにする場合、個別にスタイルを設定して計算する必要があることを意味しますwindow。後続のリストには、トップと同じパーセンテージ スタイルを適用することはできません。

これは、スタイルとフォームを分離するプロセス全体にとって、完全に直感に反するように思えます。フォーム (HTML) はデータの関係を決定する必要があり、スタイル (CSS) は視覚化を決定し、適切と思われる方法でフォームを「切り離す」機能を提供する必要があります。

私の質問:

  1. fixed/ relative/として定義されている親座標空間を無視することはabsolute可能100%です100%body?

  2. HTML/CSS 関係の背後にある哲学に欠けているものはありますか? また、それをどのように利用するのが最善でしょうか?

  3. Web 開発を続けた場合、35 歳までにすべての髪を引き裂くことができますか?

免責事項

単一のブラウザーに対する単一の修正ではなく、内なる平和をもたらすことができる答えを探しています。答えが「それはできない」の場合は、それができないという事実について、なぜ、どの程度満足しているかを説明してください。

4

1 に答える 1

1

あなたが達成しようとしていることに興味があります。それは私がしなければならなかったことではありませんが、あなたは興味深い点を提起しました。また、一部の継承の仕組みを誤解している可能性もあると思います。要素に相対位置を設定したからといって、サブ要素が幅を取得する方法は変わりません。パーセンテージ幅は、相対配置であろうとなかろうと、常に親要素に基づいて幅を取得します。ほとんどの場合、親はその親のスペースを埋めます。CSS に関しては、ある程度の「禅」を把握する必要があることは間違いありません。Web 開発を続けると、髪の毛が抜ける可能性があります。ストレスボールを買えば大丈夫です :) 高さに関しては別の話です。

ただし、パーセンテージを使用する場合は注意が必要です。スタイルを一般化しており、親子関係が続いている場合は、ご指摘のとおり、実際にフォントサイズが小さくなる可能性があります。トリックは、スタイリングに関してノード ツリーの最後にパーセンテージを配置し、それ自体に影響を与えないその他のもの (色など) をより一般的なスタイルの上に配置することです。

ほとんどの場合、必要なことは達成できますが、場合によっては少し計画を立てる必要があります。

しかし、あなたが言うように、相対的なものを配置してから、内部のネストされたレベルで絶対的なものを配置すると、相対的または絶対的な配置が与えられた祖先の最初の要素からの位置が常にうまくいきます。JavaScriptを実行してその場で計算を行わない限り、それを回避する方法はないと確信しています。

于 2013-09-12T18:03:01.113 に答える