Câu hỏi tự luận mức độ vận dụng cao Khoa học máy tính 12 cd bài 11: Mô hình hộp, bố cục trang web

Câu 1: 

Thuộc tính box-sizing xác định cách tính toán kích thước của phần tử. Khi sử dụng box-sizing: border-box;, kích thước của phần tử bao gồm cả padding và border, giúp dễ dàng kiểm soát kích thước tổng thể của phần tử mà không cần phải tính toán thêm. Điều này giúp tránh việc phần tử bị vượt quá kích thước mong muốn, cải thiện tính ổn định và dễ dàng trong việc thiết kế giao diện.

Câu 2:

Thuộc tính overflow xác định cách xử lý nội dung vượt quá kích thước của phần tử. Các giá trị phổ biến bao gồm:

+ visible: Nội dung vượt quá sẽ hiển thị ra ngoài phần tử.

+ hidden: Nội dung vượt quá sẽ bị ẩn đi.

+ scroll: Thêm thanh cuộn để người dùng có thể xem nội dung bị ẩn.

+ auto: Tự động thêm thanh cuộn nếu cần thiết.

Câu 3: 

Thuộc tính position xác định cách một phần tử được định vị trong trang. Các giá trị phổ biến bao gồm:

+ static: Giá trị mặc định, phần tử được định vị theo luồng tài liệu.

+ relative: Định vị phần tử tương đối so với vị trí ban đầu của nó.

+ absolute: Định vị phần tử tương đối so với phần tử cha gần nhất có thuộc tính position khác static.

+ fixed: Định vị phần tử tương đối so với cửa sổ trình duyệt, giữ nguyên vị trí khi cuộn trang.

+ sticky: Kết hợp giữa relative và fixed, phần tử sẽ dính vào vị trí khi cuộn đến một điểm nhất định.

Câu 4: 

Thuộc tính z-index xác định thứ tự xếp chồng của các phần tử khi chúng chồng lên nhau. Giá trị của z-index có thể là số nguyên dương, âm hoặc 0, với giá trị cao hơn sẽ nằm trên các phần tử có giá trị thấp hơn. Điều này rất quan trọng trong việc quản lý giao diện người dùng, đặc biệt khi làm việc với các phần tử có vị trí absolute, relative, hoặc fixed. Sử dụng z-index giúp đảm bảo rằng các phần tử quan trọng được hiển thị đúng cách và không bị che khuất bởi các phần tử khác.