Self-adaptation
How to center the entire content of the page, and how to fit the content automatically to scale. This is the most common problem in learning CSS layouts. A practical example is given below and explained in detail. (This article's experience and is the Blue Ideal forum Xpoint, Guoshuang the discussion to come together. )
First Click here to see the actual operation effect , this page in Mozilla, opera and IE browser can achieve center and highly adaptive. Let's analyze the code:
Complete code
header
class= "Text" >right
1
1
1
1
1
footer
Code Analysis
First we define the body and the top of the first line #header, which is the key inside the body of the text-align:center; And the Margin-right:auto;margin-left:autoin the header, to center the header with these two sentences. Note: In fact, the definition of Text-align:center has been implemented in IE center, but in Mozilla is not valid, you need to set Margin:auto, you can achieve the center of Mozilla.
Next, define the two columns #right and #left in the middle. In order for the middle two columns to also be centered, we nested a layer #contain outside them and set the Margin:auto for the contain, so that #right and #left are centered naturally.
Note the order in which the middle two columns are defined, we first define the #right through the float:right; Let it float on the far right of the #contain layer. Then define #left, through float:left; Let it float on the left side of the #right layer. This is the opposite of the order we defined in the previous table from left to right (correction: first left and right, or right after the left can be achieved, according to their own needs to design).
We see a layer #mainbg between #contain and two columns in the code, what does this layer do? This layer is used to define the background of the #contain. You are sure to ask, why not define the background directly in the #contain, but to set a more layer? That's because the background defined directly in #contain is not shown in Mozilla, and you must define a height value. #right层就无法实现根据内容的自动伸缩 If the height value is defined. In order to solve the problem of background and height, it is necessary to increase such a #mainbg layer. The trick is to #mainbh this layer to define float:left, because float makes the layer automatically have wide and high properties. (For the moment to understand this:)
Finally, define the #footer layer at the bottom. The key to this definition is:clear:both, the role of this sentence is to cancel the #footer layer of floating inheritance. Otherwise, you will see the #footer cling to the #header display, not underneath the #right.
The main layer is defined and the layout is OK. Add: You see I also define a . text{margin:0px;padding:20px, which is the role of the class to make the content of the periphery of 20px blank. Why not directly in the #right definition of margin or padding, because Mozilla and IE to the CSS box model of the interpretation of the inconsistent, direct definition of margin/padding will cause the layout of Mozilla variant. I generally use the internal and another layer of practice to solve.