Case Analysis of CSS Advanced layout skills
Today, the editor will share with you the relevant knowledge points about the example analysis of CSS advanced layout skills, with detailed content and clear logic. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.
/ * if we have the above list: * /
A
B
We want to be able to treat empty elements differently from non-empty elements, so there are two options.
/ * Select an empty element with: empty: * /
.item: empty {
Display:none
}
/ * or use: not (: empty) to select a non-empty element: * /
.item: not (: empty) {
Border:1pxsolid#ccc
/ *. /
}
Select elements with: *-Of-Type
Compatibility: IE8 is not supported
/ * bold the first p paragraph: * /
P:first-of-type {
Font-weight:bold
}
/ * add a border to the last img: * /
Img:last-of-type {
Border:10pxsolid#ccc
}
/ * add styles to unconnected blockquote: * /
Blockquote:only-of-type {
Border-left:5pxsolid#ccc
Padding-left:2em
}
/ * Let the p paragraph of the odd column show red: * /
P:nth-of-type (even) {
Color:red
}
In addition,: nth-of-type can have other types of parameters:
/ * even number * /
: nth-of-type (even)
/ * the third * / only
: nth-of-type (3)
/ * every third * /
Nth-of-type (3n)
/ * add three for each fourth, that is, 3, 7, 7, 11, 7, 7, and 11, respectively.
: nth-of-type (4n+3)
Using calc to do streaming layout
Compatibility: IE8 is not supported
/ * streaming layout of left, middle and right: * /
Nav {
Position:fixed
Left:0
Top:0
Width:5rem
Height:100%
}
Side {
Position:fixed
Right:0
Top:0
Width:20rem
Height:100%
}
Main {
Margin-left:5rem
Width:calc (100%-25rem)
}
Use vw and vh to do full screen scrolling effect
Compatibility: IE8 is not supported
View Demo
/ * vw and vh are relative to viewport, so they do not change with the content and layout. , /
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
}
Use unset to do CSSReset
Compatibility: IE is not supported
View Demo
Body {
Color:red
}
Button {
Color:white
Border:1pxsolid#ccc
}
/ * cancel the color setting of button in section * /
Sectionbutton {
Color:unset
}
Using column to make responsive column layout
Compatibility: IE9 is not supported
View Demo
Nav {
Column-count:4
Column-width:150px
Column-gap:3rem
Column-rule:1pxdashed#ccc
Column-fill:auto
}
H3 {
Column-span:all
}
The above is all the content of the article "example Analysis of CSS Advanced layout skills". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
