a
Home >Web Front-end >CSS Tutorial >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.
:emptyto 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;
/* ... */
}
:*-Of-Typeto 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)
calcfor 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);
}
vwand
vhto 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!