css| Web page
css layouts are common methods:
Float:none | left |
Take value:
None: default value. object does not float
Left: text flows to the right of the object
Right: text flows to the left of the object
How does it work, look at a row and two columns of examples
XHTML:
<div id= "Wrap" >
<div id= "Column1" > here is the first column </div>
<div id= "Column2" > here is the second column </div>
<div class= "Clear" ></div>/* This is contrary to the Web standard intent, just to show that the elements underneath it need to be cleared for floating * *
</div>
CSS:
#wrap {width:100%; height:auto;}
#column1 {float:left; width:40%;}
#column2 {float:right; width:60%;}
. clear{Clear:both;}
position:static | absolute | fixed | relative
Take value:
Static: default value. No special location, objects follow HTML positioning rules
Absolute: Drag objects out of the document stream, using the left, right, top, and bottom attributes to be absolutely positioned relative to their nearest parent object with the most location setting. If no such parent object exists, it is based on the body object. And its cascade is defined by the Z-index property
Fixed: not supported. Object positioning conforms to an absolute (absolute) approach. But there are some rules to follow.
Relative: objects cannot be stacked, but will be offset from the normal document flow based on the properties of left, right, top, bottom, etc.
It to implement an example of a row and two columns
XHTML:
<div id= "Wrap" >
<div id= "Column1" > here is the first column </div>
<div id= "Column2" > here is the second column </div>
</div>
CSS:
#wrap {position:relative;/* relative positioning */width:770px;}
#column1 {position:absolute; top:0; left:0; width:300px;}
#column2 {position:absolute; top:0; right:0; width:470px;}
What is the difference between them?
Obviously, float is relative positioning, will change with the browser size and resolution changes, and position is not, so generally or float layout!
2.CSS Common Layout instances
a column
single row one column
body {margin:0px; padding:0px; Text-align:center; }
#content {Margin-left:auto; Margin-right:auto; width:400px; }
two rows and one column
body {margin:0px; padding:0px; Text-align:center;}
#content-top {margin-left:auto; Margin-right:auto; width:400px; }
#content-end {margin-left:auto; margin-right:auto; width:400px; }
three rows one column
body {margin:0px; padding:0px; Text-align:center; }
#content-top {margin-left:auto; Margin-right:auto; width:400px; width:370px; }
#content-mid {margin-left:auto; margin-right:auto; width:400px; }
#content-end {margin-left:auto; margin-right:auto; width:400px; }
two columns
single row two columns
#bodycenter {width:700px;margin-right:auto; margin-left:auto;overflow:auto; }
#bodycenter #dv1 {float:left;width:280px;}
#bodycenter #dv2 {float:right;width:420px;}
two rows, two columns.
#header {width:700px; margin-right:auto;margin-left:auto; overflow:auto;}
#bodycenter {width:700px; margin-right:auto; margin-left:auto; overflow:auto;}
#bodycenter #dv1 {float:left; width:280px;}
#bodycenter #dv2 {float:right;width:420px;}
three rows, two columns
#header {width:700px;margin-right:auto; margin-left:auto; }
#bodycenter {width:700px; margin-right:auto; margin-left:auto; }
#bodycenter #dv1 {float:left;width:280px;}
#bodycenter #dv2 {float:right; width:420px;}
#footer {width:700px; Margin-right:auto; Margin-left:auto; Overflow:auto; Clear:both; }
three columns
single row three columns
Absolute Positioning
#left {position:absolute; top:0px; left:0px; width:120px; }
#middle {margin:0px 190px 0px 190px;}
#right {position:absolute;top:0px; right:0px; width:120px;}
Float Positioning
XHTML:
<div id= "Wrap" >
<div id= "column" >
<div id= "Column1" > here is the first column </div>
<div id= "Column2" > here is the second column </div>
<div class= "Clear" ></div>/* usage Web standards are not recommended, but remember that the following elements need to be cleared for floating * *
</div>
<div id= "Column3" > This is the third column </div>
<div class= "Clear" ></div>/* usage Web standards are not recommended, but remember that the following elements need to be cleared for floating * *
</div>
CSS:
#wrap {width:100%; height:auto;}
#column {float:left; width:60%;}
#column1 {float:left; width:30%;}
#column2 {float:right; width:30%;}
#column3 {float:right; width:40%;}
. clear{Clear:both;}
Float Positioning two
XHTML
<div id= "center" class= "column" >
</div>
<div id= "left" class= "column" >
</div>
<div id= "Right" class= "column" >
</div>
CSS
Body {
margin:0;
padding-left:200px; /* LC Fullwidth * *
padding-right:190px; /* RC Fullwidth + CC padding * *
min-width:200px; /* LC Fullwidth + CC padding * *
}
. column {
position:relative;
Float:left;
}
#center {
width:100%;
}
#left {
width:200px; * LC Width * *
right:200px; /* LC Fullwidth * *
Margin-left:-100%;
}
#right {
width:190px; /* RC Width * *
Margin-right:-100%;
}
/*** IE Fix ***/
* HTML #left {
left:190px; /* RC Fullwidth * *
}
two rows, three columns.
XHTML:
<div id= "Header" > this is the top line </div>
<div id= "Warp" >
<div id= "column" >
<div id= "Column1" > here is the first column </div>
<div id= "Column2" > here is the second column </div>
<div class= "Clear" ></div>
</div>
<div id= "Column3" > This is the third column </div>
<div class= "Clear" ></div>
</div>
CSS:
#header {width:100%; height:auto;}
#wrap {width:100%; height:auto;}
#column {float:left; width:60%;}
#column1 {float:left; width:30%;}
#column2 {float:right; width:30%;}
#column3 {float:right; width:40%;}
. clear{Clear:both;}
three rows, three columns
XHTML:
<div id= "Header" > this is the top line </div>
<div id= "Wrap" >
<div id= "column" >
<div id= "Column1" > here is the first column </div>
<div id= "Column2" > here is the second column </div>
<div class= "Clear" ></div>
</div>
<div id= "Column3" > This is the third column </div>
<div class= "Clear" ></div>
</div>
<div id= "Footer" > here is the bottom line </div>
CSS:
#header {width:100%; height:auto;}
#wrap {width:100%; height:auto;}
#column {float:left; width:60%;}
#column1 {float:left; width:30%;}
#column2 {float:right; width:30%;}
#column3 {float:right; width:40%;}
. clear{Clear:both;}
#footer {width:100%; height:auto;}
PS: Here is a list of commonly used examples, rather than the use of research, for a single box, I have not set margin,padding,boeder and other attributes, because I personally feel that with the width of the positioning, it is best not to use them, unless the Birburd, because if not so, Solve the browser compatibility problem, will make you headache, and produce a series of CSS code, I think this efficiency and effect are not good!
3.CSS Layout Advanced Techniques
Margin and padding are always likely to be used, and the problems that arise are solved? Because the browser interprets the container width in different ways:
IE 6.0 Firefox Opera etc is
true Width =width+padding+border+margin
IE5. X
true Width =width-padding-border-margin
The double distance bug (ie doubled float-margin bug) in IE has the floating object, here also needs the concrete question concrete solution, the following is the solution
www.forest53.com/tutorials/tutorials_show.asp?id=31
Obviously, the first kind of perfect layout in the second case the consequences are very miserable!
The solution is hack .
div.content {
width:400px; This is the wrong width, all browsers have read
voice-family: "}\" "; IE5. X/win ignores the contents of "\"}\ ""
Voice-family:inherit;
width:300px; Some browsers, including Ie6/win, read the phrase, and the new value (300px) overwrites the old
}
Html>body. Content {//html>body is CSS2 's writing
width:300px; Browsers that support CSS2 (non-IE5) have the honor to read this sentence
}
div.content {
width:300px!important; This is the correct width, most browsers that support!important tags use the values here
Width (space)/**/:400px; Ie6/win does not parse this sentence, so Ie6/win still think the value of width is 300px, and Ie5.x/win reads this, the new value (400px) covers the old, because the!important tag doesn't work for them.
}
Html>body. Content {//html>body is CSS2 's writing
width:300px; The browser that supports CSS2 this writing is fortunate to have read this sentence
}
column and other high skills
n row n column layout, each column height (cannot determine which column height in advance) is the same, is each designer pursues the goal, the practice has: the background picture fills, adds the JS script the
Methods are combined with the container overflow part hiding and the negative bottom boundary of the column and the positive inner patches.
Background Figure filling method:
Xhtml:
<div id= "Wrap" >
<div id= "Column1" > This is the first column </div>
<div id= "Column1" > This is the second column </div>
<div class= "Clear" ></div>
</div>
Css:
#wrap {width:776px background:url (bg.gif) repeat-y 300px;}
#column1 {float:left; width:300px;}
#column2 {float:right; width:476px;}
. clear{Clear:both;}
is a picture of a npx wide in the external container longitudinal repeat, positioning to two columns staggered position longitudinal Repeat, visually generated two columns of the same height illusion
