`

需要掌握的八个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)

分享到:
评论

相关推荐

    做网页中需要掌握的八个CSS布局技巧

    做网页中需要掌握的八个CSS布局技巧

    CSS布局之道

    CSS布局之道供新手下载学习CSS的各种技巧,欢迎新手使用!

    HTML+CSS网页设计与布局从入门到精通

    《HTML+CSS网页设计与布局从入门到精通》共分4个部分21章和两个附录,包括网页设计基础、HTML基础、CSS基础、CSS高级技术和CSS布局技术等内容。全书遵循Web标准,强调“表现”与“内容”的分离,抛弃了那些过时的...

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

    本文和大家重点讨论一下CSS布局中八个你需要掌握的技巧,比如使用浮动功能时记得适当清除指令,因为浮动是个危险的功能,未必会产生您所期望的结果。如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况,请...

    CSS文集

    利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握的八个CSS布局技巧 用css实现链接经过时显示浮动图片背景的效果 自适应大小的CSS圆角盒子 div+css实现Firefox和IE6兼容的垂直居中...

    《DIV+CSS 3.0:网页布局案例精粹》

    在介绍使用CSS样式进行设计的同时,还结合实际网页制作中可能遇到的问题,提供了解决问题的思路、方法和技巧,使初学者可以轻松地掌握Div+CSS布局的方式,制作出精美的网页。 《DIV+CSS 3.0:网页布局案例精粹》全面...

    精通CSS DIV网页样式与布局.part1.rar

    本书用相当的篇幅重点介绍了用CSS+DIV进行网页布局的方法和技巧,配合经典的布局案例,帮助读者掌握CSS最核心的应用技术。 4. 高级的混合应用技术 真正的网页除了外观表现之外,还需要结构标准语言和行为标准的结合...

    [DIV.CSS网站布局从入门到精通].朱印宏等.扫描版

     本教程力求模拟真实开发场景,用简单的方法帮助读者掌握使用Web标准进行网页设计的方方面面,以及CSS布局中表现与内容分离的相关知识。通过对本教程的学习,希望读者能够以符合标准的设计思维,采用实战操作步骤...

    web前端学习路线.xmind

    •掌握DIV+CSS布局方式 • 掌握常见网页布局模式 •掌握HTML5常用标签  • 能够完成基本的动画效果 • 能够根据PSD文件独立完成静态页面的开发工作 • 能够使用CSS3新属性美化修饰网页 ...

    精通CSS DIV网页样式与布局.part2.rar

    本书用相当的篇幅重点介绍了用CSS+DIV进行网页布局的方法和技巧,配合经典的布局案例,帮助读者掌握CSS最核心的应用技术。 4. 高级的混合应用技术 真正的网页除了外观表现之外,还需要结构标准语言和行为标准的结合...

    精通CSS DIV网页样式与布局.part3.rar

    本书用相当的篇幅重点介绍了用CSS+DIV进行网页布局的方法和技巧,配合经典的布局案例,帮助读者掌握CSS最核心的应用技术。 4. 高级的混合应用技术 真正的网页除了外观表现之外,还需要结构标准语言和行为标准的结合...

    Div+CSS速成教程

    想快速学好div+css?认真阅读完本文,你可以快速了解并掌握div+css布局技巧的一些景点技巧。

    别具光芒CSS+Div

    不仅介绍了Dreamweaver 8、Firework 8等常用软件的使用,更重要的是,结合实际网页制作中可能遇到的问题,提供了解决问题的思路、方法、技巧,即使是初学者也可以轻松掌握DIV+CSS布局方式,制作出精美的网页并搭建...

    掌握这20个CSS技巧提升你的CSS技能

    这里涵盖了20个css技巧来帮助你减少重复规则和复写,在布局中标准化样式流程,不仅可以帮助你高效地创建自己的框架,而且可以解决许多常见的问题。 1、使用CSS重置(reset) css重置库如normalize.css已经被使用很...

    2天掌握DIV CSS网页制作技术

    基础 【基础一】DIV+CSS的叫法是不准确的 【基础二】使用Table布局是不明智的 【基础三】xHTML+CSS与SEO...【第八课】CSS Hack ================================= 小技巧 【单张图片按钮实例】 【首行文字两文字缩进】

    前端应该掌握的CSS实现多列等高布局技巧

    我们在写页面的时候,有的时候会遇到多栏布局,这篇文章主要介绍了前端应该掌握的CSS实现多列等高布局技巧,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

Global site tag (gtag.js) - Google Analytics