Mehrere CSS-Eigenschaften: Anzeige, Float, Clear, Überlauf, Sichtbarkeit

http://colobu.com/2014/08/28/CSS-display-float-clear-overflow-visibility/

Anzeigeattribut: block/inline/none

Anzeige :block (die Funktion besteht darin, die Zeilenattributbeschriftung als Blockattributbeschriftung anzuzeigen, und die Breite und Höhe können festgelegt werden)
display: inline (die Funktion besteht darin, die Blockattributbeschriftung als Zeilenattributbeschriftung anzuzeigen, und die Breite und Höhe der Blockattributbeschriftung können derzeit nicht festgelegt werden. Der Unterschied zwischen display:none und display:none besteht darin, dass letzteres diese Position nicht einnimmt und das nächste Element sie direkt abdeckt, während ersteres belegt dieses Layout, zeigt jedoch den Inhalt nicht an und ist leer. Beim Herunterladen werden nicht angezeigte Elemente nicht heruntergeladen, aber nicht angezeigte Elemente werden heruntergeladen

Float (schwebend, unterliegt weiterhin Einschränkungen des Dokumentflusses) kann nach der Beschriftung der Float-Zeile festgelegt werden. Seine Breite und Höhe

Float: keine/links/rechts

keine: Das Objekt schwebt nicht

links: Nach links schweben

rechts: Nach rechts schweben

clear(
Floats löschen

)

clear: beide/keine/links/rechtskeine: Floating Objekte sind auf beiden Seiten erlaubt

Beide: Schwebende Objekte sind nicht erlaubt

Links: Nicht erlaubt Es gibt schwebende Objekte auf der linken Seite
Rechts: Schwebende Objekte auf der rechten Seite sind nicht erlaubt

Überlauf (Überlauf)

Überlauf: sichtbar/automatisch/versteckt/scrollen

sichtbar: Inhalt wird nicht ausgeschnitten. Keine Bildlaufleiste hinzufügen

automatisch: Standardattribut

versteckt: Überschüssigen Inhalt ausblenden
scrollen: Bildlaufleiste immer anzeigen

Sichtbarkeit (visuell)

Sichtbarkeit: erben/sichtbar/versteckt

erben: Sichtbarkeit des vorherigen übergeordneten Objekts erben

sichtbar: Objekt sichtbar

versteckt: Objekt ausgeblendet

Unterschiede in mehreren Bildformaten:

gif: Durchscheinend wird nicht unterstützt

jpg: Transparent wird unterstützt

png: Transparent wird teilweise unterstützt und erfordert zusätzliche Verarbeitung

=============

http://www.studyofnet.com/news/398.html

1. Elemente auf Blockebene: Blockelement

jeweils Standardmäßig belegen Elemente auf Blockebene eine Höhe, sobald ein Element auf Blockebene zu einer Zeile hinzugefügt wird , andere Elemente können nicht hinzugefügt werden (außer nach float). Wenn zwei Elemente auf Blockebene kontinuierlich bearbeitet werden, werden sie automatisch umbrochen und auf der Seite angezeigt. Elemente auf Blockebene können im Allgemeinen Elemente auf Blockebene oder Inline-Elemente verschachteln.

Elemente auf Blockebene erscheinen im Allgemeinen als Container zum Organisieren von Strukturen, dies ist jedoch nicht immer der Fall. Einige Elemente auf Blockebene, wie z. B.

, können nur Elemente auf Blockebene enthalten. Andere Elemente auf Blockebene können Elemente auf Zeilenebene enthalten, z. B.

. Andere können sowohl Elemente auf Blockebene als auch auf Zeilenebene enthalten.

p ist das am häufigsten verwendete Element auf Blockebene, und der Elementstil display:block umfasst alle Elemente auf Blockebene. Sie werden immer in Form eines Blocks ausgedrückt und sind vertikal nacheinander mit den Geschwisterblöcken derselben Ebene angeordnet, wobei sie die linke und rechte Seite ausfüllen.

2. Inline-Element: Inline-Element

wird auch

Inline genannt Elemente

, Inline-Elemente usw.; Inline-Elemente basieren im Allgemeinen auf Basiselementen auf semantischer Ebene und können nur Text oder andere Inline-Elemente aufnehmen. Beispielsweise sind SPAN-Elemente, IFRAME-Elemente und der Elementstil display: inline alle Inline-Elemente. Beispielsweise werden Elemente wie Text horizontal zwischen Buchstaben angeordnet und automatisch an das rechte Ende umgebrochen.

3. Eigenschaften des Blockelements

①, immer in einer neuen Zeile


②, Höhe, Zeilenhöhe, Ränder und Abstand können alle gesteuert werden


③, die Standardbreite beträgt 100 % des Containers, es sei denn, Sie legen eine Breite fest.


④Es kann Inline-Elemente und andere Blockelemente aufnehmen

4

① und andere Elemente befinden sich in derselben Zeile

②, Höhe, Zeilenhöhe, Ränder und Abstand können nicht geändert werden


③ . Die Breite ist die Breite des Textes oder Bildes und kann nicht geändert werden

④ Inline-Elemente können nur Text oder andere Inline-Elemente aufnehmen




Für Inline Elemente, beachten Sie bitte Folgendes:

Das Einstellen der Breite ist ungültig.

• Das Festlegen der Höhenhöhe ist ungültig und kann über die Zeilenhöhe festgelegt werden.

• Die Einstellung des Randes gilt nur für den linken und rechten Rand, nicht für den oberen und unteren Rand.

• Die Einstellung der Polsterung gilt nur für die Polsterung links und rechts, nicht für die Polsterung oben und unten. Beachten Sie, dass der Umfang des Elements vergrößert wird, der Inhalt um das Element herum jedoch nicht beeinträchtigt wird.

5. Gemeinsame Blockelemente

Adresse – Adresse

blockquote – Blockzitat

center – zentraler Ausrichtungsblock

dir – Verzeichnisliste

p – Häufig verwendete Blockebene ist einfach und es ist auch das Haupt-Tag des CSS-Layouts

dl – Definitionsliste

Feldsatz – Formularkontrollgruppe

Formular – interaktives Formular

h1 – Überschrift

h2 – Untertitel

h3 – Überschrift der Ebene 3

h4 – Überschrift der Ebene 4

h5 – Überschrift der Ebene 5

h6 – Überschrift der Ebene 6

hr – Horizontale Trennlinie

isindex – Eingabeaufforderung

menu – Menüliste

noframes – rahmt optionalen Inhalt ein (dieser Block wird für Browser angezeigt, die dies tun). unterstützt keine Frames-Inhalte

noscript – optionaler Skriptinhalt (diesen Inhalt für Browser anzeigen, die kein Skript unterstützen)

ol – geordnete Form

p – Absatz

vorformatierter Text

Tabelle – Tabelle

ul – Ungeordnete Liste

6. Gemeinsame Inline-Elemente

• a – Anker

• abbr – Abkürzung

• Akronym – Erstes Wort

• b – fett (nicht empfohlen)

• bdo – bidi override

• big – große Schriftart

• br – Zeilenumbruch

• zitieren – Zitat

• code – Computercode (bei Zitierung des Quellcodes erforderlich)

• dfn – Definitionsfeld

• em – Hervorhebung

• font – Schriftarteinstellung (nicht empfohlen)

• i – ​​​​kursiv

• img – Bild

• Eingabe – Eingabefeld

• kbd – Tastaturtext definieren

• label – Tabellenbezeichnung

• q – kurzes Zitat

• s – Bindestriche (nicht empfohlen)

• samp – Beispiel-Computercode definieren

• select – Elementauswahl

• small – kleiner Schrifttext

• span – häufig verwendeter Inline-Container, der Blöcke innerhalb von Text definiert

• durchgestrichen – durchgestrichen

• stark – fett hervorgehoben

• sub – tiefgestellt

• sup – hochgestellt

• textarea – mehrzeiliges Texteingabefeld

• tt – Telextext

• u – unterstreichen

7. Was ist der Unterschied zwischen Inline-Elementen und Block-Level-Elementen?

Unterschied 1:

Blockebene: Elemente auf Blockebene belegen standardmäßig automatisch eine Zeile Füllen Sie die Breite des übergeordneten Elements aus

Inline: Inline-Elemente belegen keine exklusive Zeile und benachbarte Inline-Elemente werden in derselben Zeile angeordnet. Seine Breite ändert sich mit dem Inhalt.

Unterschied 2:

Blockebene: Blockebenenelemente können Breite und Höhe festlegen

Inline: Die Breite und Höhe von Inline-Elementen kann nicht eingestellt werden

Unterschied drei:

Blockebene : Elemente auf Blockebene können Rand und Abstand festlegen

inline: Rand-links in der horizontalen Richtung des Inline-Elements; -links; padding- rechts; Aber das vertikale margin-top; padding-top;

Unterschied vier:

Blockebene: display:block;

inline :display:inline;

Sie können Elemente auf Blockebene und Inline-Elemente wechseln, indem Sie das Anzeigeattribut ändern

Das obige ist der detaillierte Inhalt vonMehrere CSS-Eigenschaften: Anzeige, Float, Clear, Überlauf, Sichtbarkeit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!