CSS初级技巧:网页规划
日期：2014-03-25 浏览次数：21296 次
上一篇CSS教程 文章：CSS高级技巧:文字环绕图片
规划
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进行过优化.
所以垂直居中还是要看场合自行挑选合适的方案来处理.
浮动规划
如今大家都熟知浮动规划了, 不
