css - % が位置 CSS でいつか機能しない

Question

一部の div に位置 (%) を適用していますが、機能していません。これがコードです。

#transitions {
  position: absolute;
  top: 0;
  bottom: 70%;
  display: block;
}

しかし、私が適用するとき：

  #transitions {
    position: absolute;
    top: 0;
    bottom: 70em;
    display: block;
  }

それは私のために働いています。

b/w % または em に違いはありますか?

助けてください。

score 1 · Accepted Answer

との間には多くの違いがemあり%ます。

%要素のコンテナーのパーセンテージサイズを表します。次の例で<div>は、ページの幅の 70% になります。

<body>
    <div>A div</div>
</body>

CSS

div { width: 70%; }

emは、現在のに基づく大文字の「M」のサイズを表しfont-sizeます。代わりに次の CSS を使用<div>すると、70 'M' 文字のサイズになります。

div { width: 70em; }

この例では、#transitions要素の左側をコンテナの 70% に配置します。または、コンテナーの左側から 70 'M' 文字離れています。

score 0 · Accepted Answer

% vs em を計算したい場合、このようなフォントサイズで 170% = 32px = 2 em である可能性が高く、1 em = 16px および 100px = 531.25 % と計算できます。

2 に答える 2