CSS - Tính chất Bottom: Khám phá Định vị Phần tử
Xin chào các nhà pháp sư CSS tương lai! Hôm nay, chúng ta sẽ lặn sâu vào thế giới kỳ diệu của tính chất bottom trong CSS. Là giáo viên khoa học máy tính hàng xóm thân thiện của bạn, tôi ở đây để hướng dẫn bạn trong hành trình này, từng bước một. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau bắt đầu cuộc phiêu lưu thú vị này!
Tính chất CSS bottom là gì?
Trước khi chúng ta đi vào chi tiết, hãy bắt đầu với những điều cơ bản. Tính chất CSS bottom giống như một枝 c魔法, cho phép bạn định vị các phần tử từ dưới lên của phần tử chứa nó. Nó là một phần của bộ công cụ định vị CSS, hoạt động cùng với các tính chất như top, left, và right.
Hãy tưởng tượng rằng bạn đang cung cấp cho các phần tử HTML của bạn một bộ tọa độ, chỉ định chính xác nơi chúng nên đặt trên trang web của bạn. Đó giống như chơi một trò chơi Tetris kỹ thuật số, nhưng thay vì các khối rơi, bạn đang sắp xếp các phần tử web!
Các giá trị có thể
Bây giờ, hãy xem xét các giá trị khác nhau mà tính chất bottom của chúng ta có thể lấy. Đó giống như chọn từ một thực đơn các tùy chọn định vị:
| Giá trị | Mô tả |
|---|---|
| auto | Trình duyệt tính toán vị trí.bottom |
| length | Chỉ định vị trí.bottom theo px, pt, cm, v.v. |
| % | Chỉ định vị trí.bottom theo % của phần tử chứa |
| inherit | Kế thừa giá trị từ phần tử cha |
| initial | Đặt thuộc tính này thành giá trị mặc định |
Hãy xem chúng trong hành động với một số ví dụ mã:
/* Sử dụng giá trị pixel */
.box1 {
bottom: 20px;
}
/* Sử dụng phần trăm */
.box2 {
bottom: 10%;
}
/* Sử dụng 'auto' */
.box3 {
bottom: auto;
}Trong các ví dụ trên, box1 sẽ được định vị cách dưới 20 pixel, box2 sẽ cách dưới 10% của phần tử chứa, và box3 sẽ để trình duyệt quyết định vị trí.bottom của nó.
Áp dụng cho
Tính chất bottom không phải là một giải pháp một kích cỡ phù hợp với tất cả. Nó chỉ hoạt động nếu phần tử có giá trị vị trí được chỉ định. Hãy xem các loại vị trí mà nó áp dụng:
- Absolute
- Relative
- Fixed
- Sticky
Chúng ta sẽ khám phá từng loại chi tiết shortly. Nhưng hãy nhớ, bottom không ảnh hưởng đến các phần tử được định vị tĩnh (vị trí mặc định).
Cú pháp DOM
Đối với những bạn thích làm việc với JavaScript, đây là cách bạn có thể thao tác tính chất bottom sử dụng Document Object Model (DOM):
object.style.bottom = "20px"Dòng mã này sẽ đặt tính chất bottom của một phần tử thành 20 pixel. Đó giống như cho phần tử của bạn một cái đẩy từ dưới lên!
CSS bottom - Với Định vị Absolute
Bây giờ, hãy lặn sâu vào các loại vị trí khác nhau, bắt đầu với định vị tuyệt đối. Khi một phần tử được định vị tuyệt đối, nó sẽ bị loại khỏi luồng tài liệu bình thường và được định vị tương đối so với phần tử tổ tiên được định vị gần nhất.
.parent {
position: relative;
height: 200px;
background-color: #f0f0f0;
}
.child {
position: absolute;
bottom: 20px;
right: 20px;
background-color: #ff9900;
padding: 10px;
}<div class="parent">
<div class="child">Tôi được định vị tuyệt đối!</div>
</div>Trong ví dụ này, phần tử con sẽ được định vị cách dưới 20 pixel và cách phải 20 pixel so với phần tử chứa của nó. Đó giống như cho phần tử của bạn một座位 trong rạp hát của trang web của bạn!
CSS bottom - Với Định vị Relative
Định vị tương đối hoạt động hơi khác. Phần tử được định vị tương đối so với vị trí bình thường của nó, và các phần tử khác điều chỉnh xung quanh nó.
.box {
position: relative;
bottom: 30px;
background-color: #00ff00;
padding: 10px;
}<div class="box">Tôi được định vị tương đối!</div>Box màu xanh lá cây này sẽ dịch chuyển 30 pixel lên từ vị trí bình thường của nó. Đó giống như bảo phần tử của bạn, "Di chuyển lên một chút, nhưng giữ vị trí của bạn trong hàng!"
CSS bottom - Với Định vị Fixed
Định vị cố định giống như cho phần tử của bạn một thẻ VIP vĩnh viễn. Nó ở nguyên vị trí ngay cả khi trang được cuộn.
.header {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #333;
color: white;
padding: 10px;
}<div class="header">Tôi là footer cố định!</div>Điều này tạo ra một footer dính ở dưới cùng của viewport, luôn hiển thị không matter bao nhiêu bạn cuộn. Nó hoàn hảo cho thông tin quan trọng hoặc điều hướng mà bạn muốn giữ luôn khả dụng.
CSS bottom - Với Định vị Sticky
Định vị dính là người mới trong街区. Nó là sự kết hợp giữa định vị tương đối và cố định. Phần tử được coi là định vị tương đối cho đến khi nó vượt qua một ngưỡng cụ thể, sau đó nó trở thành cố định.
.sticky-note {
position: sticky;
bottom: 20px;
background-color: #ffff00;
padding: 10px;
}<div class="sticky-note">Tôi là note dính!</div>Note vàng này sẽ cuộn cùng trang cho đến khi nó cách dưới 20 pixel của viewport, sau đó nó sẽ dính ở đó. Đó giống như một note Post-it kỹ thuật số cho trang web của bạn!
CSS bottom - Với Định vị Static
Cuối cùng, hãy nói về định vị tĩnh. Đây là vị trí mặc định cho tất cả các phần tử, nhưng có một điều - tính chất bottom không có hiệu lực trên các phần tử được định vị tĩnh!
.static-box {
position: static;
bottom: 50px; /* Điều này sẽ không có hiệu lực */
background-color: #ff00ff;
padding: 10px;
}<div class="static-box">Tôi được định vị tĩnh!</div>Trong ví dụ này, ngay cả khi chúng ta đã đặt giá trị bottom, box màu tím sẽ không di chuyển khỏi vị trí bình thường của nó trong luồng tài liệu. Đó giống như cố gắng di chuyển một ngọn núi - nó sẽ không xảy ra!
Và thế là xong, các bạn! Chúng ta đã cùng nhau hành trình qua vùng đất của CSS định vị, khám phá tính chất bottom trong tất cả vẻ đẹp của nó. Nhớ rằng, việc thành thạo định vị CSS giống như học khiêu舞 - nó đòi hỏi sự thực hành, nhưng một khi bạn đã nắm vững nhịp điệu, bạn có thể tạo ra những bố cục đẹp mắt, hài hòa sẽ làm cho trang web của bạn hát lên!
Tiếp tục thử nghiệm, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ với nó. Cuối cùng, phát triển web không chỉ là khoa học mà còn là nghệ thuật. Chúc các bạn may mắn trong việc mã hóa, những nhà pháp sư CSS tương lai!
Credits: Image by storyset