Hallo, lieber Leser.
Dies ist die elfte Lektion zum Erlernen von CSS. In dieser Lektion werden wir uns nur zwei einfache, aber wichtige Eigenschaften ansehen. Diese Eigenschaften steuern die Höhe und Breite des Blocks.
Bevor Sie diese Lektion lernen, gehen Sie die vorherigen Lektionen durch:
Theorie und Praxis
In der letzten Lektion haben wir uns mit dem Blockmodell, internen und externen Rändern, befasst. Dabei betrachten wir nur zwei Eigenschaften: die Höhe und die Breite des Blocks. Die Höhe in CSS wird durch die Eigenschaft festgelegt Höhe , und die Breite ist die Eigenschaft Breite . Schauen wir uns den Code anhand eines realen Beispiels an (nehmen wir ein Beispiel aus der letzten Lektion):
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <html > <Kopf > <Titel > heim</title> <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > <link rel = "stylesheet" type = "text/css" href = "style.css" > </Kopf> <Körper > <div id = "content" > <div class = "firstPar" > <p> Aliquam malesuada tellus justo, eget lacinia nunc rutrum a. Phasellus dictum tempor eleifend. Nunc ut magna non purus fermentum egestas ac eu nulla.</p> <p> Fusce est tellus, mattis quis nisl et, egestas posuere libero. Donec scelerisque tellus porttitor massa dictum pulvinar.</p> </div> <div class = "secondPar" > <p> Kras</p> <ul > <li > Amet Condimentum</li> <li > aliquam volutpat</li> <li > elementum interdum</li> </ul> </div> </div> </body> </html> |
Und in CSS für jeden Block
Mal sehen, wie es im Browser aussieht:
Wie Sie sehen, haben wir eine bestimmte Höhe und Breite festgelegt. Wenn wir die Höhe kleiner einstellen, als der Text hineinpasst, würde der Text über den Block hinausragen. Experimentieren Sie mit Höhe und Breite. Anfangs wird es schwierig sein, die benötigte Größe in Pixeln mit dem Auge zu bestimmen, aber mit der Zeit gewöhnt man sich daran.
Dies ist eine kleine und einfache Lektion. Versuchen Sie, die Größe des Blocks selbst zu ändern, und sehen Sie, was passiert. Übung ist das Meiste schneller Weg etwas lernen!
Bei HTML-Dokumenten dienen Tags eher der Kennzeichnung von Inhalten als der Angabe, wie diese präsentiert werden sollen. Mit Stilen lässt sich eine bessere Kontrolle über die Präsentation erreichen. In diesem Artikel werde ich mir die Stile ansehen, die mit der Absatzformatierung in HTML verbunden sind.
Etikett
In HTML können Sie Absätze angeben und das Attribut align richtet sie links, rechts, zentriert oder im Blocksatz aus. Zusätzlich dazu verwenden wir das globale Stilattribut.
Absatzausrichtung
Sie können einen Absatz mithilfe des align-Attributs mit den folgenden Werten ausrichten:
text-align: left|right|center|justify|initial|inherit;
Kopieren Sie den folgenden Code in Ihre .html-Datei.
Dieser Absatz ist zentriert
Dieser Absatz ist rechtsbündig
Dieser Absatz erscheint im Browserfenster im Blocksatz. Ein Blocksatz wird durch Hinzufügen zusätzlicher Leerzeichen rechts und links ausgerichtet. Sie können sehen, dass die Kanten des ausgerichteten Absatzes mit den Kanten der linksbündigen und rechtsbündigen Absätze übereinstimmen. In einem linksbündigen Absatz ist die linke Kante gerade, während in einem rechtsbündigen Absatz die linke Kante gerade ist. Sehen Sie, dass beide Kanten dieses Absatzes gerade sind? Dies wird durch den Text-align:justify-Stil erreicht.
In einem Browserfenster sieht der HTML-Code für den Absatz so aus:
Zeilenabstand
Sie können den Absatzzeilenabstand mit style=line-height steuern. Verwenden Sie das style-Attribut mit den folgenden Werten:
Zeilenhöhe: normal|number|length|initial|inherit;
Nachfolgend finden Sie ein Beispiel für einen HTML-Code, der Absätze mit unterschiedlichen Zeilenabständen anzeigt:
In diesem Absatz werden zwei Werte für das Stilattribut verwendet. Der erste Wert line-height:1.5 gibt eineinhalb Zeilenabstand für den Absatz an und der zweite Wert text-align:justify gibt an, dass der Absatztext über die Breite verteilt werden soll.
Dieser Absatz ist mit doppeltem Zeilenabstand und Blocksatz versehen. line-height:2 gibt den doppelten Abstand an. Das style-Attribut muss nicht zwei Werte haben. Wenn Sie jedoch zwei Werte angeben müssen, können Sie diese durch ein Semikolon trennen.
Hier sind einige verschiedene Möglichkeiten, den Zeilenhöhenwert für das Stilattribut zu verwenden:
: Setzt den Zeilenabstand auf 13 Pixel;
: Setzt den HTML-Abstand zwischen Absätzen auf 200 % relativ zur aktuellen Schriftgröße;
: Setzt die Zeilenhöhe auf 14 Pixel.
Einrückungen
Ich habe den Begriff „Einrückungen“ verwendet, um das Verständnis zu erleichtern. Aber in HTML verwenden wir Abstände, um Leerraum um ein Objekt herum zu schaffen. Sie können das style-Attribut mit einem Füllwert verwenden, um einen Absatz nach links oder rechts einzurücken.
Nachfolgend finden Sie ein Beispiel für Absätze mit linker und rechter Einrückung:
Dieser Absatz ist nicht eingerückt, sondern lediglich gerechtfertigt. Schauen Sie sich das Stilattribut des P-Elements für diesen Absatz an.
Für diesen Absatz habe ich den linken Abstand mit dem Stil „padding-left:30px“ auf 30 Pixel festgelegt. Dieser Absatz wird auch mit dem Text-align:justify-Stil ausgerichtet. Wie Sie bereits wissen, können wir für das Style-Attribut mehrere Werte verwenden, indem wir sie durch ein Semikolon trennen.
Und dieser Absatz hat einen rechten Einzug von 30 Pixeln, aber keinen linken Einzug. Es ist auch auf die Breite ausgerichtet. Der Wert „padding-right“ des Stilattributs gibt den richtigen Abstand an. Wenn Sie den Effekt nicht sehen, reduzieren Sie die Breite Ihres Browserfensters, damit der ausgerichtete HTML-Absatz richtig angezeigt wird.
Einrückung zwischen Absätzen (Einrückung vor und Einrückung nach Absatz)
In HTML oder CSS brauchen wir das nicht. Wir können einfach den Auffüllstil für das Element angeben
Padding-top und padding-bottom geben Leerraum vor und nach einem Absatz an, der wie ein Abstand oben oder unten wirkt. Schauen Sie sich das Tag-Beispiel unten an
Ich habe es zum ersten Mal installiert HTML-Absatz 10 Pixel vor dem zweiten und 50 Pixel nach dem zweiten Absatz einrücken:
In diesem Absatz ist kein Vorher- oder Nachher-Einzug angegeben. Dies ist ein normaler Absatz, gerechtfertigt. Wie Sie bereits wissen, können wir einen Absatz mit dem Code style=“text-align:justify“ innerhalb des Tags ausrichten.
Dieser Absatz ist überdimensioniert. Es verfügt außerdem über einen Abstand von 10 Pixeln vor dem Absatz und 50 Pixel danach. Innerhalb des Tags habe ich 3 Stile festgelegt.
Dies ist ein normaler Absatz ohne Einzüge und Standardausrichtung.
Dinge, an die man sich erinnern sollte
- Ein HTML-Absatz kann mithilfe des align-Attributs oder des text-align-Stils ausgerichtet werden.
- HTML wird je nach Bildschirmgröße und Browserfenstergröße unterschiedlich gerendert;
- Hinzufügen zusätzlicher Leerzeichen oder leere Zeilen Der HTML-Code hat keinen Einfluss auf die Ausgabe. Der Browser entfernt alle zusätzlichen Leerzeichen;
- Tags definieren, was angezeigt werden soll, und Stile definieren, wie es angezeigt werden soll.
- Es können drei Stile angegeben werden verschiedene Wege– integriert (innerhalb von Tags), intern ( innerhalb derselben HTML-Datei mit dem Element
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut laacret dolore magna aliguam erat volutpat.
Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 1.
Reis. 1. Anwenden der Höheneigenschaft
Objektmodell
document.getElementById("elementID").style.height
Browser
Browser Internet Explorer 6 definiert height fälschlicherweise als min-height .
Im Quirk-Modus berechnen Internet Explorer-Versionen bis einschließlich 8.0 die Höhe eines Elements falsch, ohne ihm Füll-, Rand- oder Rahmenwerte hinzuzufügen.
Internet Explorer-Versionen bis einschließlich 7.0 unterstützen den Vererbungswert nicht.
Dieser lange Tutorial-Artikel konzentriert sich auf wichtige Themen, dessen Aufgabe darin besteht, die Methoden zum Arbeiten mit Blockelementen zu klären, dem Leser zu erklären, warum das Ändern des Modells zur Berechnung der Breite und Höhe von Elementen verwendet wird, wie der Überlauf von Blockelementen verwaltet wird und wie mit dem gearbeitet wird minimale und maximale Größe der Elemente.
Als wir uns mit dem CSS-Boxmodell befassten, erfuhren wir, dass die Eigenschaften width und height die Breite und Höhe des Innenbereichs des Elements festlegen ( Inhaltsbereich), die Text, Bilder und andere Elemente enthalten kann.
Im CSS-Box-Modell gibt es einen Unterschied zwischen den Breiten- und Höhenwerten, die Sie einem Element zuweisen, und der Menge an Platz, die der Browser für die Anzeige reserviert. Die Gesamtbreite und -höhe der Elemente stellt den Bereich des Browserfensters dar, der aus der Breite und Höhe des Innenabstands, den Rändern und den für sie angegebenen benutzerdefinierten Werten besteht.
Die Gesamtbreite des Elements wird nach folgender Formel berechnet:
div(Breite: 150px; /* Breite des Elements festlegen */ Höhe: 150px; /* Höhe des Elements festlegen */ Polsterung: 10px; /* legt die interne Polsterung des Elements fest */ Rand: 5px; /* setzt die Grenzen des Elements */ }In unserem Fall rettet dies die Situation, wir müssen keine Berechnungen anstellen und haben in Zukunft Angst vor eventuell notwendigen Änderungen an unseren Elementen. Lassen wir diese unnötigen Berechnungen auf der Browserseite und schauen uns das Ergebnis unseres Beispiels an:
Um dieses Modell zur Berechnung der Breite und Höhe von Elementen vollständig zu verstehen, festigen wir unser Wissen anhand des folgenden Beispiels:
Ein Beispiel für die Änderung des Modells zur Berechnung der Breite und Höhe von Elementen Inhaltsboxclass = "test2" > Grenzfeld
Der Wert der Eigenschaft content-box ist der Standardwert und berechnet die Gesamtbreite und -höhe des Elements nach dem klassischen Schema. Am Beispiel der Breite:
150 Pixel (benutzerdefinierte Breite) + 10 Pixel (linker Abstand) + 10 Pixel (rechter Abstand) + 10 Pixel (linker Rand) + 10 Pixel (rechter Rand) = 190 Pixel.
Was das zweite Element betrifft, auf das wir die Eigenschaft „border-box“ angewendet haben, umfassen die benutzerdefinierte Breite und Höhe des Elements bereits den Inhalt, den Rahmen und den Abstand des Elements. In den meisten Fällen ist die Verwendung einer Eigenschaft mit dem Wert „border-box“ auf Seiten vorzuziehen, da dadurch die endgültigen Abmessungen des Elements deutlich werden und einige der oben beschriebenen unvorhergesehenen Situationen vermieden werden.
Das Ergebnis unseres Beispiels:
Kontrollieren des Blockelementüberlaufs
Während des Layoutprozesses werden Sie auf Situationen stoßen, in denen der Inhalt eines Elements außerhalb der Grenzen des Elements angezeigt wird. Standardmäßig zeigt der Browser diesen Inhalt an (Elementüberlauf wird gerendert), was in einigen Fällen zu visuellen Fehlern führt. Für dieses Browserverhalten ist die Overflow-CSS-Eigenschaft verantwortlich. Betrachten wir die möglichen Werte:
Schauen wir uns das folgende Beispiel an:
Beispiel für eine Elementüberlaufkontrolle Überlauf: sichtbar
class = "test2" >Überlauf versteckt
Essen Sie noch etwas von diesen weichen französischen Brötchen und trinken Sie etwas Tee.class = "test3" >Überlauf: scrollen
Essen Sie noch etwas von diesen weichen französischen Brötchen und trinken Sie etwas Tee.class = "test4" >Überlauf: automatisch
Essen Sie noch etwas von diesen weichen französischen Brötchen und trinken Sie etwas Tee.
In diesem Beispiel haben wir platziert vier Block mit fester Breite und Höhe, für den unterschiedlich CSS-WerteÜberlaufeigenschaften:
- Erster Block(sichtbarer Wert) – Der Inhalt erstreckt sich über die Grenzen des Elements hinaus (Standardwert).
- Zweiter Block(Wert ausgeblendet) – Inhalte, die über das Element hinausragen, werden abgeschnitten.
- Dritter Block(Bildlaufwert) – Entfernt den Überlauf, fügt aber eine Bildlaufleiste hinzu.
- Vierter Block(Auto-Wert) – wie beim Scroll-Wert wird nur dann automatisch eine Scroll-Leiste hinzugefügt, wenn der Block entlang einer bestimmten Achse überläuft ( X- horizontal, oder j- vertikal) und wird nicht dauerhaft auf der Seite angezeigt.
Das Ergebnis unseres Beispiels.
Lesen Sie auch
