Wie funktioniert 'em' css Einheit für positionierte Elemente?

Unten ist der HTML-Code mit verschachtelten div und einem p als innerste Element,Wie funktioniert 'em' css Einheit für positionierte Elemente?

<!DOCTYPE html> 
<html> 
    <head> 
     <title>How em unit works?</title> 
     <link href="style.css" rel="stylesheet" type="text/css" media="all"> 
    </head> 
    <body> 
     <div> 
      <div> 
       <p> Some text</p>   
      </div> 
     </div> 
    </body> 
</html>

wenn wie

body{ 
    font-size: 10px; /* Default font size is 16 css pixels for body tag*/ 
} 

body > div{ 
    font-size: 20px; 

} 

body > div > div{ 
    font-size: 50px; 
} 

p{ 
    font-size: 0.5em; /* 25 css pixels */ 
    width: 6em;   /* 6X50 css pixels */ 
    height: 6em;  /* 6X50 css pixels */ 
    padding-right: 3em; /* 3X50 css pixels */ 
    margin-left: 3em; /* 3X50 css pixels */ 
    background-color: red; 
}

dann, Absatztext, nimmt font-size als 0.5 x 50px (das 0,5-fache des nächsten Mutter gestylt font-size).

Meine Frage,

body{ 
    font-size: 10px; /* Default font size is 16 css pixels for body tag*/ 
} 

body > div{ 
    font-size: 20px; 
    position: relative; 

} 

body > div > div{ 
    font-size: 50px; 
} 

p{ 
    font-size: 0.5em; 
    width: 6em;   
    height: 6em;   
    padding-right: 3em; 
    margin-left: 3em; 
    background-color: red; 
    position: absolute; 
}

wenn pposition: absolute und äußere bekommt die meisten div werden position: relative, dann, Wie funktioniert das em Einheit Verhaltensänderung für p Element?

Quelle

2016-09-08 overexchange

Es ändert sich nicht. Die Positionierung wirkt sich nicht auf die Schriftgröße aus. Gibt es ein bestimmtes Problem, auf das Sie stoßen? Wenn ja, können Sie es für uns replizieren? P.S. Ich denke, du meintest "25px", wo du "15px" in deinem Codebeispiel hast. FWIW Ich würde anfangen, "rem" anstelle von "em" zu verwenden, wenn Sie IE8 nicht unterstützen müssen. Einfacher zu arbeiten. – hungerstar

@hungerstar Korrekt. lass mich bearbeiten. – overexchange

Verwenden Sie 'rem' es ist viel einfacher, relative Größen mit – Martin

Wie ändert sich das Verhalten der em-Einheit, wenn p die Position: absolut ist?

Es ändert sich überhaupt nicht.

Das übergeordnete Element ist immer noch das übergeordnete Element.

Quelle

2016-09-08 19:53:14 Quentin

Ich konnte die 'font-size' in' p' nicht mit Entwickler-Tools anzeigen. Es zeigt immer noch "0.5em". Wie sehe ich die 'font-size'? – overexchange

@overxchange überprüfen, um die * berechneten * Werte zu sehen – Martin

Also, im Gegensatz zu '%' css Einheit, 'em' Einheit Verhalten nicht ändern – overexchange

Position wirkt sich nicht auf em Sizing aus. So wird es gleich sein, egal wie die Position des Absatzes ist. Ich bevorzuge rem über em obwohl. em kann manchmal komisch werden, und wenn Sie nicht alles im Auge behalten, können einige Dinge wackelig aussehen.

EDIT: Ich sehe zwei andere schlagen mich zu beantworten.

Quelle

2016-09-08 19:59:00

Wie funktioniert 'em' css Einheit für positionierte Elemente?

Antwort

Verwandte Themen