Festlegen der Größe und Position mit CSS

In einer CSS-Style-Definition (oder Regel

), Können Sie Positionen und Größen in vielerlei Hinsicht verwenden, können verschiedene Maßeinheiten beschreiben. Sie können oft wählen, was Einheit, die Sie wollen, obwohl bestimmte Arten von Messungen in bestimmten Situationen am besten funktionieren.

Zum Beispiel werden zur Angabe Schriften viele Designer mit Papier und Tinte arbeiten, die in Punkte. Ein Punkt ist eine absolute Länge: 1/72 Zoll. Mit absolute Schriftgröße Spezifikationen für eine Zeitschrift oder ein Buch funktioniert gut - schließlich kann der Benutzer nicht schrumpfen, dehnen, oder das Seitenverhältnis in einem Buch einer Seite ändern. (Seitenverhältnis ist das Verhältnis zwischen Höhe und Breite.) Browser, kann aber nach Belieben verändert werden. Wenn Sie eine Seite eines Browser ziehen, ändern Sie auch es, so dass es dünner oder dicker geworden. Mit anderen Worten: Ihre Änderung seiner Form, seinem Seitenverhältnis von, sagen wir, ein Quadrat zu einem Rechteck.

Für Schriften in einem Browser angezeigt wird, eine relative Maßeinheit besser als die traditionellen Punkte. Im Gegensatz zu absoluten Messungen wie Punkte oder Zoll, skaliert eine relative Einheit mit Schriftgrößen. Als Ergebnis erhalten Sie mehr vorhersehbare Ergebnisse in Web-Seiten mit relativen Maßeinheiten Schriftgröße angeben. Eine nützliche relative Einheit der Messungen für einen Web-Designer ist die em. Obwohl die em nützlich ist, in der Praxis die meisten Designer noch Punkte oder Pixel verwenden, wenn Schriftgröße angeben. Vielleicht ist es nur die Macht der Gewohnheit, aber in jedem Fall, dass die Ergebnisse in der Regel gut aussehen in den meisten Browsern.

Messlänge

Hier sind sie auf den Punkt gebracht. . . alle Einheiten, die Länge messen:

• Pixel (Pixel): Pixel sind die kleinste Einheit auf einem Display - die Punkte Sie manchmal sehen kann, wenn man nahe genug an einen Fernseher zu bekommen. Zum Beispiel bedeutet, dass Ihre Bildschirmauflösung auf 800x600 einstellen, dass sie 800 Pixel breit und 600 Pixel hoch ist.
Pixel kann ein sinnvoller Weg sein, die Schriftgröße zu spezifizieren, aber der Nachteil ist, dass, wenn Sie Pixel angeben, dass die benutzerdefinierte Schriftgröße Option in Internet Explorer überschreibt -, so dass Benutzer nicht von "groß" bis "größte" einstellen kann und so weiter. Sie sollten jedoch immer px Freunde zu Image Größen. Bilder bereits messbar in Pixel (Sie können die Messwerte angezeigt, indem das Bild in eine beliebige Grafikanwendung Laden).
• pt (Punkte): Ein Punkt ist gleich 1/72 Zoll. Punkte (und Pica) sind klassische Schrift Messungen. Die meisten Browser auf eine 12-Punkte-Serifenschrift Standard.
• pc (Pica): Einen Pica gleich 12 Punkten.
• mm (Millimeter): Ein Millimeter ist 0,0394 Zoll, so ein Zoll enthält etwa 26 Millimeter. Ein Zentimeter enthält 10 Millimeter. Ein Großteil der Welt verwendet diese metrisch System.
• cm (Zentimeter): Ein Zentimeter ist 0,3937 Zoll, so ein Zoll enthält etwa 2 1/2 Zentimeter.
• in Zoll): Inches sind eine Einheit, in der Englisch oder kaiserlich System - in den Vereinigten Staaten verwendet. England und ein paar Reste der Kolonialzeit auch mit dem imperialen System für eine lange Zeit geblieben, aber vor kurzem eingebrochen. Die britische Regierung erfüllt im Jahr 2000 mit dem europäischen metrication und es ist jetzt eine Straftat durch das Pfund überall in Ihrer Majestät Reich zu verkaufen. Ein Mann in Cornwall, zum Beispiel, hatte angeblich Gerichtskosten zu zahlen, nachdem Makrele Verkauf gefangen an # 163 bis 1,50 pro Pfund.
Ein Zoll basiert auf dem Abstand zwischen dem ersten Knöchel und dem Ende eines jetzt vergessenen Königs Daumen. Seit 50 Jahren anhaltender Bemühungen zu erziehen und Gesetze das imperiale System zugunsten des metrischen entfernt wurden in der US-fehlgeschlagen ..
• em: Em ist eine Maßeinheit von der ungefähren Breite des Buchstabens abgeleiteten m einer Schriftart. Dies gilt als Regel der beste Weg, Schriftgröße in CSS angeben, obwohl nur wenige Designer diesen Rat befolgen.
• ex (die x-Höhe): Ex ist die x-Höhe oder Höhe der Kleinbuchstaben x, der Schriftart des aktuellen Elements.) Browser in der Regel em um die Hälfte unterteilen die Ex-Höhe zu erhalten. Diese Maßeinheit ist nicht so nützlich, wie em, weil es für alle Schriften nicht so vorhersehbar ein Durchschnitt ist.
• % (Prozent): Die Prozentsätze sind hervorragend für die relative Größe angibt (es kann zu einem Vorfahren relativ sein, die Eltern, und so weiter).

