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

时间: 2024-08-02 06:36:42

做网页中需要掌握的八个CSS布局技巧_经验交流的相关文章

做网页字体大小参考 网页中同字号字体的不同单位对比列表_经验交流

对于WEB前端页面开发,字体大小的设置是比较重要,这里找到了一些关于字号大小的数据,共享出来备以后参考,也希望能对大家有用! Points   Pixels       Ems            Percent 6pt        8px          0.5em        50% 7pt        9px          0.55em      55% 7.5pt     10px        0.625em    62.5% 8pt        11px      

网页中关闭IE的图像工具栏和XP主题_经验交流

关闭XP系统主题在IE中的显示 如果开发环境是XP系统,IE中的input标签会和XP系统主题相符合,影响了外观的统一,采用下列方法可以关闭. 添加下列 META 标记,可以选择使得您的 HTML 内容对于某些元素(如按钮和滚动条)不采用与该操作系统相同的外观: <META HTTP-EQUIV="MSThemeCompatible" Content="No"> 关闭IE的图像工具栏 IE的图像工具栏有时候很讨厌,在MSDN上无意中发现了关闭方法 图像工

在DW中CSS编码需要注意和掌握的一些技巧_经验交流

由于"可视化"和操作简便,在DW中编写CSS的朋友很多,今天我们介绍一些在DW中编写CSS的"最佳习惯",希望对大家有所帮助. CSS正在改变网站设计的进程.为迎合不断增长的倾向于CSS的设计人员的需求,Macromedia DW MX引进了一些新的及改善过的CSS相关的特性.有了这些新的特性,你可以为未来的更新作好计划,开发与W3C标准更加兼容的站点.本文讨论在DW MX中使用CSS以及突出某一特定CSS特性时的一些建议. 一般地讲,样式表(style sheet

html工作中表格&amp;amp;lt;tbody&amp;amp;gt;标签的使用技巧_经验交流

在做页面的时候,经常要根据不同的操作来显示或隐藏一个表格中的部分内容,隐藏一行直接用<tr>标签,隐藏多行时用<tbody>就很方便. <table> <tbody id="content1"> <tr><td>表单内容</td></tr> </tbody> <tbody id="content2" style="display:none&qu

网页绿色系配色应用实例图文第1/2页_经验交流

绿色与人类息息相关,是永恒的欣欣向荣是的自然之色,代表了生命与希望,也充满了青春活力,绿色象征着和平与安全.发展与生机.舒适与安宁.松弛与休息,有缓解眼部疲劳的作用. 它本身具有一定的与自然.健康相关的感觉,所以也经常用于与自然.健康相关的站点.绿色还经常用于一些公司的公关站点或教育站点. 绿色能使我们的心情变得格外明朗.黄绿色代表清新.平静.安逸.和平.柔和.春天.青春.升级的心理感受. 下面我们根据绿色系不同属性邻近色.同类色的高纯度低纯度.对比色等色彩搭配做不同的举例分析. 绿色系分析:

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

1.若有疑问立即检测 在出错时若能对原始代码做简单检测可以省去很多头痛问题.W3C对于XHTML与CSS都有检测工具可用,请见http://validator.w3.org 请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误:我们建议先修正一些最明显的错误之后重新检测,这样也许会让错误数量爆减.2.使用浮动功能时记得适当清除指令  浮动是个危险的功能,未必会产生您所期望的结果.如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况,请先确定您的做法是正确的.请参阅Eric Meye

网页中英文混排行高不等问题的解决方法_经验交流

基本上快被这个问题搞疯了,症状如下 症状描述:在ie下(6或7,8没有试过)当出现中英文混排,都采用默认字体时,并使用 li 列表做float时,会出现如上图的症状,文字排列上下不对齐的情况.影响了布局的美观性,造成上图情况的原因是中英文的文字基线不同,arial字体的下边缘要比宋体(同为12号)低一个象素,上边缘比宋体矮两个象素,而且英文还有i,y这种上下基线不同的情况.所以当中英文混排对齐时,就会出现明显的高度差异,使排版不均.可见放大图. 采用中英文字均使用宋体的方案 可以解决文字排列不对

IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案_经验交流

IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值,重现代码如下 复制代码 代码如下: <!DOCTYPE html><html>    <head>        <meta charset="utf-8"/>        <title>IE6-IE9中tbody的innerHTML不能复制bug</title>    </head>    <body style=&quo

CSS定位中Positoin、absolute、Relative的一些研究_经验交流

Positoin属性有四个值: static.fixed.absolute和relative,后面两个在布局中的定位里是经常用到的,顾名思义,absolute是指绝对定位,即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,而其层叠通过z-index属性定义.此时对象不具有边距,但仍有补白和边框.ralative是指相对定位,就是依据left,right,top,bottom等属性在正常文档流中偏移位置. 但是,怎么个绝对法,又怎么个相对法呢?以前我一直没有