快捷搜索:

CSS精粹--您需要掌握的八个CSS布局技巧-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)

您可能还会对下面的文章感兴趣: