Trắc nghiệm đúng sai Khoa học máy tính 12 chân trời Bài F11: Định kiểu CSS cho bảng và phần tử

BÀI F11. ĐỊNH KIỂU CHO BẢNG VÀ PHẦN TỬ <DIV>

Câu 1: Một lập trình viên muốn tạo một bảng hiển thị danh sách học sinh với đường viền đơn, hàng tiêu đề có màu xanh và các hàng xen kẽ có màu xám nhạt. Anh ta viết đoạn mã CSS sau:

Sau khi kiểm tra, anh ta nhận thấy bảng vẫn hiển thị đường viền đôi giữa các ô. Cách khắc phục lỗi này là:

a. Thay border-collapse: separate; bằng border-collapse: collapse;
b. Thêm td { border: 1px solid black; } để các ô có đường viền rõ ràng
c. Dùng table-layout: fixed; để các ô không bị kéo giãn
d. Loại bỏ dòng border: 1px solid black; vì nó không cần thiết

Đáp án:

- A, B đúng

- C, D sai

Câu 2: Một nhóm học sinh đang tạo trang web kỷ yếu và muốn bố cục phần "Thành viên lớp" có 3 cột:

- Cột 1: Ảnh đại diện

- Cột 2: Họ tên và thông tin cá nhân

- Cột 3: Nút "Xem chi tiết"

Hai phương án CSS được đưa ra:

Cách 1 – Dùng Flexbox:

Cách 2 – Dùng CSS Grid:

Nhận định về 2 cách tiếp cận trên:

a. Flexbox phù hợp hơn khi nội dung cột 2 có chiều dài khác nhau và cần tự động điều chỉnh
b. CSS Grid giúp giữ bố cục cố định và dễ kiểm soát kích thước từng cột hơn
c. Flexbox giúp căn chỉnh hàng ngang tốt hơn, nhưng khó kiểm soát bố cục tổng thể
d. Cả hai cách đều không phù hợp, tốt hơn nên dùng <table> để hiển thị danh sách thành viên

Câu 3: Một lập trình viên đang thiết kế bố cục trang web có ba phần chính: thanh bên trái (sidebar), nội dung chính (main content) và thanh bên phải (extra sidebar). Anh ta muốn bố cục như sau:

- Thanh bên trái (sidebar): Chiếm 20% chiều rộng, nằm bên trái

- Nội dung chính (main content): Chiếm phần diện tích còn lại

- Thanh bên phải (extra sidebar): Chiếm 20% chiều rộng, nằm bên phải

Anh ta sử dụng đoạn CSS sau:

Tuy nhiên, khi kiểm tra trên trình duyệt, thanh bên phải bị đẩy xuống dưới thay vì nằm ngang cùng hàng với phần còn lại. Nguyên nhân và cách khắc phục hợp lý là:

a. Tổng chiều rộng của .sidebar và .extra-sidebar quá lớn, cần giảm xuống dưới 20% mỗi bên
b. Cần thêm flex-shrink: 0; vào .extra-sidebar để ngăn nó bị thu nhỏ làm mất cân đối
c. Dùng justify-content: space-between; trong .container để các phần tử tự giãn đều và giữ bố cục ngang
d. Kiểm tra xem có khoảng trắng không mong muốn giữa các phần tử và loại bỏ bằng margin: 0;

--------------- Còn tiếp ---------------