Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.