8th Chapter Layout

CSS layout technology is fundamentally 3 basic concepts: positioning, floating, margin manipulation .

A plan layout

1 page Large structure ———— focus on the content area ( looking for common features rather than visual representation, looking for repeating patterns ) ———— looking for different layouts in the content

Two design basic structure

Wrapper,header,content,footer

　　the problem of centering the design with the margin: . wrapper{width:920px;margin:0 Auto;}

Hack: IE5 and IE6 in promiscuous mode do not support margin:auto; but IE will text-align:center; it is misunderstood to center everything. So you can center all the elements in the label, and then let the contents of the container be left-aligned again.

Body{text-align:center;}

. wrapper{width:920px; margin:0 auto; text-align:left;}

Three floating-based layouts

　　The usual way to clean up floats is to float almost everything and then "strategic point" to clean up once or two times, or use the overflow method.

　　Two-column floating layouts:

<div class= "Content" > <div class= "PRIMARY" ></div><div class= "secondary" >/* the secondary content will be on the left, But putting the main content in front is because the main content is the most important part of the page, so it should appear first. Second, you can conveniently screen reader users. </div><div class= "Footer" ></div></div>

Iebug: In a standard-compliant browser, if the element content is too large, it will be outside the box, but in IE, the entire element expands, forcing one column to fall below the other column. The reason is that IE considers the size of the element content rather than the size of the element itself. The factors that cause content expansion may be small things, such as setting italic, which causes floating elements to recede in tight layouts. Other iebug such as pixel text offset and double margin float, and each browser's rounding error will cause the floating element to drop.

Therefore, instead of using horizontal margins or padding, you can set one element to float on the left and the other right to float.

　　

{    overflow: hidden;}  {   width: 650px;   Padding-right: 20px;   float: right;
  display:inline;/* prevent double margin floating in IE bug*/}{   width: 230px;   Float:  Left
  

three-column floating layouts: similar to two-column layouts, except that two new Div is added to the main content div.

Fixed width, flow and flex layouts:

Flow layout: Size is set in percent for efficient use of space

Disadvantage: When the window width is small, the line is difficult to read-add min-width in pixels or em;

When the window width is large, the line becomes longer and difficult to read----use percentages to set the padding or margin; span only part of the container; set max-width;

Liquid Fold tool: Calculate the proportion

Elastic layout: Sets the element width in EM units relative to the font size. The layout increases as the font size increases.

Disadvantage: the inability to make full use of space may cause a horizontal scrollbar to appear. ----Container div add 100% max-width (js in IE6)

Tip: Set the base font size so that 1em is about 10px; font-size:62.5%;(Browser default you font size 16 pixels)

Other: Container width em, others in percent. Easily modify the overall layout size without modifying the width of each pixel.

Flow and elasticity affect fixed-width images: 1 Use a background image instead of an image element. 2 {Width:100%;overflow:hidden;} 3 Add an image to a page without any size, set the image percentage width, and use max-width to avoid distortion.

Four faux columns

Temporary space//

Five columns of the same height

Set the large bottom padding to eliminate this height with a negative margin of similar value, with a 20 pixel difference forming the bottom edge; the container Overflow:hidden; the column will be cropped at the highest point.

Finally, locate the bottom border.

　　

　　　　

<style>. Wrapper{width:100%;Overflow:Hidden;position:relative; }. Box{width:250px;float: Left;Margin-left:20px;Padding-left:20px;Padding-right:20px;Padding-top:20px;Padding-bottom:520px;Margin-bottom:-500px;background:URL (img/top.gif) no-repeat top Left;Display:inline;/*ie double margin floating*/}. Bottom{position:Absolute;Bottom:0;width:290px;Height:20px;Margin-left:-20px;background:URL (img/bottom.gif) No-repeat Bottom left; }</style>

Six CSS3 columns

CSS3 Create an equal-height text column: column-count;column-width;column-gap;

When the free space is less than the defined column width, the column does not surround, but decreases the number of columns. For example, create a three-column layout with this attribute, and if the space is not realistic three columns, it will be reduced to two columns.

8th Chapter Layout