Css elements in Layout

Why search for the Holy Grail of LayoutThe excellent Layout can make the webpage more organized and adaptable. The most important thing is to separate the content layer from the presentation layer, so as to realize progressive enhancement of front-end development and give priority to the Code content. This is why front-end programmers pursue the Holy Grail layout. 

1 relative & absolute

Relative positioning and absolute positioning are essentially separated from the normal stream of the document, but the space of the original file stream is retained, which means that the layout of the Document Stream is still affected, the absolute positioning is to delete the space in the document flow, and to leave the document flow and cover it, stubborn as a dog skin plaster. Changing the Z axis coordinates of elements in a normal Document Stream does not help. In general, there are four features. One is to delete the original location in the document stream, and the other is to overwrite the normal document stream, third, the positioning base point (0, 0) is the inclusion block by default. When the positioning of its parent element is not the default value, the base point will be in the parent element; otherwise, it will continue to look up, until the block body is initially found, and if left and top are not assigned a value, the default value is the original value in the Document Stream. Fourth, the element is defined as a block-level box by default. Relative positioning is much simpler, which is an offset relative to the original position. It is definitely positioned in the layout implementation. It has its disadvantages. When the height of the sidebar is unknown, it overwrites footer. We can also place the main content of the page at the beginning of the body through absolute positioning to further achieve the content-oriented layout. 2 float & clearWhen floating elements are set, they enter the floating stream, which is also out of the original document stream. Float is relative to the parent element, and the elements after it enter their original location space, which is likely to be hidden by the floating element. In most cases, we do not want to let the div's floating on the top of the div end, so we can clear the floating clear. Css1 and css2 do not have this attribute. At that time, we used margin to process it, while css2.1 appeared clear, and its role was to free up a space for clearing, if there is a div floating on the left, a clear space will be added to the top to achieve the previously desired effect of margin-top. 3 margin:-100%The negative margin can change the layout of the Document Stream and floating stream, so that the elements at the bottom can be placed in the front, which can make the html structure more reasonable. It enables the primary content div to be placed at the top. The left and right sidebar can be placed at the back. The following is a simple example of the layout of the negative margin. The layout of the negative margin allows people to see the dawn of decoupling between the content layer and the presentation layer. However, the compatibility in earlier IE browsers is really not good. After trying display: inline, there will also be situations such as flashing or extra following a window width at a certain value, I don't know if it is a Computer Browser problem. 4 min-width & max-widthThese are two very useful properties. min-width makes the percentage layout not crash, such as width: 100%. While max-width makes the page width not messy due to infinite expansion. Compatibility is a problem. IE browser is compatible with 7 +. In addition to inheritance, their values can be numerical values or percentages. Min-width example: the first layout puts all three divs into a div # main. The parent element does not have a simple width: 100%, this is intolerable in many websites, and 5 after min-width is set for the parent element. dual-flying wing LayoutThe dual-flying wing layout is a kind of excellent layout that is generated after comprehensive negative margin, floating, and positioning, which is highly compatible and fast to change (the change of the three-column position) and meets the content priority principle. Refer to the article. The language is not naughty because it was originally a summary for myself and I was too lazy to modify it. Let's take a look.