Bài viết này sẽ trình bày các tiện ích có thể được sử dụng để kiểm soát vị trí của các phần tử được định vị trên trang web.
Tiện ích Tailwind được sử dụng để kiểm soát vị trí của các phần tử được định vị?
Tiện ích CSS Tailwind xử lý cụ thể việc sắp xếp các phần tử được định vị theo cả trục ngang hoặc trục dọc là “ Đầu trang | Đúng | Dưới cùng | Bên trái ”. Cũng giống như các tiện ích khác, nó cũng cung cấp nhiều lớp khác nhau có thể đặt phần tử được định vị ở nhiều vị trí khác nhau, một số lớp này được nêu dưới đây:
- inset-{placementValue}
- bắt đầu-{placementValue}
- top-{placementValue}
- cuối-{placementValue}
- dưới cùng-{placementValue}
- trái-{placementValue}
- phải-{placementValue}
Bây giờ, hãy lấy một ví dụ thực tế để sử dụng một số lớp này để hiểu rõ hơn.
Ví dụ: Vị trí của phần tử được định vị bằng tiện ích CSS Tailwind
Trong ví dụ này, tiện ích được mô tả ở trên sẽ được sử dụng để đặt phần tử được định vị ở các vị trí khác nhau trên trang web, như được hiển thị bên dưới:
< thân hình lớp học = 'lưới lưới-cols-3' >
< div lớp học = 'tương đối h-32 w-32 bg-orange-200 p-4 m-4 văn bản-trung tâm căn đều-kéo tròn' >
< div lớp học = 'tuyệt đối trái-0 top-0 h-16 w-16 bg-blue-400 làm tròn p-4' > Mục 1 < / div >
< / div >
< div lớp học = 'tương đối h-32 w-32 bg-orange-200 p-4 m-4 văn bản-trung tâm căn đều-kéo tròn' >
< div lớp học = 'inset-x-0 tuyệt đối top-0 h-16 bg-blue-400 làm tròn p-4' > Mục 2 < / div >
< / div >
< div lớp học = 'tương đối h-32 w-32 bg-orange-200 p-4 m-4 văn bản-trung tâm căn đều-kéo tròn' >
< div lớp học = 'tuyệt đối in-0 bg-blue-400 làm tròn p-4' > Mục 3 < / div >
< / div >
< div lớp học = 'tương đối h-32 w-32 bg-orange-200 p-4 m-4 văn bản-trung tâm căn đều-kéo tròn' >
< div lớp học = 'tuyệt đối in-y-0 phải-0 w-16 bg-blue-400 làm tròn p-4' > Mục 4 < / div >
< / div >
< div lớp học = 'tương đối h-32 w-32 bg-orange-200 p-4 m-4 văn bản-trung tâm căn đều-kéo tròn' >
< div lớp học = 'đáy tuyệt đối-0 phải-0 h-16 w-16 bg-blue-400 làm tròn p-4' > Mục 5 < / div >
< / div >
< / thân hình >
Mô tả đoạn mã trên:
- Đầu tiên, tạo năm cha mẹ “ div ” và áp dụng các lớp CSS Tailwind khác nhau để đặt vị trí tương đối, chiều cao, chiều rộng, nền, phần đệm, lề, v.v.
- Tiếp theo, tạo một “lồng nhau” div ” bên trong mỗi phần tử cha “div”. Vị trí sẽ được thực hiện cho phần tử “div” lồng nhau này.
- Sau đó, áp dụng các lớp CSS tailwind của “ tuyệt đối ”, “ h ”, “ TRONG ”, “ bg ”, ” P ', Và ' làm tròn ” để tạo kiểu cho phần lồng nhau “ div ' yếu tố.
- Sau đó, bắt đầu từ div lồng nhau từ một đến năm, gán các lớp mới của “ trái-0 trên cùng-0 ”, “ chèn-x-0 ”, “ chèn-0 ”, “ chèn-y-0 phải-0 ', Và ' dưới cùng-0 bên phải-0 ' tương ứng.
- Các lớp này đặt vị trí của các phần tử div lồng nhau ở góc trên cùng bên trái, bao phủ vị trí trên cùng, bao phủ toàn bộ không gian cha mẹ, bao phủ phía bên phải và bao phủ vị trí dưới cùng bên trái tương ứng.
Sau khi thực thi, bản xem trước của các phần tử div trông như thế này:
Đầu ra cho thấy các phần tử được định vị được đặt ở vị trí mong muốn.
Phần kết luận
Các ' Đầu trang | Đúng | Dưới cùng | Bên trái ” Tiện ích Tailwind được sử dụng để kiểm soát vị trí của các thành phần trên trang web. Nó sử dụng một số lớp để nhắm mục tiêu vào từng vị trí và sau đó di chuyển phần tử đã chọn tại vị trí đó theo yêu cầu. Các lớp này chủ yếu đặt các phần tử được định vị ở bên trái, bên phải, dưới cùng và trên cùng. Chúng có thể giúp bao phủ toàn bộ khu vực, bao phủ các hướng cụ thể như bên trái hoặc trên cùng, v.v. Bài viết này đã giải thích thành công các tiện ích có thể được sử dụng để kiểm soát vị trí của các phần tử được định vị.