CSS 是一種用于網頁樣式設計的語言,可以通過 CSS 中的 bottom 屬性控制元素相對于其容器底部的位置。
.box { position: absolute; bottom: 0; width: 300px; height: 200px; background-color: #ccc; }
上面的代碼中,.box 是一個絕對定位的元素,寬度為 300px,高度為 200px,背景色為 #ccc。由于設置了 bottom: 0,因此 .box 將緊貼其容器底部。
如果想讓元素通過動畫鏈接底部的位置變化,可以使用 CSS 的 transition 屬性。
.box { position: absolute; bottom: 0; width: 300px; height: 200px; background-color: #ccc; transition: bottom .3s ease-in-out; } .box:hover { bottom: 20px; }
上面的代碼中,在 .box 上設置了 transition 屬性,當 hover .box 時,bottom 屬性將從 0 變為 20px,變化時間為 0.3 秒,變化方式為 ease-in-out 緩動。
bottom 還可用于自適應底部固定欄的實現。
.footer { position: fixed; bottom: 0; width: 100%; height: 50px; }
上面的代碼中,.footer 是一個固定定位的元素,寬度為 100%,高度為 50px。由于設置了 bottom: 0,因此 .footer 將固定在頁面底部。
上一篇css+csgo