CSS Common Layout Implementation method

CSS layout for me, both familiar and unfamiliar. I can not only realize it, but also do not have a good understanding of it. So want to summarize, comb the CSS commonly used in a column, two columns, three columns layout and other implementation methods. This article is small white, for reference only. But also to understand the floating, positioning and so on.

One or one column layout

1. Center width

This is the simplest and easiest to implement layout. List the most core CSS code:

Body{text-align:center;font-size:2em;}. head,.main,.footer{width:960px;margin:0 Auto;}. Main{background-color: #666666; height:600px;}. Footer{background-color: #999999; height:200px;}

Among them, the most important is the margin property, when the element is set to the width, margin:0 Auto can automatically let the element center.

2. Self-adapting

This is also very simple, just set the width property of the elements in the CSS code above to a percentage, which allows the browser to automatically calculate the width of the element.

Second, two-column layout

1. Fixed width

This should also be no difficulty, just set the corresponding width of the good. Put the code here:

Body{text-align:center;font-size:2em;}. main{width:960px;height:900px;margin:0 Auto;}. Left{width:300px;height:900px;background-color: #eee; float:left}.right{width:660px;height:900px; Background-color: #999; float:right;}

This involves the float property, which is often said to float. One floats to the left, one to the right, and a two-column layout happens. ‘

2. Self-adapting

It is simple to replace the value of the Width property with a percentage.

Body{text-align:center;font-size:2em;}. main{width:80%;height:900px;margin:0 Auto;}. Left{width:30%;height:900px;background-color: #eee; Float:left}.right{width:70%;height:900px;background-color: # 999;float:right;}

Note: The parent element is also set to a percentage.

Three or three column layout

1. Fixed width around

Body{text-align:center;font-size:2em;margin:0;padding:0}.main{height:900px;background-color: #ddd; margin:0 240px ;}. Left{width:240px;height:900px;background-color: #eee;p osition:absolute;top:0;left:0}.right{width:240px;height: 900px;background-color: #999;p osition:absolute;top:0;right:0}

The main point here is to use absolute positioning, and let the middle margin around the width of the two sides.

2. Self-adapting

Body{text-align:center;font-size:2em;margin:0;padding:0}.main{height:900px;background-color: #ddd; margin:0 20%;}. Left{width:20%;height:900px;background-color: #eee;p osition:absolute;top:0;left:0}.right{width:20%;height:900px ; Background-color: #999;p osition:absolute;top:0;right:0}

In the same way, it is replaced by a percentage.

Four, mixed layout

Finally, a big synthesis in front.

<! DOCTYPE html>
　　
CSS Common Layout Implementation method