• HTML的定位属性


    position    用于定义一个元素是否absolute(绝对),relative(相对),static(静态),或者fixed(固定)

    top
    层距离顶点纵坐标的距离

    left
    层距离顶点横坐标的距离

    width
    层的宽度,可以用一个长度或“auto”值来指定其宽度,不允许使用负值

    height
    层的高度,可以用一个长度或“auto”值来指定高度,不允许使用负值

    z-index
    决定层的先后顺序和覆盖关系,值高的元素会覆盖比较低的元素

    display
    是一个显示属性,设定block值是以块显示,在元素后面添加换行符,既其他元素不能在其后面并列显示。如果设定inline值则内联显示,在元素后面删除换行符,多个元素可以在一行内并列显示。使用值none将关闭指定元素及其子元素的显示。

    visibility
    这个属性针对嵌套层的设置,如果存在嵌套的层(子层)和被嵌套的层(父层)时,可以使用inherit值设置子层继承父层的可见性,如果父层可见,子层也可见。当使用visible值时,无论父层是否可见,子层都可见。而值为hidden时,无论父层是否可见,子层都隐藏。

    overflow
    用于设置层内的内容超出层所容纳的范围处理方式,为该属性设置visible值时,无论层的大小,内容都会显示出来。当设置hidden值时,会隐藏超出层大小的内容。当设置值为scroll时,不管内容是否超出层的范围,选中此项都会为层添加滚动条。而值使用auto时,只在内容超出层范围时才显示滚动条。
    -->

     1 <!--
     2 position    用于定义一个元素是否absolute(绝对),relative(相对),static(静态),或者fixed(固定)
     3 
     4 top
     5 层距离顶点纵坐标的距离
     6 
     7 left
     8 层距离顶点横坐标的距离
     9 
    10 width
    11 层的宽度,可以用一个长度或“auto”值来指定其宽度,不允许使用负值
    12 
    13 height
    14 层的高度,可以用一个长度或“auto”值来指定高度,不允许使用负值
    15 
    16 z-index
    17 决定层的先后顺序和覆盖关系,值高的元素会覆盖比较低的元素
    18 
    19 display
    20 是一个显示属性,设定block值是以块显示,在元素后面添加换行符,既其他元素不能在其后面并列显示。如果设定inline值则内联显示,在元素后面删除换行符,多个元素可以在一行内并列显示。使用值none将关闭指定元素及其子元素的显示。
    21 
    22 visibility
    23 这个属性针对嵌套层的设置,如果存在嵌套的层(子层)和被嵌套的层(父层)时,可以使用inherit值设置子层继承父层的可见性,如果父层可见,子层也可见。当使用visible值时,无论父层是否可见,子层都可见。而值为hidden时,无论父层是否可见,子层都隐藏。
    24 
    25 overflow
    26 用于设置层内的内容超出层所容纳的范围处理方式,为该属性设置visible值时,无论层的大小,内容都会显示出来。当设置hidden值时,会隐藏超出层大小的内容。当设置值为scroll时,不管内容是否超出层的范围,选中此项都会为层添加滚动条。而值使用auto时,只在内容超出层范围时才显示滚动条。
    27 -->
    28 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    29 <html xmlns="http://www.w3.org/1999/xhtml">
    30 <head>
    31 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    32 <title>HTML的定位属性</title>
    33 <style>
    34     a:hover{
    35         position:relative;
    36         left:1px;
    37         top:1px;
    38     }
    39     #main{
    40             300px;
    41             height:200px;
    42             background:red;
    43             position:absolute;
    44             left:50%;
    45             top:50%;
    46             margin-left:-150px;
    47             margin-top:-100px;
    48         }
    49 </style>
    50 </head>
    51 
    52 <body>
    53     <a href="#">aaaaaaaaaa</a><br />
    54     <a href="#">aaaaaaaaaa</a><br />
    55     <a href="#">aaaaaaaaaa</a><br />
    56     <a href="#">aaaaaaaaaa</a><br />
    57     <div id="main">
    58            aaaaaaa
    59     </div>
    60 </body>
    61 </html>
  • 相关阅读:
    HDU1150(最小顶点覆盖)
    HDU2444(二分图判定+最大匹配)
    HDU1083(最大匹配)
    POJ3041(最小顶点覆盖)
    HDU2874(LCA应用:求两点之间距离,图不连通)
    UESTC(LCA应用:求两点之间的距离)
    HDU2586(LCA应用:在带权树中求任意两点之间的距离)
    POJ1986(LCA应用:求两结点之间距离)
    jmeter(54)-jmeter元件的作用域与执行顺序
    jmeter(53)-如何保证jenkins+ant+jmeter持续集成接口自动化生成的测试报告不会重复?
  • 原文地址:https://www.cnblogs.com/Y-HKL/p/5247484.html
Copyright © 2020-2023  润新知