Flying wing layout & Grail

Flying wing: Intermediate fixed sides adaptive

Holy Grail layout: two fixed intermediate adaptive

 

Margin is margins, the digital attribute value is divided into positive and negative numbers.

Positive number: Margin : 20Px ;

Negative: in static (normal flow) elements margin-left negative current element go left margin-top negative current element go up

Margin-bottom after negative current element fixed to go up behind the element, margin-right negative current element does not move to the left to go back element

Noted, margin increased negative current element will be wide (if not set the current element width ) scenario

In the float under

Margin is negative is our common Flying wing, the Holy Grail layout

Adaptive intermediate fixed at both ends

To the element margin-left to go left negative current element, margin-right to left to go negative after an element overwrites the current element.

In the absolute case

Margin is negative

Let the middle elements, provided that know the width and height of the element.

div{

Positionabsolute

Left50%

Top50%

Margin-left:-width/2;

Margin-top:-height/2

}

Margin is negative no matter what the conditions are releasing their own space, their own if the margin is not enough, put his wide high contribution out.

 

Guess you like

Origin www.cnblogs.com/ymlo/p/11502377.html