Maßeinheiten sind nicht abhängig. Sie können sie nutzen oder nicht, wie Sie es wünschen. Ebenso in IE, kann man einen Zwischenraum zwischen der Anzahl und der Einheit enthalten oder nicht: Beispiel 2 in entspricht 2in. Andere Browser nicht wie der Raum. Der Einfachheit halber Klein verwenden und unnötige Räume zu vermeiden, ist generell eine gute Idee, wenn sie mit CSS arbeiten. Nehmen Sie einfach in die Gewohnheit des 2in oder 24px-Format und Sie werden in Ordnung, es sei denn, die CSS-Ausschüsse beschließen, sich in der Zukunft umkehren.

Verstehen wenig em

Da Experten empfehlen, dass Sie em verwenden, wenn eine Webseite entwerfen, die Sie gerade so aussehen wollen, lohnt es sich, einen genaueren Blick auf, was dieses Gerät eigentlich bedeutet. Traditionell war die em die Breite des Buchstabens m.

Vielleicht haben Sie gehört der Begriff m-dash oder em-dash, das ist der Strich in der Regel bei der Veröffentlichung beschäftigt. Es ist eine horizontale Linie - wie diese - das entspricht der Breite des Schreibens der Schrift m (Dies ist nicht unbedingt eine genaue Entsprechung in vielen Schriften). Es gibt auch eine en-dash. Ratet mal, was es basiert auf.

Em und Ex-Einheiten sind relativ zu jeder Schrift. Dies ist nützlich, weil es bedeutet, dass die Größe von em angegebenen Änderungen in einer präzisen Art und Weise auf der Grundlage der Bildschirmauflösung des Benutzers, Voreinstellungen und andere Faktoren. Mit anderen Worten, em mit können Sie festlegen, was passiert, relativ auf die Schrift. Das Ergebnis ist proportional zu den anderen Eigenschaften der Schriftart und umgebenden Text. Auch relativ Spezifikationen wie em zulassen, dass Menschen mit Behinderungen die Schriftart im Browser bei Bedarf zu vergrößern. Feste Spezifikationen wie Pixel oder pt bieten nicht die Benutzer diese Option.

Em und ex sind traditionelle Schriftsetzer der Maßeinheit, aber ihre Bedeutung in CSS sind leicht modifiziert. Für eine Sache, Computer berechnen ex einfach durch Dividieren em in zwei Hälften. Dies ist einfacher zu berechnen, sondern nur eine Annäherung für die meisten Schriftarten. Em in CSS ist die Schriftgröße in Pixeln. Dies ist nützlich, weil Sie em-Einheiten angeben können, und verlassen sich auf sie (oder andere) Element der Schriftart an die Mutter relativ zu sein.

Hier ist ein Experiment, um die Idee zu bekommen, wie em relativ mit einem anderen Element. In diesem Code Text innerhalb des Elements wird als 26px definiert, aber der Text innerhalb des Absatzes Element als 1.5em definiert sind, oder, anders ausgedrückt, ein und ein halbes Mal um die Größe der Eltern. Später im HTML-Code wird das Absatzelement (parented) durch das Körperelement umschlossen. Daher wird der Absatztext in 1.5x26 Pixel (oder 39 Pixel) wiedergegeben.

einige Text

einige Text (1,5 em des Mutterkörpers).

einige Text (39 Punkte).

Der Text in der abs Klasse-Version

ist die gleiche Größe wie der gewöhnliche gerenderte

. Das Element ist ein übergeordnetes Element des

, und

wird als 1.5em seiner Mutter definiert. Der Grundkörper verwendet 26 Pixel als Textgröße, so 26x1.5 Ergebnisse in 39 Pixel.