List CSS Layout standards

Looking back on history, CSS1 in 1996.12.17, it was born to support the rendering of HTML.
1998.5.12,css2 the official version of the FA. A revised version of CSS2.1 was subsequently issued, correcting some errors in the CSS2. Note from the CSS2, the role of CSS is not an auxiliary display, become fully responsible for the show.
(Note: The errata of the year CSS2 are interested to see)

CSS2.1 Clear 2 models, one is well-known box model, CSS1 No box model concept, box model predecessor in CSS1 called box-oriented format model. The elements are abstracted into boxes, and the design of the objects is much clearer. CSS3 's box model enriches more properties. The generation of boxes and the positioning of boxes is the second model defined by CSS2.1-the visual format model (visual formatting models). CSS3-related layout standards are in fact also under this large framework.

A clear standard for CSS layouts starts with CSS2. CSS1 did not mention the layout, although the CSS1 has a FLOAT element definition, but its design is not for the page layout, just to achieve the text wrap. The early use of the table layout is logical. CSS2 is 98 into the recommended standard, it should be at this time to popularize the new CSS layout standards, but the use of table layout has been maintained until 2004 was Jeffrey Zeldman that book Point awake. 05 its Chinese version of the "website Reconstruction" published, the domestic wave of reconstruction. Early Web developers were software-educated (Frontpage, Dreamweaver, etc.), with no standard concept at all.

So instead of just mastering some tools (including some libraries), learn CSS from the standard. This is a cautionary tale.

Back to the layout of the topic. The layout of CSS2.1 is divided into 3 types:
1. Regular stream (normal flow)
2. Float (float)
3. Absolute positioning (Absolute Position)

These 3 types cannot be mixed. If you see Position:absolute;display:block in your code, this is obviously a conceptual mess. Many people also mistakenly put position:relative and position:absolute into one category. Position:relative is one of the regular streams, with the exception that it can be used with float. For an explanation of the CSS2.1 layout, see here: http://kejun.github.io/bootcamp_htmlcss/?5.

IE6-era neglected conventional flow layouts:
1. Inline-block. Compatibility: http://caniuse.com/#feat =inline-block, trigger IE haslayout can achieve similar effect, so that can be compatible with IE6/7, gradually be widely used.
2. CSS Table. Compatibility: http://caniuse.com/#feat =css-table, only incompatible Ie6/7, was buried in the IE6 era. With the IE6/7 fade out finally have doomed.

"The misuse of float is like the abuse of table that year." Many people design the layout without thinking of float, obviously lack of more understanding of the layout technology. Especially when low-end browsers fade away and new layout technologies are at your fingertips, it's time to learn how to practice these new technologies. Before doing a demo, with 6 ideas to achieve the same two-column layout: http://dabblet.com/gist/4094139. After reading this article, you can have more ideas for implementation.

The CSS3 out today is just a general term. There is a CSS level of 1,CSS Level 2, and today there is no CSS level 3. Most of the new standards on the CSS2.1 are still in WD state, with CSS Color level 3 and selectors levels 3 entering rec state.

(Note: Pd–public Draft, public draft, preliminary ideas.) There is no shortage of PD after it was discarded. Wd–working Draft, working draft. Someone has started revising it. Lc–last call, announced to the outside. Cr–candidate recommendation, candidate recommendation. Rec–recommendation, formally recommended. Which is the official version of the standard. These states only describe the stable state of the standard. Browser vendors from their own interests, selectively support some of the standards are still in the WD state. A variety of vendor prefixes are then present. Standard development, browser manufacturers in the competition, the bitter force is the developer. ）

The new layout standard makes it easier and more flexible to implement layouts. CSS3 currently has 5 layout options:
1. Multi-column layouts (multi-column layout)
2. Flexible box layouts (flexible box layout)
3. Grid layouts (Grid layout)
4. CSS3 floating box (CSS3 floating Boxes)
5. Regions

Multi-column Layout
Current Status: CR
History: 1999.6.23 pd,2009.12.17 into CR status
Compatibility: http://caniuse.com/#feat =multicolumn
demo:http://dabblet.com/gist/5507829,
Problem:
1. Only the average column is currently available, and it is not supported to specify the width of the columns (in the future).
2. Browsers support different old and new standards.
For example, the Div.intro content in the example above wants to remain in one column, and Chrome supports Column-break-inside:avoid, which is the standard in WD, which was updated in 2005.12.15. It is assumed that Chrome is following the WD standard for 05. The current CR standard has been changed to Break-inside. Firefox20 still achieves the WD standard of 2001.
3. Multi-column layouts are more suitable for content flow layouts and are not suitable for page layouts.

Flexible Box Layout
Current Status: CR
History: 2009.7.23 PD, 2011.3.22 WD status, 2012.9.18 into CR status
Compatibility: http://caniuse.com/#feat =flexbox
demo:http://dabblet.com/gist/5508104
Understanding it is divided into two parts: Flex container (Flex Container) and Flex items (Flex Item).
1. Once the Flex container (Display:flex) is defined, its first-level sub-elements (inline box/block box/anonymous box) can be arranged horizontally or vertically (flex-direction, default row) and can be aligned on one side (flex-wrap), you can specify the alignment (Justify-content). Each flex item defaults to equal height (align-items, default stretch).
2. When flex items do not refer to flex properties, the width is determined by the width of the actual content.
3. Flex items can specify at what scale to fill the blanks. Such as:
The. List li {flex:1;} is filled evenly.
. List Li:nth-child (1) {flex:4; background: #f80;} In this example, Flex Item 1 has a width of 4/8.
4. Flex properties can be animated.
5. Flex items can be controlled in order (order, default 0, value high in the back).
Reference: HTTP://D.HATENA.NE.JP/TERAMAKO/20121021/P1

Once on the Weibo: "To achieve an indefinite width of the layer, horizontally vertically in the window center," With the Flex box can be easily implemented:
html,body {height:100%;}
body {display:flex;justify-content:center;align-items:center;}

(Grid) Template Layout (formerly known as Advanced Layout)
Current Status: WD
History: PD was issued in 2005.12.15 and entered WD in 2007.8.9. Final Merge into Grid Layout

Grid Position
History: PD was issued in 2007.9.5 and subsequently abandoned

Grid Layout
Current Status: WD
History: 2011.4.7 pd,2012.3.22 into WD status, the latest version is 2013.4.2
Compatibility: http://caniuse.com/#feat =css-grid,
With this compatibility is not worth learning it. There was a draft based on frame layout in 1996. At that time did not go to this road, and eventually absolutely positioning into the CSS2. Grid layout is built on top of it.

CSS3 floating box (CSS3 floating Boxes)
Current Status: WD
History: 2002.10.24 appears in the draft of the CSS basic box model.
CSS3 's floating box is too futuristic and has no browser support. Like what:
Float:right Contour; Contour keywords, text can be wrapped around an irregular outline of the picture.
Min-height:contain-floats; A new way to clear the float
Float-displace:block; The new Float-displace property

Regions and shapes
Current Status: WD
History: Released in 2011.6.9 PD, 2011.11.29 WD status, the latest version of WD is 2012.8.23
Compatibility: http://caniuse.com/#feat =css-regions
demo:http://dabblet.com/gist/5509294 Chrome 19+, ie10+
It applies to the content flow layout. Compatibility is limited, you can see it first.

List CSS Layout standards