当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


CSS bottom属性用法及代码示例


底部的CSS属性允许更改元素的垂直位置。 Bottom属性用于设置从视口底部开始的元素位置的值。

用法:

bottom:auto|length|%|initial|inherit;

属性值

  1. auto:这是bottom属性的默认值。它根据浏览器设置bottom属性。

    用法:

    bottom:auto;

    例:



    <html> 
      
    <head> 
        <title> Bottom </title> 
    </head> 
      
    <body> 
        <h1 style="color:darkgreen;">GeeksforGeeks</h1> 
        <p style="position:fixed; bottom:auto;"> 
            This line will be auto adjusted  
            for bottom based on the browser. 
        </p> 
    </body> 
      
    </html>

    输出:

  2. Length:将底边位置设置为px,cm也允许为负值

    用法:

    bottom:5px;

    例:

    <html> 
      
    <head> 
        <title> Bottom </title> 
    </head> 
      
    <body> 
        <h1 style="color:darkgreen;">GeeksforGeeks</h1> 
        <p style="position:fixed; bottom:50px;"> 
            This line will be adjusted for bottom based  
            on the length provided, i.e. 50px. 
        </p> 
        <p style="position:fixed; bottom:-15px;"> 
            This line will be adjusted for bottom based 
            on the length provided, i.e. -15px. 
        </p> 
    </body> 
      
    </html>

    输出:

  3. Percentage:它以包含元素的百分比形式设置值。

    用法:

    bottom:10%;

    例:

    <html> 
      
    <head> 
        <title> Bottom </title> 
    </head> 
      
    <body> 
        <h1 style="color:darkgreen;">GeeksforGeeks</h1> 
        <p style="position:fixed; bottom:10%;"> 
            This line will be adjusted for bottom based  
            on the percentage provided, i.e. 10%. 
        </p> 
        <p style="position:fixed; bottom:-5%;"> 
            This line will be adjusted for bottom based  
            on the percentage provided, i.e. -5%. 
        </p> 
    </body> 
      
    </html>

    输出:

  4. initial:它将属性值设置为其默认值。

    用法:

    bottom:auto;

    例:

    <html> 
      
    <head> 
        <title> Bottom </title> 
    </head> 
      
    <body> 
        <h1 style="color:darkgreen;">GeeksforGeeks</h1> 
        <p style="position:fixed; bottom:initial;"> 
            This line will be adjusted for bottom based  
            on the initial value of the browser. 
        </p> 
    </body> 
      
    </html>

    输出:

  5. inherit:它从父元素继承位置。

    用法:

    bottom:auto;

    例:

    <html> 
      
    <head> 
        <title> Bottom </title> 
    </head> 
      
    <body> 
        <h1 style="color:darkgreen;">GeeksforGeeks</h1> 
        <p style="position:fixed; bottom:inherit;"> 
            This line will inherit the position  
            from the parent element. 
        </p> 
    </body> 
      
    </html>

    输出:

  6. 支持的浏览器:下面列出了受底部属性支持的浏览器:

  • 谷歌浏览器
  • IE浏览器
  • Firefox
  • Opera
  • Safari



相关用法


注:本文由纯净天空筛选整理自MayankKhare大神的英文原创作品 CSS | bottom Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。