Common CSS layout implementation methods and css layout implementation

Common CSS layout implementation methods and css layout implementation

CSS layout is both familiar and unfamiliar to me. I can implement it without knowing it well. So I would like to summarize the implementation methods of one column, two columns, and three columns commonly used in CSS. This article is for reference only. But you also need to know about floating and positioning.

I. layout of one column

1. Center fixed width

This is the simplest and easiest layout to implement. List the 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 thing is the margin attribute. When the width is set for the element, margin: 0 auto can automatically center the element.

2. Adaptive

This is also very simple. You only need to set the width attribute of the element in the preceding CSS code to the percentage, so that the browser can automatically calculate the width of the element.

2. Two-Column Layout

1. fixed width

This should not be difficult, just set the corresponding width. The code is posted 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;}

The float attribute is involved here, that is, floating. One float to the left and one float to the right can achieve the layout of two columns. '

2. Adaptive

It is so easy to replace the value of the width attribute with the 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 must also be set as a percentage.

3. Three-Column Layout

1. Left and Right fixed width

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;position: absolute;top: 0;left: 0}.right{width: 240px;height: 900px;background-color: #999;position:absolute;top: 0;right: 0}

Here, the most important thing is to use absolute positioning, and let the left and right sides of the margin in the middle be the width of both sides.

2. Adaptive

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;position: absolute;top: 0;left: 0}.right{width: 20%;height: 900px;background-color: #999;position:absolute;top: 0;right: 0}

Similarly, it is converted into a percentage.

Iv. Hybrid Layout

Finally, let's look at the big synthesis above.

<! DOCTYPE html>