如果一个布局的创建要求设计师具备高超的技艺,这就需要对边缘情况进行处理;这个问题已在早先讨论边距时提出了。
因为网站设计方式的缘故,你会遇到许多这样的情况,同一 HTML 文档中的某个元素与其它元素结构属性相似,却要求有不同的外观。在这些情况下,对大多数元素编写写一种规则,而对每个边缘情况编写附加规则就会非常有用。这就是auto和inherit值存在的原因:将默认样式作为边缘情况处理。
对边框来说,边缘情况很可能要求对某个元素某侧的边框的某个属性进行改变¬——如果某个人明智地选择遵从 KISS 法则,最好坚持只改变需要变动的细枝末梢。
示例2
文件中的某些部分需要以规则和边框的形式进行修饰。
链接:
- 在 title 的尾部添加规则,并给格言引用添加边框
- 示例2的样式表
新规则:
h1 { border-bottom: 1px solid rgb(153,153,153); }
.pullQuote { border: 1px solid rgb(153,153,153); }
只有边距是不够的:填充距属性
你可能会遇到背景颜色处于次要地位或带有需要在内容和边距之间留出缝隙的强调色的元素。你也可能遇到需要在边框和靠近边框的文本之间留出空隙的情况。
在如此种种情况下,padding、padding-top、padding-right、padding-bottom 和 padding-left 属性就可以大显身手。这些属性用于在元素和其内容的边距或边框之间插入负间距。边距,边框和填充距之间关系的明确图解请参见上面的图1。
这些属性的运作方式与边距属性完全相同,除了以下例外:
- 对填充距属性来说,auto 值并不起作用。
- 负填充距值是不合法的。
- 填充距不会合并。
- 边距值不是用于内联元素的,而填充距值才是。
示例3
应当在之前已经添加了边框的元素上添加间隙。
链接:
- 在之前添加到标题和格言引用的边框和文本之间插入空隙
- 示例3的样式表
新规则:
body { padding: 0; } h1 { padding: .5em 0 .5em 0; } .pullQuote { padding: .5em; }
对元素的宽度和高度进行处理
通常大部分元素的尺寸可以被更改。这种性质已在前面讨论 auto 边距时说明过了。
用来控制元素尺寸的CSS属性包括 width、height、min-width、max-width、min-height 和 max-height。这些属性可通过 overflow 属性与元素内容的尺寸相分离(或连接)。
此外还有 clip 属性,用于将元素的一部分隐藏于其边距中。但由于并不常用,所以在本文中就不详述了。
宽度和高度基础
通常,人们可以预见 width 和 height 的效果。但是,使用时也有些地方需要注意。
- width 和 height 不能用于 inline 元素… 在特定情况下一些元素(如span、strong 和 em)会无视 width 和 height 的值。这些元素的清单将在后面对元素类型进行探讨时列出。
- …尽管图像是内联元素,但它们是可以指定 width 和 height的。 CSS 2.1 推荐将图像看做“被替代”元素,这意味着浏览器会把它们当作含有静态尺寸对待。因此,这些尺寸 可以被任意更改。
- 只有 width 和 height 属性可以影响一个元素的功能性尺寸。 因此,常有这种情况出现:一个元素太小(常常是太窄)而不能像预期的那样装下它的内容,从而引起冒出。下面论及的 CSS 盒模型将会牵扯到这一问题。
- 微软 Internet Explorer(IE)的渲染漏洞,使得明确指定一些元素的 width 或 height 属性/值组成为必要。 IE 的渲染引擎的一些缺陷只能以强力解决掉(参见词汇表)。人们已了解了很大一部分缺陷,并准备要在 IE 8 中把它们消除掉,但在 IE 8 在 IE 安装基础中取代其前辈之前,这个问题将是无法回避的测试用例。PositionIsEverything.net 和 CSS-Discuss Wiki 提供了大量有关于这个问题和其解决技巧的信息。
- 有时取整算法会导致浏览器间不合规格的布局差异,这些浏览器是通过 LCD、LED 或 CRT(type="screen")显示媒体来展示内容的。 screen 媒体类型最终会要求所有单位换算为像素度量单位,而浏览器间的像素度量单位会各不相同。
min-width、max-width、min-height、和max-height
有时,你会遇到这种情况:你需要对一个元素的大小进行约束——通常是为了保证一个大小为比例值的列能够保持在一个易于阅读的宽度上。各种 min- 和 max- 属性正是作用于此。与 width 和 height 情况一样,通常这些属性的使用效果是可以预见的。
但是以笔者的经验来看,这些属性的用途有限(尽管替他一些作者持异议)。像以前简单的 width 和 height 一样,它们也受到取整误差的困扰,这种误差很能会导致完全意外的后果。 更重要的是,IE 6 完全不支持它们。到2008年七月为止,IE 6 在市场上仍占有很大份额。
.分页: [1] [2] [3] [4] [5] [6]
- 上一篇:用不同的 CSS 怎样定位不同的浏览器
- 下一篇:CSS选择符