Tips for CSS page layouts

Layout

CSS is essential for the purpose of CSS design.

CSS layout and a few years before the table when the layout is not the same, after the structured semantic HTML document, CSS in the format of the document rendering effect, the structured document in the presentation of language to describe. In short, CSS does not require a performance label!

CSS layout technology relies on three basic concepts: positioning, floating, margin manipulation. There is no essential difference between layout techniques, and the same layout allows 100 front-end development engineers to do so, and there may be 100 ways.

Center

In the table era, align and valign quite easy to use, but there is no simple way to implement in the CSS, so in the standardization has just begun to promote, many refactoring projects in the middle of the problem has become a stumbling block to the standardization of progress.

1. Automatic external Patch Horizontal Center

In general, the horizontal center is easier to achieve, only need to center the container to set the width, as well as the automatic level outside the patch can be. Web page Teaching Network

For example, HTML is as follows:

CSS is as follows: Web Teaching Network

body{}

. wrapper{width:760px;margin:0 Auto;}

It's simple, isn't it? But there's a little problem ... In our dear IE family, ie5.x and IE 6 do not support automatic patches, but it is also fortunate that IE will understand text-align:center as all things centered, not just text. Haha, you can use this bug.

Change CSS to:

Body{text-align:center;}

. wrapper{width:760px;margin:0 Auto;text-align:left;}

Here to use a kind of hack, but will not affect other browsers hack is good hack, oh, the first so use it ~

Wait, it seems that Netscape has a problem, with Netscape 6 to narrow the window to less than the width of the container, the left side of the container will run to the outside of the screen, and there is no scroll bar ... The Devil of the browser war ah ...

To change our CSS:

Body{min-width:760px;text-align:center;}

. wrapper{width:760px;margin:0 Auto;text-align:left;}

This is basically OK. Web Teaching Network

2. Positioning method Horizontally Centered

We can do this with a slightly more complex positioning method. The so-called positioning method is to use the Position property to define the container location. Web page Teaching Network

Also, using the HTML code of the example above,

We use the positioning method of CSS as follows:

body{margin:0;padding:0;}

. wrapper{position:relative;left:50%;width:760px;margin-left:-380px;}

Why use relative positioning (relative)? Can I use absolute positioning (absolute)?

Absolute positioning is certainly possible, but absolute positioning will bring the container to the document stream, let the following document flow to the location of the container position, a little attention will be made as a container to cover the later content, and relative will not bring the container file flow, the subsequent document flow to the location of the container left its space.

3. Vertically Centered

CSS in the larger problem arises, CSS more difficult to use a simple method to complete the vertical center. Web Teaching Network

To center text vertically in a container, you can do this by setting the container's line-height as height.

But it's more complicated to have the container vertically centered.

HTML is as follows:

123

CSS is as follows:

body{margin:0;padding:0;height:100%;}

. wrapper{display:table-cell;vertical-align:middle;width:600px;height:400px;border:solid 1px Red;

#box {width:200px;margin:auto;vertical-align:middle;border:solid 1px blue;}

This is supposed to be the case, but ie below a little effect is not ... That is because the display property of IE only receive: block, inline, Inline-block, none, inherit, do not receive table, Table-cell, table-row, that headache ah.

Well, there are a lot of ideas, and I offer one of them:

CSS is as follows:

body{margin:0;padding:0;height:100%;}

. wrapper{width:600px;height:400px;border:solid 1px Red;

#box {width:200px;height:200px;position:relative;top:50%;left:50%;margin-top:-100px;margin-left:-100px;border: Solid 1px Green;}

Limitations are very large, you must know the height ...

You can also hack the IE browser after filter. Using IE's unique expression, although the expression performance on large scripts is very poor, but the simple calculation of offsetheight is still not very affect performance, how to say m$ also for the expression has been optimized.

So vertically centered or to see the occasion to choose the appropriate solution to solve.

Floating layout

Now everyone is familiar with the floating layout, not to say, this is the basis of CSS layout ... It is mainly the rational application of float and margin.

Faux Columns:

Another invention of the great Dan, oh, in fact very simple, with a vertical tile background to make a visual layout of multiple columns and other high effects. But it's practical, isn't it?

Equal Height boxes with CSS:

In the standard implementation process, one of the more well-known articles, such as table for CSS layout, but does not apply to IE ... Alas

Flexible layout

Very good idea, the principle is not difficult, is to use EM to mark the size, so that the browser can enlarge or shrink any container or element.