Css
1.CSS Layout Common methods:
Float:none | Left | Right
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= "Warp" >
<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: ie 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= "Warp" >
<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
one column (centered)
single row one columnbody {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= "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>/* 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>
CSSBody {
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= "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>
<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/win
True width =width
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
http://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 are read, including Ie5.x/win
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 read this, the new value (400px) overrides the old, because the priority of the!important tag does not work for IE
}
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
}
Click the link below to view the details
http://www.blueidea.com/tech/site/2006/3170.asp
http://www.jluvip.com/blog/article.asp?id=114
http://www.jluvip.com/blog/article.asp?id=237
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
JS Scripting method:
http://www.blueidea.com/bbs/NewsDetail.asp?id=2453983
The principle of the code is basically the case, read the height, judge the height, height is equal, the following has a high left-right example <script language= "JavaScript" >
document.getElementById ("left"). Style.height=document.getelementbyid ("Middle"). scrollheight+ "px"
document.getElementById ("right"). Style.height=document.getelementbyid ("Middle"). scrollheight+ "px"
</script>
a method of combining the container overflow part hiding and the negative bottom boundary of the column and the positive inner patch
This article is very detailed.
http://www.blueidea.com/tech/web/2006/3210.asp
And also
http://www.jluvip.com/blog/article.asp?id=151
Mansi Height layout (narrowest 770px widest 1024px classic layout)
http://www.blueidea.com/tech/web/2005/3124.asp
Today and a netizen two days, he mentioned: to a foreign company to do a website, request 1.800x600 full screen. 2.1024x767 full screen. 3.1280 centers below. 4. Don't use JS.
I suddenly thought of this article, haha! The thing that feels incredible is solved! But there seems to be something wrong with IE5!
At this point, the layout from the most basic knowledge points to the high-level application of the collation of a time, there are omissions please follow up with the supplement, the only defect is the example demo is not enough, due to the relationship, forgive me!
Note: <div class= "clear" >....</div> according to the structure standard of the Web Standard, this is a garbage structure, a good solution (: After (pseudo object)) in
http://www.blueidea.com/tech/web/2005/3065.asp
