底部的CSS属性允许更改元素的垂直位置。 Bottom属性用于设置从视口底部开始的元素位置的值。
用法:
bottom:auto|length|%|initial|inherit;
属性值
- 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>
输出:
- 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>
输出:
- 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>
输出:
- 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>
输出:
- 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>
输出:
支持的浏览器:下面列出了受底部属性支持的浏览器:
- 谷歌浏览器
- IE浏览器
- Firefox
- Opera
- Safari
相关用法
- CSS margin-bottom属性用法及代码示例
- CSS padding-bottom属性用法及代码示例
- CSS border-bottom-left-radius属性用法及代码示例
- CSS border-bottom-width用法及代码示例
- CSS border-bottom-right-radius属性用法及代码示例
- CSS border-bottom属性用法及代码示例
- CSS border-bottom-color用法及代码示例
- CSS - border-bottom-style用法及代码示例
- CSS scroll-margin-bottom属性用法及代码示例
- HTML DOMRect bottom用法及代码示例
- CSS transition-property用法及代码示例
- PHP SplDoublyLinkedList bottom()用法及代码示例
注:本文由纯净天空筛选整理自MayankKhare大神的英文原创作品 CSS | bottom Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。