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

1

:empty

Copy after login

Copy after login

to distinguish empty elements

Demo
Suppose we have the above list:

a

b

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

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

Use

1	:*-Of-Type

Copy after login

to select elements

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,

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

1

calc

Copy after login

for flow layout

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

1

Copy after login

Copy after login

and

1

Copy after login

Copy after login

to create a full-screen scrolling effect

Demo

and

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

用

1

unset

Copy after login

做 CSS Reset

Demo

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

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

用

1

column

Copy after login

做响应式的列布局

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!