流浪者家园


标题: [分享] 您需要掌握的八个CSS布局技巧
jokke
版主
Rank: 7Rank: 7Rank: 7
设计是空


版主   原创先锋   风雨同舟   特殊贡献  
UID 11048
精华 0
积分 537
帖子 341
威望 537 威望值
家园币 5277 家元
现金 3866 元
存款 2000 元
阅读权限 100
注册 2006-9-24
来自 桂林
状态 离线
 
发表于 2008-2-22 16:30  资料  个人空间  主页 短消息  加为好友  QQ

您需要掌握的八个CSS布局技巧

1.若有疑问立即检测
  在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用,请见http://validator.w3.org 请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误;我们建议先修正一些最明显的错误之后重新检测,这样也许会让错误数量爆减。

2.使用浮动功能时记得适当清除指令
  浮动是个危险的功能,未必会产生您所期望的结果。如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况,请先确定您的做法是正确的。请参阅Eric Meyer在Complex Spiral Consulting Web网站上的教学。

3.边界重合时利用padding或border来避免
  您可能会为了一点不应该出现的空间而焦头烂额,或者您需要一点点空间时,怎样都挤不出来。如果您有用到margin,那么很容易产生边界的重合;Andy Budd在他的网站上解释了可能的做法。

4.尝试避免同时对元素指定padding/border以及高度或宽度
  Windows版IE经常导致width与height的计算问题。有些方法可以解决此问题,但如果母元素需要指定高度与宽度时,最好能够在母元素之内的子元素套用margin,或者当子元素需要指定高度与宽度时,在母元素套用padding以达效果。

5.不要依赖min-width/min-height
  Windows版IE并不支援两种语法。但是在某种程度下,windows版IE可以达到相当于min-width/min-height的效果,所以只要对IE做点过滤功能,即可达到您想要的结果。

6.若有疑问,先减少百分比
  有时候某些错误会使50%+50%成为100.1%,使网页出现问题。这时请尝试将这些值改为49%,甚至49.9%

7.记住“TRouBLed”写法
  Border,margin与padding的简写语法有特定顺序,从上方开始顺时针方向转动:top,right,bottom,left.所以margin:0 1px 3px 5px;的结果是上方无边界,右边1像素,以此类推。记住“TRouBLe”,您就不会弄错次序了。

8.只要不是零的值,都要指定单位
  CSS需要您对每个font,Margin等各种值指定单位。(唯一的例外是line-height)





顶部
qhmzxylzq
版主
Rank: 7Rank: 7Rank: 7


版主   爱心天使   灌水天才   活跃份子  
UID 33928
精华 1
积分 2699
帖子 2537
威望 2699 威望值
家园币 41 家元
现金 10 元
存款 28169 元
阅读权限 100
注册 2007-4-26
状态 离线
 
发表于 2008-6-11 23:54  资料  个人空间  短消息  加为好友 

知道了

顶部
jackamani
家园书生
Rank: 2



UID 29485
精华 0
积分 158
帖子 151
威望 158 威望值
家园币 1241 家元
现金 49 元
存款 3048 元
阅读权限 20
注册 2007-3-15
状态 在线
 
发表于 2008-6-19 08:25  资料  个人空间  短消息  加为好友 

下载下来慢慢琢磨学习!

顶部
ssy_1966
家园进士
Rank: 5Rank: 5


UID 29363
精华 0
积分 1106
帖子 170
威望 1106 威望值
家园币 165 家元
现金 7 元
存款 10 元
阅读权限 50
注册 2007-3-14
状态 离线
 
发表于 2008-7-21 18:52  资料  个人空间  短消息  加为好友 
不错不错,谢谢分享。





]
顶部


当前时区 GMT+8, 现在时间是 2008-9-7 08:24

赣ICP备06003683号

严禁任何人在本论坛发表与中华人民共和国法律相抵触的言论!

特别声明:本论坛的所有言论只代表发表者个人意见,与本论坛立场无关!

    本论坛支付平台由支付宝提供
携手打造安全诚信的交易社区 Powered by Discuz! 5.5.0  © 2001-2007 Comsenz Inc.
Processed in 0.011918 second(s), 7 queries , Gzip enabled 我要啦免费统计

清除 Cookies - 联系我们 - 流浪者家园 - Archiver - WAP