Div+css New beginning of Web layout design (6)

Then test

This IE6 and Firefox is the same, notice that the green is not 40px but 20px


 Only the vertical margins of the block box in the normal document flow will occur when the margin merges. Margins between inline boxes, floating boxes, or absolute positioning are not merged. 
 
 The following is the flow of the document, knowing the concept of the stream, to say that the positioning of the 
 CSS has three basic positioning mechanism: normal flow, floating and absolute positioning 
 unless specifically specified, otherwise all boxes are positioned in the normal stream. That is, the position of an element in a normal stream is determined by the position of the element in the (X) HTML. Block-level boxes are arranged from top to bottom, and the vertical distance between boxes is calculated from the vertical margin of the box. The inline box is arranged horizontally in a row. You can use horizontal padding, borders, and margins to adjust their spacing. However, vertical padding, borders, and margins do not affect the height of the inline box. A horizontal box formed by a row is called a line box, and the height of the row box is always sufficient to hold all the inline boxes it contains. However, setting the height of the row can increase this box. 
 
 Flow is like running water, from top to bottom, from left to right, just like Word documents you inserted text in the middle of the text, the following text will automatically squeeze open, the general layout of the page is also 
 
 first say the concept of the Block 
 Div, H1 or P elements are often called block-level elements. This means that these elements appear as a piece of content, the "block box". In contrast, elements such as span and strong are called "inline elements," because their content is displayed in the row, which is the "inline box." 
 
 Simply put, the block element if you do not specify the width, he default width is 100%, that is, the browser is the same width and automatically add a <br/> 
 so two div you even set the width of 100px will not be horizontal together The 1th Div will force the 2nd Div to wrap, and the 2nd Div will force the 3rd div to wrap .... 
 The element in the line does not have a width height, he is a line, you direct CSS to specify the width of the high invalid, but his width can only be changed with the content of the 
 block and in-line elements, both may become each other, with the display property 
 
 said float floating 
 
 Let's get a big box 



We know that if there are 2 div in the big box, then the 2 div will not be horizontally arranged.



If you want them to be arranged horizontally, you have to use float.



What happens if the 2nd Div does not set a float? 

You can see the same, but the median spacing is 2px, indicating that the margins of the two div levels are not coincident
The vertical will, the concrete also to practice to verify



Now look at the Firefox browser


What's the one left? Actually, it's a two div coincidence.
The specific letter which browser, of course, is based on Firefox as standard

The floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box. Because the float box is not in the normal flow of the document, the Block box in the normal flow of the document behaves as if the floating box does not exist.

How to understand this sentence?
Can think of this big box as an airport, Div is a plane
A div without a float is a plane parked on the ground, a float div is a plane in the air
The div of float does not occupy the space of the ground div, so they overlap, which means that one is on the ground in heaven, and that's why it's called floating, because it's a div floating in the air.

The above is div+css page layout design New Beginning (6) content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

