全国客户专线:0668-2819005  2819007
首 页      域名注册      网站空间      企业邮局      托管/租用      网站建设      成功案例      网站推广      软件开发      建站知识      联系我们
网站建设 | 网页设计 | 电子商务 | 网络营销 | 建站问题 | 技术文摘
技术文摘
CSS高级技巧之网页布局
信息类型:技术文摘   发布时间:2009-12-01 00:53:29
    布局 

  CSS至关重要的作用, CSS的设计初衷. 

  CSS布局和几年前table横行时的布局又不太一样, 在结构化语义化的HTML文档后面, CSS在格式化文档的渲染效果, 把结构化文档用表现化语言来描述. 简而言之, 就是CSS不需要表现性标签! 

  CSS布局技术依赖于三个基本概念: 定位, 浮动, margin操纵. 布局技术之间没有本质的区别, 相同一种布局让100个前端开发工程师来做, 可能就有100种方法. 

  居中 

  在table时代, align和Valign相当的好用, 而在CSS中却没有简单实现的方法,所以在标准化刚刚开始推广的时候, 很多重构项目中居中问题变成了阻碍标准化进步的绊脚石. 

  1. 自动外补丁水平居中 

  一般情况下水平居中比较容易实现, 只需要给要居中的容器设定宽度, 以及自动水平外补丁就可以了. 

  比如HTML如下: 

  <body> 
   <div class="wrapper"> 
   </div> 
  </body> 

  CSS如下: 

  body{} 
  .wrapper{width:760px;margin:0 auto;} 

  很简单不是吗? 但是有点小问题... 我们亲爱的IE家族里, IE5.x和IE 6不支持自动外补丁, 但是同样幸运的是, IE将 text-align:center 理解为所有东西居中, 而不只是文本. 哈哈, 可以利用这个Bug. 

  将CSS改为: 

  body{text-align:center;} 
  .wrapper{width:760px;margin:0 auto;text-align:left;} 

  这里就用到了一种Hack,不过不会影响其他浏览器的Hack就是好Hack,呵呵, 就先这么用着吧~ 

  等等, 好像Netscape那边也出问题了, 用Netscape 6将窗口缩小到小于容器宽度时, 容器的左边就会跑到屏幕外边去了, 而且还不会有滚动条...万恶的浏览器大战啊... 

  再来改改我们的CSS: 

  body{min-width:760px;text-align:center;} 

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

  这样就基本上ok了. 

  2. 定位法水平居中 

  我们也可以稍稍复杂的用定位法来完成这个工作. 所谓的定位法是用 position 属性来定义容器位置. 

  同样用上面一例的HTML代码, 

  我们用定位法的CSS如下: 

  body{margin:0;padding:0;} 

  .wrapper{position:relative;left:50%;width:760px;margin-left:-380px;} 

  为什么用相对定位( relative )呢? 能用绝对定位( absolute )吗? 

  绝对定位当然也可以, 但是绝对定位会将容器提出文档流, 让后面的文档流到定位容器的位置去了, 稍不注意就会被定为的容器遮盖住后面的内容, 而relative不会将容器提出文档流, 后面的文档流会给定位的容器留下它应有的空间. 

  3. 垂直居中 

  CSS中比较大的问题出现了, CSS较难使用简单的方法来完成垂直居中. 

  在容器中要使文字垂直居中, 那可以将容器的line-height设置的和height一样来完成这个工作, 

  但是要使容器垂直居中的话, 那就比较复杂了. 

  HTML如下: 

  <body> 
   <div class="wrapper"> 
   <div id="box">123</div> 
   </div> 
  </body> 

  CSS如下: 

  body{margin:0;padding:0;height:100%;} 
  .wrapper{display:table-cell;vertical-align:middle;width:600px;height:400px;border:solid 1px red;} 
  #box{width:200px;margin:auto;vertical-align:middle;border:solid 1px blue;} 

  按理说这样就可以了呀, 但是IE下面一点效果都没有...那是因为IE的display属性只接收:block, inline, inline-block, none, inherit, 不接收table, table-cell, table-row, 那就头痛了呀. 

  唔, 其实思路有很多, 我提供其中一种: 

  CSS如下: 

  body{margin:0;padding:0;height:100%;} 
  .wrapper{width:600px;height:400px;border:solid 1px red;} 
  #box{width:200px;height:200px;position:relative;top:50%;left:50%;margin-top:-100px;margin-left:-100px;border:solid 1px green;} 

  局限性非常大, 必须要已知高度... 

  更可以对IE浏览器进行filter之后hack它. 使用ie独有的expression, 虽然在大型脚本上expression表现的相当差, 但是简单的计算offsetHeight还是不太会影响性能, 再怎么说M$也针对expression进行过优化. 

  所以垂直居中还是要看场合自行挑选合适的方案来解决. 

  浮动布局 

  现在大家都熟知浮动布局了, 不多说, 这个是CSS布局的基础...主要是float和margin的合理应用. 

  Faux Columns: 

  伟大的Dan的另一项发明, 呵呵, 其实很简单, 用垂直平铺背景图来做出视觉上多栏布局等高的效果. 但是很实用, 不是吗? 

  Equal height boxes with CSS: 

  在标准推行过程中比较有名的文章之一, 介绍像table一样进行CSS布局, 但是不适用于IE...唉 

  弹性布局 

  很不错的理念, 原理其实也不难, 就是用em来标注尺寸, 这样就可以让浏览器自行放大或缩小任何的容器或是元素了.

 
版权所有:茂名市易天网络科技有限公司 2006-2013 www.gdmmw.com
  电话 : 0668-2819005  2819007   传真:0668-2819007   客服QQ:510208667、362409039
Email:gdmmw@163.com  MSN:gdmmw@hotmail.com
公司地址:广东省茂名市茂南开发区站南路金城三街1号201室  邮编:525000
ICP/ISP/SP/工商局注册号:440900000068129  信息产业部ICP备案号:粤ICP备13085593号

粤公网安备 44090202000104号


工商注册号
440900000068129
在线QQ客服咨询 关闭