Advanced Layout Tips for CSS

Source: Internet
Author: User

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

Use

: Empty
Distinguishing between empty elements

Compatibility: IE8 not supported

Demo
If we have the above list:
<p class= "Item" >a</p>
<p class= "Item" >b</p>
<p class= "Item" ></p>
We want to be able to distinguish between empty elements and non-empty elements, so there are two scenarios.
Use

: Empty

Select an empty element:
. item:empty {
Display:none;
}
or with

: Not (: Empty)

Select non-empty elements:
. Item:not (: Empty) {
border:1px solid #ccc;
/* ... */
}

Use

:*-of-type
Select 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 also have other types of parameters:

*/Even number of * *
: Nth-of-type (even)

/* Only a third */
: Nth-of-type (3)

/* Every third */
: Nth-of-type (3n)

/* Every fourth plus three, i.e. 3, 7, 11, ... */
: Nth-of-type (4n+3)

Use

Calc
Do 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

vw
And
Vh
Do a full-screen scrolling effect

Compatibility: IE8 not supported


Demo

vw

And

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;

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
Do CSS Reset

Compatibility: IE not supported


Demo

Body {
color:red;
}
button {
Color:white;
border:1px solid #ccc;
}

/* Cancel the Color setting for button in section */
Section button {
Color:unset;
}

Use

Column
Do 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;
}
Finish

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.