CSS Advanced Layout Tips

CSS Advanced Layout Tips

As IE8 gradually exits the stage, many advanced CSS features have been natively supported by the browser and will not be obsolete.

Use :emptyDistinguishing between empty elements

Compatibility: IE8 not supported

Demo

If we have the above list:

<div class= "Item" >a</div><div class= "item" >b</div><div class= "item" ></div>

We want to be able to distinguish between empty elements and non-empty elements, so there are two scenarios.

Use the :empty Select empty element:

. item:empty {Display:none;}

Or :not(:empty) Select a non-empty element:

. Item:not (: empty) {border:1px solid #ccc;/* ... */} with :*-Of-TypeSelect element

Compatibility: IE8 not supported

An example is described.

Add a bold paragraph to the first P:

P:first-of-type {font-weight:bold;}

Add a border to the last img:

Img:last-of-type {border:10px solid #ccc;}

To add a blockquote to a non-connected style:

Blockquote:only-of-type {border-left:5px solid #ccc; padding-left:2em;}

Let the odd sequence of P-paragraph first die red:

P:nth-of-type (even) {color:red;}

In addition, :nth-of-type you can have other types of parameters:

/* Even number of * *: Nth-of-type (even)//only the third */:nth-of-type (3)/* per third */:nth-of-type (3n)/* Every fourth plus three, i.e. 3, 7, one, ... */: Nth-of-ty For PE (4N+3) calcDo a flow-style layout

Compatibility: IE8 not supported

Demo

Flow layout in left-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 vwAnd vhDo a full-screen scrolling effect

Compatibility: IE8 not supported

Demo

vwAnd vh is relative to viewport, so it does not change with the content and layout.

section {width:100vw; height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; ba Ckground-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 unsetDo CSS Reset

Compatibility: IE not supported

Demo

body {color:red;} button {color:white; border:1px solid #ccc;}/* Cancels the color setting for button in section */section button {Color:unset;} Use columnDo a responsive column layout

Compatibility: IE9 not supported

Demo

Nav {column-count:4; column-width:150px; column-gap:3rem; column-rule:1px dashed #ccc; column-fill:auto;} h2 {Column-span:all;}

CSS Advanced Layout Tips