height、widthの設定時

7052 ワード

テキストリンク

親はheight、width値を持っていなければ、heightまたはwidth値を%と書くときにスタイルに反映できません。

  <header>
    <h1>Heim's place</h1>

    <nav class="menu" aria-label="메뉴">
      <ul class="menu-items">
        <li class="menu-item-home">
          <a href="#/page/home" class="active-item">홈</a>
        </li>
        <li class="menu-item-skills">
          <a href="#/page/skills">기술</a>
        </li>
        <li class="menu-item-tools">
          <a href="#/page/tools">툴</a>
        </li>
        <li class="menu-item-projects">
          <a href="#/page/projects">작업물</a>
        </li>
      </ul>
    </nav>
  </header>

htmlコードは上記の通りです.

このとき,CSSでnavに(%)の高さを与えると反映されず,画素を与えるときのみ反映される.どうしてですか.は、親要素を基準とした値ですが、親ヘッダーのheight値が与えられていないため、%値は書き込めません.ヘッダーにwidth値は指定されていませんが、パーセントで値を与える場合もよく反映されます.ヘッダーがblock要素であるため、widthが自動的に指定(横方向に満タン)される可能性があります.

彼に高さ値をあげたのでnavheight値のパーセンテージも彼にぴったり!✨
....ナビゲーションメニューの垂直中央の位置合わせは正しくありませんが、align-itemsは反映されず、原因を探しています.

Reference

この問題について(height、widthの設定時), 我々は、より多くの情報をここで見つけました https://velog.io/@hyemison/height-width-설정할-때

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

React rendering performance test

簡易収録