广告
返回顶部
首页 > 资讯 > 后端开发 > Python >CSS属性汇总--(6) 定位属性3
  • 494
分享到

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

属性CSS 2023-01-31 01:01:09 494人浏览 安东尼

Python 官方文档:入门教程 => 点击学习

摘要

10.right            right 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。         注释:如果 "position" 属性的值为 "static",那么设置 "right"

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>
结果如下:
 

--结束END--

本文标题: CSS属性汇总--(6) 定位属性3

本文链接: https://www.lsjlt.com/news/183291.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • CSS属性汇总--(6) 定位属性3
    10.right            right 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。         注释:如果 "position" 属性的值为 "static",那么设置 "right"...
    99+
    2023-01-31
    属性 CSS
  • CSS定位属性之相对定位relative属性怎么使用
    这篇“CSS定位属性之相对定位relative属性怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一...
    99+
    2022-10-19
  • CSS属性之定位属性的示例分析
    小编给大家分享一下CSS属性之定位属性的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!CSS的定位属性有三种,分别是绝对定位、相对定位、固定定位。posi...
    99+
    2023-06-08
  • CSS定位属性之固定fixed属性怎么使用
    本篇内容介绍了“CSS定位属性之固定fixed属性怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!C...
    99+
    2022-10-19
  • css中如何定位属性
    本篇内容介绍了“css中如何定位属性”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • CSS定位属性有哪些
    这篇文章主要介绍了CSS定位属性有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 属性 描写 CSS b...
    99+
    2022-10-19
  • CSS中定位属性有哪些
    小编给大家分享一下CSS中定位属性有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! CSS 定位属性准予你对元素进行定位。...
    99+
    2022-10-19
  • jquery如何改css定位属性
    本篇内容介绍了“jquery如何改css定位属性”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • CSS的定位属性有哪些
    本篇内容介绍了“CSS的定位属性有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! CSS 定位属性 ...
    99+
    2022-10-19
  • CSS定位、CSS的position属性怎么用
    这篇文章主要为大家展示了“CSS定位、CSS的position属性怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS定位、CSS的position属性怎...
    99+
    2022-10-19
  • CSS怎么使用Positioning定位属性
    今天小编给大家分享一下CSS怎么使用Positioning定位属性的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。CSS Po...
    99+
    2023-07-04
  • CSS浮动和定位属性介绍
    这篇文章主要介绍“CSS浮动和定位属性介绍”,在日常操作中,相信很多人在CSS浮动和定位属性介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS浮动和定位属性介绍”的疑惑...
    99+
    2022-10-19
  • CSS中如何是Position定位属性
    CSS中如何是Position定位属性,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。CSS定位属性Position详解CSS中...
    99+
    2022-10-19
  • css定位position属性怎么使用
    这篇文章主要介绍“css定位position属性怎么使用”,在日常操作中,相信很多人在css定位position属性怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”cs...
    99+
    2022-10-19
  • CSS定位属性的示例分析
    这篇文章给大家分享的是有关CSS定位属性的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   1.定位的专业解释   (1)语法   position:static...
    99+
    2022-10-19
  • input标签的type属性汇总
    1. text:用于接受单行文本输入。2. password:用于接受密码输入,输入的文本会被隐藏。3. checkbox:用于选择...
    99+
    2023-09-14
    input
  • CSS中怎么使用position属性定位
    CSS中怎么使用position属性定位,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。 posi...
    99+
    2022-10-19
  • CSS定位position属性的示例分析
    这篇文章主要为大家展示了“CSS定位position属性的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS定位position属性的示例分析”这篇文...
    99+
    2022-10-19
  • CSS中如何使用 Positioning定位属性
    CSS中如何使用 Positioning定位属性,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。CSS Positioning定...
    99+
    2022-10-19
  • css中定位position属性怎么使用
    这篇文章将为大家详细讲解有关css中定位position属性怎么使用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。css中定位position属性的用法:1、一般的标签元素不加任何定位属性都属于静态定位;...
    99+
    2023-06-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作