文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS属性汇总--(6) 定位属性3

2023-01-31 01:07

关注
10.right
 
         right 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
        注释:如果 "position" 属性的值为 "static",那么设置 "right" 属性不会产生任何效果。
         对于 static 元素,为 auto;对于长度值,则为相应的绝对长度;对于百分比数值,为指定值;否则为 auto。
         对于相对定义元素,left 的计算值始终等于 right。
         Js语法:object.style.right="50px"
 
         该属性与:top,bottom,left是类似的
 
11.top
         top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
         注释:如果 "position" 属性的值为 "static",那么设置 "top" 属性不会产生任何效果。
         对于 static 元素,为 auto;对于长度值,则为相应的绝对长度;对于百分比数值,为指定值;否则为 auto。
         对于相对定义元素,如果 top 和 bottom 都是 auto,其计算值则都是 0;如果其中之一为 auto,则取另一个值的相反数;如果二者都不是 auto,bottom 将取 top 值的相反数。
         Js语法:object.style.top="50px"
 
12.vertical-align
         vertical-align 属性设置元素的垂直对齐方式。
         该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
         该属性有以下几种可选值:
  • baseline   默认。元素放置在父元素的基线上
  • sub           垂直对齐文本的下标。
  • super        垂直对齐文本的上
  • top            把元素的顶端与行中最高元素的顶端对齐
  • text-top     把元素的顶端与父元素字体的顶端对齐
  • middle      把此元素放置在父元素的中部
  • bottom     把元素的顶端与行中最低的元素的顶端对齐
  • text-bottom  把元素的底端与父元素字体的底端对齐
  • length
  • %
 
下面的例子演示了如何在文本中垂直排列图象:
<html>

<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>

<body>

<p>
这是一幅<img class="top" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p>    

<p>
这是一幅<img class="bottom" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p>

</body>

</html>
运行该代码后显示以下结果
 
 
13.visibility
         visibility 属性规定元素是否可见。
         提示:即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。
         这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间,不过可以完全不可见。值 collapse 在表中用于从表布局中删除列或行。
          Js语法:object.style.visibility="hidden"
          该属性有以下几种可选值:
  •  visible       默认值。元素是可见的。
  • hidden       元素是不可见的
  • collapse    当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"
  • inherit
 
下面的例子演示如何使表格元素叠加
<html>
<head>
<style type="text/css">
tr.coll
{
visibility:collapse
}
</style>
</head>
<body>

<table border="1">
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr class="coll">
<td>Bush</td>
<td>George</td>
</tr>
</table>

</body>
</html>
结果如下:
 
14. z-index
          z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释:元素可拥有负的 z-index 属性值。
注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!
        该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。
        Js语法:object.style.zIndex="1"
 
下面的例子演示了z-index 用于将一个元素放置于另一元素之后。
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>

<body>
<h1>这是一个</h1>
<img class="x" src="/i/eg_mouse.jpg" />    
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
</body>

</html>
结果如下:
 
阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