Advanced layout techniques with CSS

As IE8 gradually withdraws from the stage, many advanced CSS features have been natively supported by browsers, and they will become obsolete if they are not learned.

Use

:empty

to distinguish empty elements

兼容性：不支持 IE8

Demo
Suppose we have the above list:

a

b

We hope to treat empty elements and non-empty elements differently , then there are two options.
Use

:empty

to select empty elements:
.item:empty {
display: none;
}
Or use

:not(:empty)

Select non-empty elements:
.item:not(:empty) {
border: 1px solid #ccc;
/* ... */
}

Use

:*-Of-Type

to select elements

兼容性：不支持 IE8

Example.
Bold the first p paragraph:
p:first-of-type {
font-weight: bold;
}
Add a border to the last img:
img:last-of-type {
border: 10px solid #ccc;
}
Add a style to the unconnected blockquote:

blockquote:only-of-type {
border-left: 5px solid #ccc;
padding-left: 2em;
}
Let the p paragraph in the odd column die red first:

p:nth-of-type(even) {
color: red;
}
In addition,

:nth-of-type

can also have other types of parameters:

/* an even number*/
:nth-of-type(even)

/* only the third one*/
:nth-of-type(3)

/* Every third */
:nth-of-type(3n)

/* Every fourth plus Three, namely 3, 7, 11, ... */
:nth-of-type(4n+3)

Use

calc

for flow layout

兼容性：不支持 IE8

Demo
Flow layout of left, middle and right:

nav {
position: fixed;
left: 0;
top: 0;
width: 5rem;
height: 100%;
}
aside {
position: fixed;
right: 0;
top: 0;
width: 20rem;
height: 100%;
}

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

Use

vw

and

vh

to create a full-screen scrolling effect

兼容性：不支持 IE8

Demo

vw

and

vh

are relative to viewport, so they will not change with the content and layout Change with change.

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: fixed;
}

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

body {
margin: 0;
}
p {
color: #fff;
font-size: 100px;
font-family: monospace;
}

用

unset

做 CSS Reset

兼容性：不支持 IE

Demo

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

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

用

column

做响应式的列布局

兼容性：不支持 IE9

Demo

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

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

The above is the detailed content of Advanced layout techniques with CSS. For more information, please follow other related articles on the PHP Chinese website!