a
b
We hope to treat empty elements and non-empty elements differently, so there are two"/> a
b
We hope to treat empty elements and non-empty elements differently, so there are two">

Home >Web Front-end >CSS Tutorial >Advanced layout techniques with CSS

Advanced layout techniques with CSS

巴扎黑
巴扎黑Original
2017-03-14 11:36:101660browse

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:
b62caee2527db9e0884616776ccbf4efa94b3e26ee717c64999d7867364b1b4a3
b62caee2527db9e0884616776ccbf4efb94b3e26ee717c64999d7867364b1b4a3
b62caee2527db9e0884616776ccbf4ef94b3e26ee717c64999d7867364b1b4a3
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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:CSS inheritance analysisNext article:CSS inheritance analysis