css elements in layout_html/css_WEB-ITnose

Why looking for the Holy Grail of layout

An excellent layout can make the organization of the web page more reasonable and the adaptability more robust. The most important thing is to realize the content layer and The separation of the presentation layer enables progressive enhancement of front-end development and prioritizing the content of the code. This is why front-end programmers chase the holy grail layout.

1 relative & absolute

Relative positioning and absolute positioning are essentially divorced from the normal flow of the document. It's just that relative positioning still retains the space that originally existed in the document flow, which means it still affects the layout of the document flow, while absolute positioning deletes the space in the document flow, breaks away from the document flow and covers it, and is as stubborn as dog-skin plaster. Changing z-axis coordinates of elements in the normal document flow doesn't help either. In general, absolute positioning has four characteristics. One is to delete the original position in the document flow, the other is to cover the normal document flow, and the third is to base the positioning (i.e. (0,0)) by default. Block, when the positioning of its parent element is not the default value, the base point is at the parent element. Otherwise, continue to search up until the initial containing block body. If left and top are not assigned a value, the default is the original one in the document. The value in the stream, fourth, is that after the definition, the element defaults to a block-level box. Relative positioning is much simpler, it is an offset relative to the original position. The following is the implementation of absolute positioning in the layout. It has its disadvantages. When the height of the sidebar is unknown, it covers the footer.

We can also use absolute positioning to put the main content of the page at the front of the body to further achieve a content-first layout.

2 float & clear

Setting floating elements will enter the floating flow, and they will also be separated from the original document flow. Floating is relative to the parent element, and subsequent elements will enter their original position space and are likely to be obscured by the floating element and not visible. And many times we don't want the floating divs on top of the div to stop, so we have clear floating clear.

There is no such attribute in css1 and css2. At that time, we used margin to process it, and css2.1 has clear. Its function is to free up a clear space. If there is a div floating on the left, it will be in the upper part. Create an extra clear space to achieve the desired effect of margin-top.

3 margin : -100%

Negative margins can change the layout in the document flow and floating flow, so that the elements that are ranked behind It can be ranked first, which can make the structure of html more rational. It allows the main content div to be on top. The left and right sidebars can be placed behind. As follows

This is a simple example of negative margin layout. Negative margin layout allows people to see the dawn of decoupling the content layer and the presentation layer. However, the compatibility with old IE browsers is really not good. After trying display:inline, there will be flickering or extra being arranged below when the window width is at a certain value. I don’t know if it is a computer browser. question.

4 min-width & max-width

These are two very useful attributes, min-width makes percentage layout not Crash, like width:100%. And max-width can prevent the width of the page from becoming cluttered due to infinite expansion. Compatibility is an issue, IE browser 7 is only compatible. In addition to inheritance, their values ​​have two forms: numerical value and percentage.

Min-width example: The first layout puts three divs into one div#main. If the parent element does not have a simple width: 100%,

will appear.

This is intolerable in many websites, and after setting the min-width for the parent element

5. Double flying wing layout

The double flying wing layout is an excellent layout that combines negative margins, floating, and positioning to produce an excellent layout that is highly compatible, fast to change (change of three column positions), and satisfies the content priority principle

Reference article: http://www.cnblogs.com/mofish/archive/2011/01/18/1938543.html

Reference website: W3C

One member of the student party, Any mistakes are welcome to be corrected. The language is not naughty simply because this was originally a summary for myself and I was too lazy to revise it. Let's just make do with it.