CSS布局高级技巧
[color=#000][font=Verdana][size=9.5pt]CSS[font=宋体]布局高级技巧[/font][/size][/font][/color][color=#000][font=Verdana][size=9.5pt]margin[font=宋体]和[/font][font=Verdana]padding[/font][font=宋体]总是有可能要用到，而产生的问题如何解决呢？由于浏览器解释容器宽度的方法不同：[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]IE 6.0 Firefox Opera[font=宋体]等是[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]QUOTE:[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]真实宽度[font=Verdana]=width+padding+border+margin[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]IE5.X[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]QUOTE:[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]真实宽度[font=Verdana]=width-padding-border-margin[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]很明显，第一种下很完美的布局在第二种情况下后果是很凄惨的！[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]解决的方法是 [font=Verdana]hack[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]QUOTE:[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]div.content { [/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]width:400px; //[font=宋体]这个是错误的[/font][font=Verdana]width[/font][font=宋体]，所有浏览器都读到了[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]voice-family: "\"}\""; //IE5.X/win[font=宋体]忽略了[/font][font=Verdana]"\"}\""[/font][font=宋体]后的内容[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]voice-family:inherit;[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]width:300px; //[font=宋体]包括[/font][font=Verdana]IE6/win[/font][font=宋体]在内的部分浏览器读到这句，新的数值[/font][font=Verdana](300px)[/font][font=宋体]覆盖掉了旧的[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]} [/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]html>body .content { //html>body[font=宋体]是[/font][font=Verdana]CSS2[/font][font=宋体]的写法[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]width:300px; //[font=宋体]支持[/font][font=Verdana]CSS2[/font][font=宋体]该写法的浏览器[/font][font=Verdana]([/font][font=宋体]非[/font][font=Verdana]IE5)[/font][font=宋体]有幸读到了这一句[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]} [/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]div.content { [/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]width:300px !important; //[font=宋体]这个是正确的[/font][font=Verdana]width[/font][font=宋体]，大部分支持[/font][font=Verdana]!important[/font][font=宋体]标记的浏览器使用这里的数值[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]width([font=宋体]空格[/font][font=Verdana])/**/:400px; //IE6/win[/font][font=宋体]不解析这句，所以[/font][font=Verdana]IE6/win[/font][font=宋体]仍然认为[/font][font=Verdana]width[/font][font=宋体]的值是[/font][font=Verdana]300px[/font][font=宋体]；而[/font][font=Verdana]IE5.X/win[/font][font=宋体]读到这句，新的数值[/font][font=Verdana](400px)[/font][font=宋体]覆盖掉了旧的，因为[/font][font=Verdana]!important[/font][font=宋体]标记对他们不起作用[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]} [/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]html>body .content { //html>body[font=宋体]是[/font][font=Verdana]CSS2[/font][font=宋体]的写法[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]width:300px; //[font=宋体]支持[/font][font=Verdana]CSS2[/font][font=宋体]该写法的浏览器有幸读到了这一句[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]具体解释点击下面链接查看[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]www.blueidea.com/tech/site/2006/3170.asp[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]www.jluvip.com/blog/article.asp?id=114[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]列等高技巧[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]n[font=宋体]行[/font][font=Verdana]n[/font][font=宋体]列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，做法有：背景图填充、加[/font][font=Verdana]JS[/font][font=宋体]脚本的[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]方法和容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法。[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]背景图填充法：[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]xhtml:[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]QUOTE:[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]<div id="wrap">[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]<div id="column1">[font=宋体]这是第一列[/font][font=Verdana]</div>[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]<div id="column1">[font=宋体]这是第二列[/font][font=Verdana]</div>[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]<div class="clear"></div>[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]</div>[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]css:[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]QUOTE:[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#column1{ float:left; width:300px;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#column2{ float:right; width:476px;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt].clear{ clear:both;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]就是将一个[font=Verdana]npx[/font][font=宋体]宽的一张图片在外部容器纵向重复，定位到两列交错的位置纵向重复，在视觉上产生了两列高度一样的错觉[/font][/size][/font][/color]
页:
[1]