Heim > Web-Frontend > CSS-Tutorial > Erweiterte Layouttechniken mit CSS

Erweiterte Layouttechniken mit CSS

巴扎黑
Freigeben: 2017-03-14 11:36:10
Original
1610 Leute haben es durchsucht

Da sich IE8 allmählich aus der -Phase zurückzieht, werden viele erweiterte CSS-Funktionen von Browsern nativ unterstützt und werden veraltet sein, wenn sie nicht erlernt werden.

Verwenden Sie
:empty
Nach dem Login kopieren
Nach dem Login kopieren
, um leere Elemente zu unterscheiden

兼容性:不支持 IE8
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Demo
Angenommen, wir haben die obige Liste:

a< /p>

b



Wir hoffen, dass wir das können Behandeln Sie leere Elemente und nicht leere Elemente werden unterschiedlich behandelt, daher gibt es zwei Optionen.
Verwenden Sie

:empty
Nach dem Login kopieren
Nach dem Login kopieren

, um leere Elemente auszuwählen:
.item:empty {
display: none;
}
oder verwenden Sie

:not(:empty)
Nach dem Login kopieren

Nicht leere Elemente auswählen:
.item:not(:empty) {
border: 1px solid #ccc;
/* .. . * /
}

Verwenden Sie
:*-Of-Type
Nach dem Login kopieren
, um beispielsweise das Element

兼容性:不支持 IE8
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

auszuwählen.
Fett den ersten p-Absatz:
p:first-of-type {
font-weight: fett;
}
Fügen Sie a hinzu Grenze zum letzten Bild:
img:last-of-type {
Grenze: 10px solid #ccc;
}
Stil zum nicht verbundenen Blockzitat hinzufügen:

blockquote:only-of-type {
border-left: 5px solid #ccc;
padding-left: 2em;
}
Lassen Sie den p-Absatz in der ungeraden Spalte zuerst rot sterben:

p:nth-of-type(even) {
color: red;
}
Außerdem

:nth-of-type
Nach dem Login kopieren

kann auch andere Parametertypen haben:

/* gerade Zahl*/
:nth-of-type(even)

/* nur der dritte */
:nth-of-type(3)

/* jedes Drittel */
:nth-of-type(3n)

/* jedes Drittel Vier plus drei, also 3, 7, 11, ... */
:nth-of-type(4n+3)

Verwenden Sie
calc
Nach dem Login kopieren
für das Flusslayout

兼容性:不支持 IE8
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Demo
Flusslayout von links, in der Mitte und rechts:

nav {
Position: fest;
links: 0;
oben: 0;
Breite: 5rem;
Höhe: 100%;
}
seitlich {
Position: fest;
rechts: 0;
oben: 0;
Breite: 20rem;
Höhe: 100%;
}

main {
margin-left: 5rem;
width: calc(100% - 25rem);
}

Verwenden Sie
vw
Nach dem Login kopieren
Nach dem Login kopieren
und
vh
Nach dem Login kopieren
Nach dem Login kopieren
führen einen Vollbild-Scrolleffekt aus.

兼容性:不支持 IE8
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren


Demo

vw
Nach dem Login kopieren
Nach dem Login kopieren

und

vh
Nach dem Login kopieren
Nach dem Login kopieren

sind relativ zu viewport, sodass es sich bei Änderungen an Inhalt und Layout nicht ändert.

section {
width: 100vw;
height: 100vh;

display: flex;
align-items: center;
justify-content: center;
text-align: center;

background-size: cover;
background-repeat : no-repeat;
background-attachment: behoben;
}

section:nth-of-type(1) {
Hintergrundbild: url('https://unsplash.it/1024/683?image=1068');
}
section:nth-of-type(2 ) {
Hintergrundbild: url('https://unsplash.it/1024/683?image=1073');
}
Abschnitt:nth-of-type(3) {
Hintergrundbild: url('https://unsplash.it/1024/683?image=1047');
}
section:nth-of-type(4) {
Hintergrundbild : url('https://unsplash.it/1024/683?image=1032');
}

body {
margin: 0;
}
p {
Farbe: #fff;
Schriftgröße: 100px;
Schriftfamilie: Monospace;
}

unset
Nach dem Login kopieren
做 CSS Reset

兼容性:不支持 IE
Nach dem Login kopieren


Demo

body {
color: red;
}
button {
color: white;
border: 1px solid #ccc;
}

/* 取消 section 中 button 的 color 设置 */
section button {
color: unset;
}

column
Nach dem Login kopieren
做响应式的列布局

兼容性:不支持 IE9
Nach dem Login kopieren


Demo

nav {
 column-count: 4;
 column-width: 150px;
 column-gap: 3rem;
 column-rule: 1px dashed #ccc;
 column-fill: auto;
}

h2 {
 column-span: all;
}
(完)

Das obige ist der detaillierte Inhalt vonErweiterte Layouttechniken mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage