Wilkommen auf meinem Blog. CSS (Cascading Style Sheets) bietet viele Anpassungsmöglichkeiten Aussehen Webseiten. Heute möchte ich kurz zeigen, wie man in CSS den Abstand oben oder auf einer anderen Seite für ein beliebiges Element definiert.
Marge
Der Rand wird mit der Eigenschaft margin festgelegt. Mit seiner Hilfe können Sie Ränder auf allen vier Seiten gleichzeitig festlegen oder andere Eigenschaften verwenden: margin-top, margin-left, margin-right, margin-bottom, die es Ihnen ermöglichen, nur auf einer Seite zu erstellen.
Der Rand bestimmt den Abstand, um den die ausgewählte Kante eines Elements von anderen Elementen auf der Seite versetzt wird. Beispielsweise der Eintrag:
P,div(
Rand oben: 20px;
}
Dies bedeutet, dass alle Blöcke und Absätze oben um 20 Pixel eingerückt werden, d. h. ihre Oberkante wird um diesen Abstand von den angrenzenden Elementen wegbewegt.
Ränder können auf jeder Seite mit nur einer Randeigenschaft geschrieben werden, in die 4 Werte hintereinander geschrieben werden:
Div(
Rand: 20px 10px 20px 10px;
}
Die Polsterung erfolgt jeweils am oberen, rechten, unteren und linken Rand. Da sie in diesem Fall auf gegenüberliegenden Seiten gleich sind, könnten wir es auch so schreiben:
Div(
Rand: 20px 10px;
}
Der erste Wert ist der Rand oben und unten, der zweite der Rand an den Seiten.
Vertiefung
Die innere Auffüllung funktioniert anders – sie verschiebt den Block nicht von anderen Elementen weg, sondern fügt diesen Platz innerhalb des Elements hinzu und verschiebt den Inhalt des Blocks von seinen Kanten weg. Das ist bequem. Wo haben Sie eine Website gesehen, bei der der Text ganz oben links im Fenster beginnt?
Ich habe das nicht gesehen, weil Webentwickler immer externe und verwenden Polsterung damit der Text möglichst bequem gelesen werden kann. Die interne Auffüllung wird über die Eigenschaft padding angegeben, in der jeweils 4 Werte gleichzeitig, durch ein Leerzeichen getrennt, für alle Kanten aufgeführt werden können.
Außerdem können Sie, ähnlich wie beim Rand, den Namen der Seite hinzufügen und nur den Abstand für diese Seite festlegen. Top-Padding kann beispielsweise mit padding-top geschrieben werden. Im Allgemeinen funktioniert die padding-Eigenschaft genauso wie die margin-Eigenschaft.
Sie können beispielsweise diesen Codeabschnitt angeben:
Block(
Breite: 200px;
Polsterung: 20px;
}
Wie groß wird Ihrer Meinung nach die tatsächliche Breite unseres Elements sein? Hier sehen Sie, dass es 200 Pixel sind, aber durch die Auffüllungen kommen auf jeder Seite weitere 20 hinzu, also insgesamt 240 Pixel. Berücksichtigen Sie dies bei der Gestaltung.
Ich möchte auch darauf hinweisen, dass Padding normalerweise nur Blockelementen zugewiesen wird; es ist besser, es nicht Inline-Elementen zuzuweisen. Margin funktioniert gut mit allen Elementen.
Das CSS-Layout war schon immer rechteckig. Alle glatten Linien liegen in der Kompetenz des Entwicklers. Stilregeln bieten genügend Optionen, um der Seite innerhalb der Grenzen der Bildschirmauflösung eine glatte Form zu verleihen. Aber jedes Layoutelement ist immer ein Rechteck, in dem die Anordnung der Informationen durch CSS-Regeln geregelt wird.
Der allseitige Abstand ist für jedes Seitenelement wichtig, wenn es absolut positioniert ist, und der CSS-Abstand oben ist speziell definiert, da er für verschiedene Elemente wichtig ist, insbesondere für Inline-Elemente.
Grundlegende Positionierungsregeln
Ein Blockelement verfügt über eine Randregel, eine Auffüllregel für die darin enthaltenen Elemente und eine Rahmenbreite, die ebenfalls verwendet werden kann.
Von besonderer Bedeutung ist die Einkerbung oben. CSS innerhalb eines Blocks verknüpft Auffüllregeln mit Regeln für absolut und relativ positionierte Elemente innerhalb dieses Blocks.
Eine gängige Praxis für CSS-Regeln: Sie können auf allen Seiten den gleichen Abstand festlegen, paarweise oben/unten und rechts/links oder für jede Seite separat. Zum Beispiel,
- Rand: 10px;
- Polsterung: 10px20px;
- Polsterung: 10px20px30px40px.
Im ersten Fall wird die Einkerbung des Elements von den Seiten des Außenbehälters, in dem es sich befindet, eingestellt. Im zweiten Fall betragen die Ränder oben und unten 10 Pixel, links und rechts 20 Pixel. Im dritten Fall wird die Größe der Einzüge auf allen Seiten angegeben: oben, rechts, unten und links.
In all diesen Fällen ist die Einrückung Top-CSS ist 10 px.
Regeln, die die Position von Elementen ändern
Wenn ein Layoutelement nicht absolut positioniert ist, wird es in der allgemeinen Reihenfolge der Seitenbildung positioniert.
Wenn wir definieren Durch das Auffüllen von CSS im scCurrInfo-Element wird das Ziel erreicht, auf der li-Ebene jedoch nicht.
In diesem Beispiel wird die Füllregel verwendet: 40px; erfordert eine angemessene Reduzierung der Breiten- und Höhenregeln um 80 Pixel. Andernfalls überschreitet die Größe des scCurrInfo-Blocks die Grenzen des äußeren Blocks.
Wenn wir die Auffüllregel aus der scCurrInfo-Beschreibung entfernen, sie aber mit einem Wert von 20px zur Stilbeschreibung des Listenelements hinzufügen, erhalten wir nur oberer Einzug. CSS wird diesen Wert nicht auf andere Parteien anwenden.
Natürlich gilt diese Verwendung der Einrückungsregel für jedes li-Element.
Allgemeine Praktiken zur Inhaltsformatierung
Einige Entwickler erreichen Perfektion, indem sie Seiten mit Blockelementen anordnen. Anscheinend ist dies eine klassische Praxis – mit Tabellen zu beginnen und den eigenen Bildungsprozess mit Blöcken zu beenden.
Die dem Blocklayout innewohnende Freiheit ist faszinierend und die Fantasie des Entwicklers darf nicht durch strenge Tabellenregeln eingeschränkt werden: nur Zeilen, nur Zellen, nur horizontal und vertikal zusammenführen. Nichts Besonderes an relationalen Ideen.
Mittlerweile haben Tische neben den offensichtlichen Nachteilen auch viele qualitative Vorteile. Beim Erstellen der Polsterung oben berücksichtigt CSS die Polsterung links und rechts (unten ist ein besonderer Moment). Mithilfe von Tabellenzellenregeln können Sie sowohl die vertikale als auch die horizontale Ausrichtung steuern. Durch die Verwendung von Zeilenstilen und deren Kombination mit Zellstilen können Sie komplexe Ansichten von Inhalten erstellen.
Die übliche Darstellung einer Seite in Form von Rechtecken steht einer Darstellung in tabellarischer Form keineswegs entgegen. Dies sind ebenfalls Rechtecke, aber auch Tabellenzellen, das heißt, sie haben ihre eigenen Regeln, die die Regeln der Blöcke ergänzen.
Absolute Positionierung
Block mit der Regel POSITION: absolut ; wird sich an einem Ort befinden, der durch seine Koordinaten relativ zu dem Block bestimmt wird, in dem es sich befindet.
Ein charakteristisches Merkmal von CSS-Regeln ist „Übung – bestes Kriterium In den meisten Fällen, insbesondere wenn Cross-Browser-Kompatibilität erforderlich ist und das Layout manuell erstellt wird, ist es dem Studium vollständiger Handbücher zu Cascading Style Sheets vorzuziehen.
Die Verwendung von Tabellen führt häufig zu Problemen beim Verschieben von Zellinhalten. Ein ähnlicher Versatz innerhalb eines Blocks wirkt sich nicht immer auf alle Elemente aus. Durch Experimentieren können Sie das gewünschte Ergebnis erzielen. Eine triviale Aufgabe: wie Das Entfernen der oberen Polsterung ist für CSS nicht immer eine triviale Lösung.
In einigen Fällen, wenn Sie Seitenelemente im Inneren eines beliebten Website-Content-Management-Systems anordnen müssen, müssen Sie dennoch nicht nur auf die experimentelle Praxis achten, sondern auch die Erfahrungen Ihrer Kollegen berücksichtigen.
Beschreibung
Legt das Ausmaß der Einrückung vom rechten Rand des Elements fest. Der Abstand ist der Abstand vom äußeren Rand des rechten Rands des aktuellen Elements zum inneren Rand des übergeordneten Elements (Abbildung 1).
Syntax
margin-right: Wert | auto | erben
Werte
Der Umfang des rechten Abstands kann in Pixeln (px), Prozentsätzen (%) oder anderen für CSS akzeptablen Einheiten angegeben werden. Der Wert kann entweder eine positive oder eine negative Zahl sein.
Auto Gibt an, dass die Einzugsgröße automatisch vom Browser berechnet wird. inherit Erbt den Wert des übergeordneten Elements.
HTML5 CSS2.1 IE Cr Op Sa Fx
Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 2.
Reis. 2. Anwenden der margin-right-Eigenschaft
Objektmodell
document.getElementById("elementID").style.marginRight
Browser
Browser Internet Explorer 6 verdoppelt den linken oder rechten Füllwert für schwebende Elemente, die in übergeordneten Elementen verschachtelt sind. Der an die Elternseite angrenzende Rand wird verdoppelt. Das Problem wird normalerweise durch Hinzufügen von display: inline zum schwebenden Element gelöst.
Internet Explorer-Versionen bis einschließlich 7.0 unterstützen den Vererbungswert nicht.
Beschreibung
CSS-Eigenschaft margin-top legt den Rand am oberen Rand des Elements fest. Der Abstand ist der Abstand vom äußeren Rand des oberen Rands des aktuellen Elements zum inneren Rand seines übergeordneten Elements oder zum Rand des darüber liegenden Elements. Bitte beachten Sie, dass Inline-Elemente (display: inline;) nur einen linken und einen rechten Rand haben können.
Die Größe des äußeren oberen Innenabstands kann in Pixel (px), Prozent (%) oder anderen CSS-Einheiten angegeben werden. Der Wert kann entweder positiv oder negativ sein.
Hinweis: unterer oder oberer Rand untergeordnetes Element kann sich auf die Gesamthöhe des übergeordneten Elements auswirken, es sei denn, es hat eine feste Höhengröße.
Felder zusammenführen
- Die im Dokumentenfluss untereinander liegenden Felder der Schwesterelemente werden zu einem gemeinsamen zusammengefasst. Die Höhe des resultierenden Feldes ist gleich der Höhe des größeren der beiden Felder, zum Beispiel: Feld oberstes Element(Rand unten) ist 10 Pixel und das untere Element (Rand oben) ist 20 Pixel groß. Der einzelne Rand ist in diesem Fall 20 Pixel hoch.
- Die Zusammenführung der Ränder eines übergeordneten und untergeordneten Elements, die sich im Fluss des Dokuments befinden, erfolgt, wenn das übergeordnete Element nichts hat, was seinen Rand vom Rand des untergeordneten Elements trennt (Rahmen, Abstand oder Inline-Inhalt). Außerdem findet keine Feldzusammenführung statt, wenn die Überlaufeigenschaft des übergeordneten Elements auf „hidden“ oder „auto“ gesetzt ist. Der Vorteil dieser Methode besteht darin, dass die Größe des übergeordneten Elements nicht zunimmt.
Beim Erstellen einer Website oder eines Blogs wird häufig das Blocklayout verwendet. Dadurch ist es oft notwendig, Blöcke einzurücken. Aus diesem Grund ca wie man in CSS einrückt wird in dieser Lektion ausführlich beschrieben. Für den Browser ist jedes Tag ein Container mit Inhalt, Auffüllung, Außenrändern und einem Rahmen. In dieser Lektion lernen wir, wie man interne und externe Einzüge erstellt und deren Hauptparameter berücksichtigt.
Die folgende Abbildung zeigt deutlich die Parameter für den Blockeinzug:
Wie Sie sehen, können Einzüge in vier Richtungen erfolgen: oberer Einzug (oben), unterer Einzug (unten), linker Einzug (links) und rechter Einzug (rechts). Maßeinheiten können Pixel, Prozentsätze und andere CSS-Einheiten sein – erfahren Sie mehr darüber. In diesem Tutorial werden Pixel verwendet.
Blockpolsterung
Die für das Auffüllen in CSS verantwortliche Eigenschaft ist Polsterung. Schauen wir uns also ein Beispiel für das Festlegen der internen Auffüllung für einen Block an:
Polsterung oben: 5px; /*top padding*/ padding-left: 8px; /*left padding*/ padding-right: 8px; /*right padding*/ padding-bottom: 5px; /*Bodenpolsterung*/
In diesem Beispiel wird die Polsterung für jede Seite des Blocks separat eingestellt. Darüber hinaus gibt es mehrere Möglichkeiten, Einrückungen in CSS festzulegen:
Rand: 5px 8px 5px 8px; /*oben, rechts, unten, linke Ränder*/ margin: 5px 8px 5px; /*beschreibt die oberen, linken, rechten und unteren Ränder*/ margin: 5px 8px; /*beschreibt den oberen und unteren, rechten und linken Rand*/ margin: 7px; /*beschreibt alle internen Ränder von 7px*/
Es ist einfacher, sich die erste und letzte Methode zu merken. Im ersten Fall werden die Einzüge im Uhrzeigersinn platziert (oben, rechts, unten, links) – wir können eine beliebige Anzahl an Einrückungen angeben; im letzteren Fall sind die Einrückungen auf allen Seiten gleich.
Blockränder
Die für Ränder in CSS verantwortliche Eigenschaft ist Marge. Beispiele für Ränder in CSS:
Rand oben: 5px; /*oberer Rand*/ margin-left: 10px; /*linker Rand*/ margin-right: 10px; /*rechter Rand*/ margin-bottom: 5px; /*unterer Rand*/
Polsterung: 5px 10px 5px 10px; /*oben, rechts, unten, linke Ränder*/ padding: 5px 10px 5px; /*beschreibt die obere, linke und rechte, untere Polsterung*/ padding: 5px 10px; /*beschreibt die obere und untere, rechte und linke Polsterung*/ padding: 7px; /*beschreibt alle 7px-Ränder*/
Auf diese Weise, wie man in CSS einrückt- Die Frage ist nicht schwierig, aber sehr relevant. Um die oben beschriebenen Informationen besser zu verstehen, sollten Sie bedenken, dass es zwei Eigenschaften gibt: padding – interne Einzüge und margin – äußere Einzüge. Außerdem gibt es, wie Sie bereits wissen, mehrere Möglichkeiten, Einzüge festzulegen, die Sie nutzen können.
