Sử dụng CSS để đặt các phần tử HTML

• Tháng Tư 25, 2024

Các quy tắc CSS cung cấp cho bạn khả năng đặt các phần tử HTML chính xác vào nơi bạn muốn. Bạn có thể điều chỉnh cách họ phản ứng với các yếu tố khác đang ngồi xung quanh họ, hoặc thậm chí che giấu chúng hoàn toàn. Đây là một sự cố về các thuộc tính vị trí CSS.

Hiển thị: Thuộc tính này xác định cách hiển thị một phần tử. Cài đặt hiển thị thành "không" ẩn hoàn toàn phần tử, trong khi các giá trị khác có thể thay đổi cách phần tử phản ứng với các thuộc tính và phần tử khác. Ví dụ: div được đặt để hiển thị dưới dạng "chặn" theo mặc định, có nghĩa là nó hoạt động như một đối tượng hình chữ nhật, nhưng bạn có thể sử dụng "display: inline" để buộc div hoạt động như một đoạn thay thế. Hoặc, bạn có thể làm ngược lại và sử dụng "display: block" để buộc một đoạn hoạt động như một div.

Vị trí: Xác định cách một phần tử phản ứng với các phần tử xung quanh nó. Các phần tử sử dụng "vị trí: tĩnh" theo mặc định, có nghĩa là chúng hiển thị theo thứ tự khi chúng xuất hiện trong mã HTML. "Vị trí: tương đối" có nghĩa là vị trí tĩnh của phần tử được tính toán, và sau đó bù lại bằng bất cứ thứ gì bạn chỉ ra trong thuộc tính "trên cùng" và "bên trái". Các phần tử trang khác hoạt động như thể phần tử tương đối vẫn ở vị trí tĩnh của nó. Các phần tử "Position: tuyệt đối" bỏ qua vị trí tĩnh của chúng, chỉ dựa vào các giá trị trong các thuộc tính trên cùng, bên trái, bên phải và dưới cùng. Ngoài ra, các yếu tố khác sẽ bỏ qua yếu tố đó (vì vậy nếu bạn không cẩn thận, bạn có thể kết thúc với một số chồng chéo lộn xộn). "Vị trí: đã sửa" tương tự như "vị trí: tuyệt đối" ngoại trừ phần tử sẽ giữ vị trí của nó ngay cả khi khách truy cập của bạn cuộn trang.

Hiển thị: Quyết định nếu một yếu tố hiển thị trên trang hay không. Sự khác biệt giữa "display: none" và "mức độ hiển thị: ẩn" là trong trường hợp trước, các thành phần trang khác hoạt động như thể đối tượng vô hình không tồn tại; trong phần sau, các phần tử khác sẽ giữ một vị trí cho phần tử ẩn. Rõ ràng, cài đặt mặc định là "hiển thị."

Float: Đặt liệu một phần tử xếp tầng sang trái hay phải của các phần tử khác (hoặc hoàn toàn không phải là tầng, đó là mặc định). Khách sạn này cực kỳ hữu ích trong việc có được các yếu tố tương đối được định vị chính xác. Bạn phải đặt chiều rộng cho bất kỳ phần tử nổi nào hoặc nó sẽ không hiển thị chính xác. Ngoài ra, nếu bạn sử dụng float cho một phần tử, có thể bạn cũng sẽ muốn đặt thuộc tính cho tất cả các phần tử xung quanh nó.

Xóa: Thuộc tính này hoạt động cùng với thuộc tính "float". Nó quyết định làm thế nào phần tử sẽ cho các phần tử khác nổi xung quanh nó - "xóa: bên trái" có nghĩa là không có phần tử nào khác có thể nổi bên trái của nó; "Clear: right" chặn bên phải và "Clear: cả hai" có nghĩa là không có phần tử nào có thể nổi sang hai bên. Cài đặt mặc định là "xóa: không" (có nghĩa là các yếu tố khác có thể nổi sang hai bên).

Video HướNg DẫN: [Học CSS - 17] Thuộc tính position (Tháng Tư 2024).