[Cánh diều] Trắc nghiệm Khoa học máy tính 12 bài 11: Mô hình hộp, bố cục trang web
1. Để đạt được responsive design, nhà phát triển web thường sử dụng kết hợp những kỹ thuật CSS nào?
A. Chỉ sử dụng thuộc tính float.
B. Sử dụng Media Queries, Flexbox, và CSS Grid.
C. Chỉ sử dụng thuộc tính position.
D. Chỉ sử dụng thuộc tính display: block.
2. Khi thiết kế một trang web đa cột, công nghệ CSS nào được xem là hiện đại và mạnh mẽ nhất để tạo ra các bố cục phức tạp, linh hoạt và tương thích trên nhiều thiết bị?
A. Float và Clear
B. Inline-block
C. CSS Grid Layout
D. Positioning (Static, Relative, Absolute, Fixed)
3. Trong mô hình hộp, nếu muốn nội dung của phần tử cách đều các cạnh của đường viền, ta sẽ sử dụng thuộc tính nào?
A. margin
B. border
C. padding
D. outline
4. Thuộc tính CSS nào cho phép nhà phát triển web thay đổi cách tính toán tổng chiều rộng và chiều cao của phần tử, bao gồm cả padding và border vào kích thước đã định?
A. box-decoration
B. box-sizing
C. box-model
D. box-layout
5. Để khắc phục tình trạng phần tử cha bị collapse khi chứa các phần tử con đã được float, phương pháp nào sau đây là một giải pháp hiệu quả và phổ biến?
A. Sử dụng thuộc tính display: inline cho phần tử cha.
B. Thêm một phần tử con rỗng với thuộc tính clear: both ở cuối phần tử cha.
C. Đặt thuộc tính float: right cho phần tử cha.
D. Giảm kích thước của các phần tử con đã float.
6. Trong bố cục trang web, display: block có đặc điểm gì nổi bật so với display: inline?
A. Chiếm toàn bộ chiều rộng có sẵn và bắt đầu trên một dòng mới.
B. Chỉ chiếm không gian cần thiết và không bắt đầu trên một dòng mới.
C. Cho phép đặt margin và padding theo mọi hướng.
D. Không thể thay đổi kích thước width và height.
7. Một trang web có bố cục bao gồm một thanh điều hướng (navigation bar) ở trên cùng, một khu vực nội dung chính ở giữa và một chân trang (footer) ở dưới cùng. Đây là một ví dụ về cấu trúc bố cục trang web theo mô hình nào?
A. Bố cục dạng lưới (Grid Layout)
B. Bố cục dạng dòng chảy (Flow Layout)
C. Bố cục theo chiều dọc (Vertical Layout)
D. Bố cục theo chiều ngang (Horizontal Layout)
8. Khi sử dụng thuộc tính float trong CSS để đặt các phần tử bên cạnh nhau, vấn đề phổ biến nhất mà nhà phát triển thường gặp phải là gì?
A. Phần tử cha không bao bọc (collapse) các phần tử con đã float.
B. Phần tử con không hiển thị trên trang.
C. Các phần tử con float chồng lên nhau.
D. Thuộc tính float bị trình duyệt bỏ qua.
9. Khái niệm footer trong bố cục trang web thường chứa những thông tin gì?
A. Logo công ty và slogan chính.
B. Thanh tìm kiếm và các nút mạng xã hội.
C. Thông tin bản quyền, liên hệ, chính sách riêng tư và các liên kết quan trọng khác.
D. Các bài viết nổi bật và bình luận.
10. Trong CSS, thuộc tính padding được sử dụng để làm gì cho một phần tử?
A. Tạo khoảng trống bên ngoài đường viền của phần tử.
B. Tạo khoảng trống bên trong đường viền, giữa nội dung và đường viền.
C. Xác định độ dày và kiểu dáng của đường viền.
D. Thiết lập kích thước tổng thể của phần tử.
11. Một nhà phát triển web muốn tạo một khoảng cách rõ ràng giữa phần tử tiêu đề (heading) và các phần tử văn bản ngay bên dưới nó trên một trang web. Thuộc tính CSS nào nên được ưu tiên sử dụng cho mục đích này?
A. Padding
B. Margin
C. Border
D. Outline
12. Khi một phần tử HTML có thuộc tính width là 300px, padding là 10px, và border là 1px, thì tổng chiều rộng của phần tử đó theo mặc định (không sử dụng box-sizing: border-box) sẽ là bao nhiêu?
A. 300px
B. 310px
C. 322px
D. 301px
13. Trong thiết kế bố cục trang web, khái niệm container thường được sử dụng để làm gì?
A. Định dạng kiểu chữ cho toàn bộ trang web.
B. Tạo một vùng chứa bao bọc và căn giữa nội dung chính của trang.
C. Thiết lập màu nền cho trang web.
D. Xác định kích thước của các nút bấm.
14. Một đoạn mã CSS sử dụng Media Query có dạng `@media (max-width: 768px) { ... }`. Khối mã này sẽ được áp dụng khi nào?
A. Khi chiều rộng màn hình lớn hơn 768px.
B. Khi chiều rộng màn hình bằng hoặc nhỏ hơn 768px.
C. Khi chiều rộng màn hình bằng 768px.
D. Khi chiều cao màn hình nhỏ hơn 768px.
15. Trong thiết kế bố cục trang web, mô hình hộp (box model) là một khái niệm cơ bản dùng để mô tả cách thức trình duyệt hiển thị các đối tượng trên trang. Thành phần nào của mô hình hộp bao gồm không gian xung quanh nội dung, nằm bên ngoài đường viền (border)?
A. Padding (Đệm)
B. Margin (Lề)
C. Border (Viền)
D. Content (Nội dung)
16. Khi xem xét mô hình hộp của một phần tử HTML, thứ tự các lớp bao bọc phần tử từ trong ra ngoài là gì?
A. Content, Border, Padding, Margin
B. Content, Padding, Border, Margin
C. Content, Margin, Padding, Border
D. Content, Border, Margin, Padding
17. Khi sử dụng CSS Grid Layout, thuộc tính grid-template-columns có vai trò gì?
A. Xác định số lượng hàng trong lưới.
B. Định nghĩa các cột và chiều rộng của chúng trong lưới.
C. Thiết lập khoảng cách giữa các hàng.
D. Căn chỉnh nội dung bên trong một ô lưới.
18. Trong Flexbox, thuộc tính justify-content được áp dụng cho phần tử cha (flex container) để làm gì?
A. Căn chỉnh các mục theo chiều dọc (trục chéo).
B. Căn chỉnh khoảng cách giữa các mục theo chiều ngang (trục chính).
C. Xác định thứ tự hiển thị của các mục.
D. Kiểm soát việc các mục có xuống dòng hay không.
19. Khi thiết kế một trang web có thanh điều hướng (navigation bar) cố định ở đầu trang, ngay cả khi người dùng cuộn trang, thuộc tính CSS nào thường được sử dụng cho thanh điều hướng đó?
A. position: static
B. position: relative
C. position: absolute
D. position: fixed
20. Trong bố cục trang web, thuật ngữ header thường dùng để chỉ phần nào của trang?
A. Phần chân trang, chứa thông tin liên hệ và bản quyền.
B. Phần đầu trang, thường chứa logo, tiêu đề trang và thanh điều hướng chính.
C. Khu vực chứa nội dung chính của bài viết.
D. Thanh bên (sidebar) chứa các liên kết phụ.
21. Trong thiết kế web hiện đại, khái niệm responsive design (thiết kế đáp ứng) đề cập đến khả năng của trang web là gì?
A. Tự động thay đổi màu sắc dựa trên sở thích người dùng.
B. Tự động điều chỉnh bố cục và kích thước để hiển thị tốt trên nhiều loại thiết bị và kích thước màn hình khác nhau.
C. Tải nội dung một cách nhanh chóng trên mọi kết nối mạng.
D. Cho phép người dùng tùy chỉnh nội dung xem.
22. Phần tử HTML nào sau đây mặc định có kiểu hiển thị (display) là inline?
23. Một trang web được thiết kế với các khối nội dung chính được sắp xếp theo dạng lưới, mỗi khối có thể có kích thước và vị trí khác nhau. Đây là đặc điểm nổi bật của loại bố cục nào?
A. Bố cục dạng dòng chảy (Flow Layout)
B. Bố cục dạng lưới (Grid Layout)
C. Bố cục dạng cột (Column Layout)
D. Bố cục dạng flex (Flex Layout)
24. Media Queries trong CSS cho phép nhà phát triển web làm gì?
A. Thay đổi màu chữ của trang web.
B. Áp dụng các kiểu CSS khác nhau dựa trên đặc điểm của thiết bị hiển thị (ví dụ: chiều rộng màn hình).
C. Tạo hoạt ảnh cho các phần tử.
D. Tích hợp font chữ tùy chỉnh.
25. Thuộc tính CSS display: flex (Flexbox) chủ yếu được sử dụng để làm gì trong việc sắp xếp các phần tử trên trang web?
A. Tạo bố cục dạng lưới với hàng và cột.
B. Sắp xếp các phần tử theo một hướng duy nhất (hàng hoặc cột) một cách linh hoạt.
C. Chỉ định vị trí cố định của phần tử trên màn hình.
D. Tạo hiệu ứng chuyển động cho các phần tử.
