网页设计中的水平元素

  • 2018-10-15 10:08:35
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

块级元素的表现有时可以预测,有时则很让人惊讶。例如,元素沿横轴和竖轴摆放时,其处理就可能不同,为了充分了解如何处理块级元素,必须对一些边界和区域很清楚。

一般地,网页设计中一个元素的width被定义为从左内边界到右内边界的距离,height则是从上内边界到下内边界的距离。这些属性都可以应用到元素。

不同的宽度、高度、内边距和外边距相结合,就可以确定文档的布局。在大多数情况下,文档的高度和宽度由浏览器自动确定,这要基于可用的显示区域和其他一些因素。当然在CSS网站制作中,可以更直接地控制元素的大小以及显示方式。对于水平和垂直布局,可以选择不同的效果,所以我们将分别介绍。

水平格式化

水平格式化往往比你想象得更复杂。其部分复杂性在于width影响的是内容区的宽度,而不是整个可见的元素框。考虑以下例子:

<p style="widch: 200px;">wideness?</p>

这行代码使段落的内容区宽度为200像素。如果为元素指定一个背景,就能很清楚地看出。不过,如果网页设计中还指定了内边距、边框或外边距,这些都会增加到宽度值。假设指定如下:

<p style="width: 200px; padding: 10px; margin: 20px;">wideness?</p>

可见元素框的宽度现在是220像素,因为在内容的左边和右边分别增加了10像素的内边距。外边距则会在左右两边再延伸20像素,使整个元素框的宽度为260像素。

一定要知道这样会隐式地增加width值,理解这一点很重要。大多数用户认为,width 是指可见元素框的宽度,如果为一个元素声明了内边距、边框以及宽度,他们指定的宽度值则是左外边界到右外边界的距离。但在CSS中并不是这样。一定要牢牢记住这一点,以免以后糊涂。

注意:在写作本书时,CSS的Box Model模块提供了一些建议,提出了一些方法来允许创作人员决定width是指内容宽度还是可见框宽度。

对此有一个很简单的规则,正常流中块级元素框的水平部分总和就等于父元素的width。假设一个div中有两个段落,这两个段落的外边距设置为1em。段落的内容宽度(width 的值)再加上其左、右内边距,边框或外边距,加在一起正好是div内容区的width,

假设div的width为30em,那么各段落内容宽度、内边距,边框或外边距的总和就是30em。在图7-3中,段落外的“空白”实际上是其外边距。如果div有内边距,还会有更大的空白,不过这里div没有内边距。稍后就会讨论内边距。

水平属性

网页设计中水平格式化的“7大属性”是:margin-left、border-left, padding-left、width、 padding-right、border-right和margin-right。这些属性与块级框的水平布局有关,如图7-4所示。

这7个属性的值加在一起必须是元素包含块的宽度,这往往是块元素的父元素的width 值(因为块级元素的父元素几乎都是块级元素。

图7-3:元素框与其父元素的width相同

图7-4:水平格式化的“7大属性”

在这7个属性中,只有3个属性可以设置为auto:元素内容的width,以及左、右外边距。其余属性必须设置为特定的值,或者默认宽度为0,图7-5显示了框中的哪些部分可以取值为auto,而哪些部分不能。

图7-5:可以设置为auto的水平属性

width必须设置为auto或某种类型的非负值。如果在水平格式化中确实使用了auto,会得到不同的效果。

注意:CSS网站制作中允许浏览器为width设置一个最小值,块级元素的width不能小于这个值,对于不同浏览器,这个最小值可能不同,因为在规范中对此没有定义。

当前文章标题:网页设计中的水平元素

当前URL:http://www.lyjtt.cn/news/wzzz/Horizontal-elements.html

上一篇:网页设计中的基本框

下一篇:网页设计中的auto设置

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)