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:
a
b
: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!