• <cite id="ls72a"></cite>

  • <rp id="ls72a"><nav id="ls72a"></nav></rp>
    <b id="ls72a"></b>

    ?网页设计中的偏移属性

    • 2019-02-27 17:00:21
    • 阅读次数:
    • 作者:盈岚科技小编
    • 来源:http://www.0737dz.com

    上一节介绍了网页设计三种定位机制使用了4个属性来描述定位元素各边相对于其包含块的偏移。我们将这4个属性称为偏移属性,这对于完成定位是很重要的一部分。

    top、right、bottom、left

    值:<length>| <percentage> | auto | inherit

    初始值:auto

    应用于:定位元素(也就是position值不是static的元素)

    继承性:无

    百分数:对于top和bottom,相对于包含块的高度;对于right和left,相对于包含块的宽度

    计算值:对于相对定位元素,见以下说明,对于static元素为auto,对于长度值,是相应的绝对长度;对于百分数值,则为指定的值;否则,为 auto

    说明:计算值取决于一系列因素,见附录A中的相关例子

    这些属性描述了距离包含块最近边的偏移(所以得名offset)。例如,top描述了网站建设定位元素上外边距边界离其包含块的顶端多远。如果top为正值,会把定位元素的上外边距边界下移,若为负值,则会把定位元素的上外边距移到其包含块的顶端之上。类似地,left描述了定位元素的左外边距边界在其包含块左边界右边(正值)或左边(负值)有多远。如果是正值,会把定位元素的外边距边界移到包含块左边界右边,而负值则将其移到包含块左边界左边。

    还可以这样来讲,正值会导致向内偏移,使边界朝着包含块的中心移动,而负值会导致向外偏移。

    注意:最初的网站建设CSS2规范实际上指出,偏移的是内容边界,而不是外边距边界,不过这与CSS2的其他部分不一致。这个错误在后来的勘误和CSS2.1中得到修正。所有当前开发的浏览器(写作本书时)都使用外边距边界来完成偏移计算。

    偏移定位元素的外边距边界时,带来的影响是元素的所有一切(包括外边距,边框、内边距和内容)都会在定位的过程中移动。因此,可以为定位元素设置外边距、边框和内边距,这些会随着定位元素一直保留,并包含在偏移属性定义的区域内。

    网页设计人员要记住重要的一点,偏移属性定义了距离包含块相应边的偏移(例如,left定义了距离包含块左边的偏移),而不是距包含块左上角的偏移。正是因为这个原因,填充一个包含块的右下角时要使用以下值:

    top: 50%; bottom: 0; left: 50%; right: 0;

    在这个例子中,定位元素的左外边界放在包含块中间的位置上,这是距包含块左边界的偏移。不过,定位元素的右外边界没有从包含块的右边界偏移,所以二者不矛盾。定位元素的顶端和底端也是如此:外上边界放在包含块中间的位置上,但是外下边界没有从包含块底端上移。这就得到了如图10-26所示的结果。

    图10-26:填充包含块的右下1/4部分

    注意:在图10-26以及本章大多数例子中,都是基于绝对定位的,由于绝对定位对于展示top、right、bottom和left如何工作是最简单的机制,所以我们一直都会用绝对定位。

    需要说明,网页设计定位元素的背景色稍有不同。图10-26中没有外边距,但是如果确实有外边距,在边框和偏移边界之间就会出现空白。看上去就好像定位元素没有完全填充包含块右下方1/4部分一样。实际上,它确实填满了这个区域,不过人眼不能直接看出。因此,以下两组样式会得到几乎相同的外观效果,假设包含块为100em高,100em宽:

    top: 50%; bottom: 0; left: 50%; right: 0; margin: 10em;

    top: 60%; bottom: 10%; left: 60%; right: 10%; margin: 0;

    重申一句,二者只是在视觉效果上相似。

    通过使用负值,可以将一个元素定位到其包含块之外,例如,指定以下值会得到如图10-27所示的结果:

    top:-5em; bottom: 50%; left: 75%; right:-3em;

    图10-27:将一个元素定位到其包含块之外

    除了长度值和百分数值,网页设计的偏移属性还可以设置为auto,这是默认值。对于auto没有定义行为,它会根据所用的定位类型改变。本章后面将逐个考虑各种定位类型,并介绍auto如何作用。

    当前文章标题:?网页设计中的偏移属性

    当前URL:http://www.0737dz.com/news/wzzz/migration-properties.html

    上一篇:网页设计中的包含块

    下一篇:网页设计中的宽度和高度

    网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
    日本三级香港三级人妇99,亚洲欧美中文日韩综合图区,欧美黄网站色视频免费,哈啊往里噗嗤好深bl纯肉np 网站地图