[Web] CSS (No.23) version of the heart and layout process

Version of the heart and layout process

Click on the image material needs or contact me private letters, comments

Easy to find time to read the newspaper, although the content of many newspapers, but after a reasonable typesetting, layout is still clear and easy to read. Similarly, in the production of web pages, in order to make the page a clear structure, organized, also require web pages "layout."

"Version of the heart" (viewing area) is an area where the main content of the page. In general the level of the browser window centered common width is 960px, 980px, 1000px, 1200px like.

Layout Process

To improve the efficiency of creating web pages, when the layout is often required to comply with certain layout process, as follows:

1. Determine the page version of the heart (viewing area).

2. Analysis of page-line modules, each row and column module module.

3. Making HTML structure.

4. CSS is initialized, and then begin to apply the principles of the box model, each module is controlled by DIV + CSS page layout.

A fixed width and centered

The most common, the most common structure

Two left and right narrow-width type

Such as millet millet official website

Banner average profile

For example hammer hammer official website

Clear float

Life is like a ride Beijing subway line:

Via international trade, the envy of downtown;

Passing through Tiananmen Square, fantasy power;

Via Street, dream fortune;

After Gongzhufen, Way back gorgeous family;

After Yuquan Road, still ambitious ...

At this time, a voice floated ear: Hello passengers, Babaoshan is coming soon!

Suddenly realize: Life is short, beginnings and ends.

We like floating, floating start, then there should be the end of the float.

Why do you want to clear the floating

As we have said, are essentially used to do some floating text and words, but we are used to do with the layout, you have a lot of problems.

Since the float position of the original document flow is no longer occupied, it will affect the layout elements behind, in order to solve these problems, then you need to clear the floating element.

Rather, floating is not clear, but cleared after the impact caused by the float

If you float the beginning of a beautiful mistake, then save it with the correct method.

Clear float nature

Clear float in order to solve the main elements of the parent because the child floating height caused internal problems 0.

Clear float method

In fact, nature is called the floating closed better, remember, is to remove the floating box ring float to the inside, so closing the inlet and outlet boxes parent would not let them out of the influence of other elements.

In CSS, Clear property for removing floating, the basic syntax is as follows:

选择器{clear:属性值;}

Property Value	description
left	Floating elements are not allowed on the left side (left side scavenging floating)
right	Does not allow floating elements on the right side (right side scavenging floating)
both	Effect clears both the right and left floating

Additional labeling law

W3C is recommended practice by adding, for example, an empty tag at the end of the floating element <div style=”clear:both”></div>can, or the like other labels br.

Advantages: easy to understand, easy to write

Disadvantages: add many meaningless tag, structured poor.

Parent Adding overflow property method

It can be triggered by the BFC, to clear floating effect can be achieved. (BFC explain later)

Can be added to the parent level: overflow is hidden | auto | scroll can be achieved.

Advantages: concise code

Disadvantages: increased when the content is not likely to cause wrap causes the contents to be hidden away, can not display elements need to overflow.

Clear float after using pseudo-element

: After method is an upgraded version of an empty element, the benefits are not individually labeled a

Instructions:

 .clearfix:after {
                  content: "."; 
                  display: block; 
                  height: 0; 
                  clear: both;
                  visibility: hidden;
 }   

 .clearfix {
            *zoom: 1;
}   /* IE6、7 专有 */

Advantages: in line with the closed floating structure thought correct semantics

Cons: Because IE6-7 does not support: after, use zoom: 1 trigger hasLayout.

Representatives Web site: Baidu, Taobao, Netease,

Note: content: "." Inside as much as possible with a small point or other, try not to be empty, otherwise the firefox versions prior to 7.0 will generate a space.

Sample code:

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="UTF-8">
	<title>版心</title>
	<style>
	  * {
	  	margin:0;
	  	padding:0;
	  }

	  .head {
	  	height:200px;
	  	background-color: #aaa;
	  	margin:0 auto;
	  }

	  .content {
	  	width:1200px;
	  	margin:20px auto;
	  }

	  .content .top {
	  	height:100px;
	  	background-color: #222;
	  }

	  .content .center {
	  	height:200px;
	  	background-color: #333;
	  	margin:20px 0;
	  }

	  .content .center div {
	  	width:292.5px;

	  }

	  .content .bottom {
	  	height:100px;
	  	background-color: #444;
	  }

	  .foot {
	  	height:200px;
	  	background-color: #bbb;
	  	margin:0 auto;
	  }
	</style>
  </head>
  <body>
	<div class="head"></div>

	<div class="content">
	  <div class="top"></div>
	  <div class="center">
	    <div class="m10"></div>
	    <div class="m10"></div>
	    <div class="m10"></div>
	    <div class="m10"></div>
	  </div>
	  <div class="bottom">
	    <div class="m10"></div>
	    <div class="m10"></div>
	    <div class="m10"></div>
	    <div class="m10"></div>
	  </div>
	</div>

	<div class="foot"></div>
  </body>
</html>