Thuộc tính bottom CSS
- trang trước border-width
- trang kế tiếp box-decoration-break
Định nghĩa và cách sử dụng
Thuộc tính bottom quy định cạnh dưới của phần tử. Thuộc tính này xác định độ lệch từ cạnh dưới của cạnh ngoại vi của phần tử định vị đến cạnh dưới của khối bao gồm.
Chú ý:Nếu giá trị của thuộc tính "position" là "static", việc thiết lập thuộc tính "bottom" sẽ không có bất kỳ hiệu ứng nào.
Giải thích
Đối với phần tử static, giá trị là auto; đối với giá trị chiều dài, là chiều dài tuyệt đối tương ứng; đối với giá trị phần trăm, là giá trị đã chỉ định; nếu không, là auto.
Đối với phần tử được định nghĩa tương đối, nếu cả bottom và top đều là auto, giá trị tính toán của cả hai đều là 0; nếu một trong hai là auto,则取另一个值的相反数;nếu cả hai đều không phải là auto, bottom sẽ lấy giá trị ngược lại của top.
Xem thêm:
Giáo trình CSS:Định vị CSS
Tài liệu tham khảo HTML DOM:Thuộc tính bottom
Ví dụ
Đặt cạnh dưới của hình ảnh cao 5 pixel so với cạnh dưới của phần tử bao gồm:
img { position:absolute; bottom:5px; }
Cú pháp CSS
bottom: auto|length|initial|inherit;
Giá trị thuộc tính
Giá trị | Mô tả |
---|---|
auto | Giá trị mặc định. Trình duyệt tính toán vị trí dưới của phần tử. |
% | Thiết lập vị trí cạnh dưới của phần tử bằng phần trăm so với kích thước của phần tử bao gồm. Có thể sử dụng giá trị âm. |
length | Thiết lập vị trí cạnh dưới của phần tử bằng các đơn vị như px, cm v.v. Có thể sử dụng giá trị âm. |
inherit | Định nghĩa rằng thuộc tính bottom nên kế thừa giá trị từ phần tử cha. |
Chi tiết kỹ thuật
Giá trị mặc định: | auto |
---|---|
Kế thừa: | no |
Phiên bản: | CSS2 |
Cú pháp JavaScript: | object.style.bottom="50px" |
Các ví dụ khác
- Thiết lập cạnh dưới của hình ảnh bằng giá trị pixel
- Ví dụ này minh họa cách sử dụng giá trị pixel để thiết lập cạnh dưới của hình ảnh.
- Thiết lập cạnh dưới của hình ảnh bằng phần trăm
- Ví dụ này minh họa cách sử dụng phần trăm để thiết lập cạnh dưới của hình ảnh.
Hỗ trợ trình duyệt
Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
- trang trước border-width
- trang kế tiếp box-decoration-break