Common learning css layout finishing

	一、垂直居中
	二、等分布局
	三、等高布局
	四、多列布局
	五、局中布局（垂直居中）
	六、全屏布局
	七、三列布局
	八、圣杯布局
	九、双飞翼布局
	十、水平居中
	十一、css 布局特别整理

Note: The code which has a more detailed notes
project code all the code has been uploaded to the cloud and Github, two warehouses me gets updated

Download cloud git code: [email protected]:gorit/Coding-with-Front-end.git
Github git Download:[email protected]:CodingGorit/Coding-with-Front-end.git

A vertical center

Child has a parent container and container, to achieve the effect of centering the container in the child's parent container

Layout effects:

Second, the layout aliquot

Line elements to achieve, in the case of high, the width, in the rollup uniformly arranged tour

Layout effects

Third, high-layout

In the same two elements of a div, and the like to achieve the effect of higher width

Layout effects

Fourth, multi-column layout

Implement multi-column layout (width, non width, gap)

Layout effects

Adaptive convenient display effect, can view the code

V. Administration layout (centered vertically)

Two div elements, small box big box up and down, left and right in the middle

Six full-screen layout

Mainstream interface layout effects common header, body, foot of

Seven, three layout

Three elements assessed width

Eight, the Holy Grail layout

Head + tail layout

Layout effects

Nine, Flying wing

left + item + right （left = right）

Layout effects

Ten, is centered horizontally

Elements implemented inside the effect is centered horizontally

Layout effects

Eleven, css layout special finishing

1. Quick html div element located at the top or bottom