em ist eine relative Längeneinheit in CSS, relativ zur Schriftgröße des Texts im aktuellen Objekt; wenn die aktuelle Schriftgröße des Inline-Textes nicht manuell festgelegt wurde, ist sie relativ zur Standardschriftgröße des Browsers. Es kann verwendet werden, um Breite, Höhe, Zeilenhöhe, Rand, Rahmen und andere Stile festzulegen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Es gibt viele Einheiten in CSS. Das häufig verwendete px ist eine absolute Einheit und em ist eine relative Einheit. Unter der Voraussetzung der Reaktionsfähigkeit und mobiler Endgeräte können mit ihnen eine Reihe von Attributen wie Schriftgröße, Breite, Ränder und Ränder von Webdokumenten und HTML-Elementen bequemer und schneller angepasst werden. Die Verwendung von em als Einheiten ist flexibler als px.
1em=元素中文本的1个垂直高度
Der Text im Browser ist im Allgemeinen standardmäßig auf 16 Pixel eingestellt, d. h. standardmäßig:
1em=16px
Wie ändert man diese Einstellung? Legen Sie einfach explizit die Schriftgröße des Body-Elements fest. Beispiel:
body {
font-size: 24px;
width: 10em; /* 10em = 24px * 10 = 240px */
}<style>
body {
font-size: 12px;
}
div {
/* 该元素没有设置font-size，因此继承了父元素的font-size: 12px; */
width: 10em; /* 10em = 12px * 10 = 120px */
}
</style>
<body>
<div></div>
</body><style>
body {
font-size: 12px;
}
div {
font-size: 20px;
width: 10em; /* 10em = 20px * 10 = 200px */
}
</style>
<body>
<div></div>
</body><style>
body {
font-size: 12px;
}
div {
font-size: 2em; /* 2em = 12px * 2 = 24px */
width: 10em; /* 10em = 24px * 10 = 240px */
}
</style>
<body>
<div></div>
</body><style>
body {
font-size: 16px;
}
div {
font-size: 1.25em; /* 1.25em = 16px * 1.25 = 20px */
width: 10em; /* 10em = 20px * 10 = 200px */
height: 5em; /* 5em = 20px * 5 = 100px */
border: 0.05em solid #000; /* 0.05em = 20px * 0.05 = 1px */
margin: 0.25em; /* 0.25em = 20px * 0.25 = 5px */
padding: 0.75em; /* 0.75em = 20px * 0.75 = 15px */
line-height: 1.5em; /* 1.5em = 20px * 1.5 = 30px */
}
</style>
<body>
<div></div>
</body>css-Video-Tutorial
)2. Berechnen Sie das richtige EM basierend auf px
1. Verwenden Sie den PXtoEM-Rechner
<style>
div {
font-size: 16px;
width: 2em; /* 2em = 16px * 2 = 32px */
}
</style>
px = Referenztextgröße * em => em = px / Referenztextgröße
In der obigen Formel erfordert die „Referenztextgröße“ besondere Aufmerksamkeit:
Weitere Programmierkenntnisse finden Sie unter:
ProgrammiervideoDas obige ist der detaillierte Inhalt vonWas bedeutet em in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
