需要掌握的八个CSS布局技巧
来源：52design 发布时间：2008-05-17 11:45:00
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）
0
投稿猜你喜欢
- 为了建设班级主页，买了个空间，支持SA FileUp组件。鼓弄了一天，终于有了大致的了解，下面是我的实例，希望对大家有所帮助。大家可以根据自
- asp防止用户同时登陆的方法，实现这个功能可有两种方式：1.使用application用application对象：如果做的是大型社区，可能
- creatdoc.asp<!DOCTYPE HTML PUBLIC "-//W3C/DTD&n
- 如何验证日期输入是否正确？我们可以利用ASP 3.0里的On Error Resume Next来完成这项功能：<％Option&nb
年前接到QCon的邀请，颇感意外。在我的印象里，QCon大会是后端开发工程师和架构师的技术大会。后来去QCon大会的官网搜索了下，发现原来Q- ORACLE的数据字典是数据库的重要组成部分之一，它随着数据库的产生而产生, 随着数据库的变化而变化, 体现为sys用户下的一些表和视图。数
- 在实现鼠标停在某元素上，会出现提示信息，以前我们太多是采用javascript脚本代码来实现。看了怿飞的IE中伪类:hover的使用及BUG
- 方案:◆1、SELECT TOP PAGESIZE NEWSTITLEFORM NEWSINFO WHERE NEWSID NOT IN(S
- 读取binlog，方法有二：1.使用mysqlbinlog，详细用法，请参考MySQL手册2.使用MySQL的自带工具，SHOW BINLO
- 代码如下:create table T_NEWS ( ID NUMBER, N_TYPE VARCHAR2(20), N_TIT
- 配置Laravel 的邮件服务可以通过 config/mail.php 配置文件进行配置。邮件中的每一项都在配置文件中有单独的配置项，甚至是
- caller 属性返回一个对函数的引用，该函数调用了当前函数。functionName.caller functionName 对象是所执行
- 查询语言通过在查询表格中键入单词或短语，然后单击按钮执行查询，就可以在 Web 站点中搜索任意的单词或短语（例如，查询表格示例
- 摘要: 阐述一种全新的ASP模板引擎,实现代码(逻辑)层与HTML(表现)层的分离.这种模板实现方法避免了一般ASP模板加载模板文件(加载组
- 密码保护是注册过程中的关键环节，尤其是对帐户安全级别比较高的网站，尤其在账号被盗或者涉及安全登录等问题的情况下，密码保护问题作为用户身份识别
- 学习JQUERY就应该从最基本的学起，基本的就应该是语法了，在这里，我们有必要先温习一下JAVASCRIPT的一些知识。语法就不用说了，都是
- 熟悉css的开发者一定知道图像替换技术，也深知它的意义，Dave Shea 曾在他的一篇文章对此做了详细的总结，参看 Dave Shea’s
- 挖坟 交互设计（Interaction Design）产生于二十世纪八十年代，在1984年一次设计会议上，大名鼎鼎的英国交互设计师比尔·莫格
- 很久没写blog，太忙了。没什么时间写复杂的东西，重新把颜色渐变效果写一遍。关于颜色的效果一般就两个，颜色梯度变化和样式的颜色渐变，前者在i
- 定义本地站点在Dreamweaver中制作网站，您必须定义一个本地站点，它是您的计算机上任意位置的一个
