Trắc nghiệm Tin học ứng dụng 12 Cánh diều bài 11: Mô hình hộp, bố cục trang web

0

Bạn đã sẵn sàng chưa? 45 phút làm bài bắt đầu!!!

Bạn đã hết giờ làm bài! Xem kết quả các câu hỏi đã làm nhé!!!


Trắc nghiệm Tin học ứng dụng 12 Cánh diều bài 11: Mô hình hộp, bố cục trang web

Trắc nghiệm Tin học ứng dụng 12 Cánh diều bài 11: Mô hình hộp, bố cục trang web

1. Media queries trong CSS được sử dụng để làm gì trong responsive design?

A. Xác định màu sắc chủ đạo 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ị hoặc cửa sổ trình duyệt (ví dụ: chiều rộng màn hình).
C. Tạo các hiệu ứng âm thanh.
D. Kiểm tra lỗi cú pháp CSS.

2. Khi sử dụng CSS Grid, thuộc tính nào được áp dụng cho phần tử cha để định nghĩa các cột của lưới?

A. grid-template-rows
B. grid-template-columns
C. grid-gap
D. align-items

3. Thuộc tính "outline" khác với "border" ở điểm nào?

A. "Outline" không có màu sắc, "border" có màu sắc.
B. "Outline" không chiếm không gian trong bố cục, còn "border" có chiếm không gian.
C. "Outline" chỉ áp dụng cho phần tử "inline", còn "border" cho phần tử "block".
D. "Outline" luôn là đường nét đứt, "border" luôn là đường liền.

4. Thuộc tính nào trong CSS được sử dụng để xác định khoảng cách giữa nội dung của một phần tử và đường viền của nó?

A. Margin
B. Border
C. Padding
D. Outline

5. Phần tử nào sau đây có "display" mặc định là "block"?

A.
B.
C.
D.

6. Thuộc tính "position" trong CSS được sử dụng để làm gì?

A. Xác định kiểu hiển thị của phần tử (block, inline).
B. Kiểm soát cách phần tử được định vị trong luồng văn bản thông thường hoặc theo các tham chiếu khác.
C. Áp dụng kiểu dáng cho đường viền của phần tử.
D. Tạo hiệu ứng chuyển động cho phần tử.

7. Vấn đề phổ biến gặp phải khi sử dụng thuộc tính "float" là gì, và cách khắc phục thường được sử dụng là gì?

A. Phần tử con bị tràn ra ngoài; khắc phục bằng "overflow: hidden".
B. Phần tử cha bị "sập" (collapse) do không chứa chiều cao của các phần tử con float; khắc phục bằng "clearfix" hoặc "overflow: hidden".
C. Khoảng cách giữa các phần tử bị sai; khắc phục bằng "margin: auto".
D. Phần tử không hiển thị; khắc phục bằng "display: block".

8. Thuộc tính "z-index" trong CSS được sử dụng để làm gì?

A. Xác định chiều rộng của phần tử.
B. Kiểm soát thứ tự xếp chồng (stacking order) của các phần tử định vị (positioned elements).
C. Tạo hiệu ứng chuyển động cho phần tử.
D. Thay đổi màu sắc của phần tử.

9. Trong Flexbox, thuộc tính nào được áp dụng cho phần tử cha để điều khiển cách các phần tử con được sắp xếp trên một dòng (hoặc cột)?

A. align-items
B. justify-content
C. flex-direction
D. display: flex

10. Trong các giá trị của thuộc tính "display", giá trị nào cho phép phần tử có thể đặt chiều rộng, chiều cao và căn chỉnh theo chiều dọc?

A. inline
B. inline-block
C. none
D. list-item

11. Khi thuộc tính "box-sizing" được đặt là "border-box", điều gì sẽ xảy ra với chiều rộng (width) và chiều cao (height) của một phần tử?

A. Chiều rộng và chiều cao sẽ bao gồm cả padding và border.
B. Chiều rộng và chiều cao chỉ bao gồm nội dung.
C. Padding và border sẽ được thêm vào bên ngoài chiều rộng và chiều cao đã định.
D. Chiều rộng và chiều cao sẽ tự động điều chỉnh theo nội dung.

12. Trong thiết kế bố cục trang web, khái niệm "mô hình hộp" (box model) chủ yếu mô tả điều gì?

A. Cách trình duyệt hiển thị các phần tử văn bản.
B. Cách mỗi phần tử HTML được biểu diễn dưới dạng một hình chữ nhật với các thuộc tính về khoảng cách và đường viền.
C. Cơ chế hoạt động của các liên kết nội bộ trong trang web.
D. Quy trình xử lý dữ liệu form trên máy chủ.

13. Khi sử dụng "float: left" cho một phần tử, nó sẽ được đẩy về phía nào của container?

A. Phía phải.
B. Phía trái.
C. Giữa.
D. Cuối cùng.

14. Để tạo bố cục dạng lưới (grid layout) hoặc dạng flexbox, bạn thường sử dụng những thuộc tính CSS nào?

A. float và clear.
B. display: grid và display: flex.
C. position và z-index.
D. margin và padding.

15. Nếu hai phần tử được định vị (`position`) chồng lên nhau và phần tử thứ nhất có `z-index: 10` còn phần tử thứ hai có `z-index: 5`, phần tử nào sẽ hiển thị phía trên?

A. Phần tử thứ hai.
B. Phần tử thứ nhất.
C. Phụ thuộc vào thứ tự trong mã HTML.
D. Phụ thuộc vào thuộc tính "float".

16. Để tạo một bố cục có nhiều cột và các cột này có độ cao bằng nhau, bạn có thể sử dụng phương pháp nào sau đây?

A. Sử dụng `float` và `clear` cho mỗi cột.
B. Sử dụng `display: flex` trên phần tử cha.
C. Sử dụng `position: absolute` cho các cột.
D. Sử dụng `display: inline` cho các cột.

17. Trong thiết kế web, khái niệm "responsive design" (thiết kế đáp ứng) đề cập đến điều gì?

A. Thiết kế trang web chỉ dành cho máy tính để bàn.
B. Khả năng trang web tự điều chỉnh bố cục để hiển thị tốt trên nhiều kích thước màn hình khác nhau (máy tính, tablet, điện thoại).
C. Sử dụng các hiệu ứng động phức tạp.
D. Tối ưu hóa tốc độ tải trang web.

18. Thuộc tính nào trong CSS cho phép bạn cố định một phần tử vào một vị trí nhất định trên màn hình, ngay cả khi người dùng cuộn trang?

A. position: relative
B. position: absolute
C. position: fixed
D. position: static

19. Thuộc tính "float" trong CSS chủ yếu được dùng để làm gì trong bố cục trang web?

A. Tạo hiệu ứng đổ bóng cho phần tử.
B. Di chuyển phần tử sang trái hoặc phải, cho phép các phần tử khác bao quanh nó.
C. Thay đổi kiểu hiển thị của phần tử từ block sang inline.
D. Đặt khoảng cách cố định giữa các dòng văn bản.

20. Trong ngữ cảnh thiết kế bố cục, một "container" thường có vai trò gì?

A. Chỉ chứa văn bản và hình ảnh.
B. Là một phần tử bao bọc, nhóm các phần tử khác lại với nhau để quản lý bố cục và định dạng.
C. Định nghĩa các quy tắc cho toàn bộ trang web.
D. Tạo ra các liên kết giữa các trang.

21. Trong bố cục trang web, "display: inline" có nghĩa là phần tử sẽ:

A. Chiếm toàn bộ chiều rộng của phần tử cha và bắt đầu trên một dòng mới.
B. Chỉ chiếm không gian cần thiết cho nội dung của nó và nằm trên cùng một dòng với các phần tử inline khác.
C. Tạo một khối riêng biệt và có thể đặt chiều rộng, chiều cao.
D. Không hiển thị trên trang web.

22. Khi một phần tử có "position: absolute", nó sẽ được định vị tương đối với phần tử nào?

A. Với phần tử cha gần nhất có "position" không phải là "static".
B. Với cửa sổ trình duyệt (viewport).
C. Với phần tử đứng trước nó trong mã HTML.
D. Với phần tử cha đầu tiên trong cây DOM.

23. Đường viền (border) trong mô hình hộp của CSS có thể có những thuộc tính nào sau đây?

A. Chỉ có độ dày và màu sắc.
B. Độ dày, kiểu đường (style) và màu sắc.
C. Chỉ có kiểu đường và màu sắc.
D. Chỉ có độ dày và kiểu đường.

24. Trong mô hình hộp, thuộc tính "width" áp dụng cho phần tử có "box-sizing: content-box" sẽ chỉ bao gồm phần nào của hộp?

A. Nội dung, padding và border.
B. Nội dung và padding.
C. Chỉ nội dung.
D. Nội dung, padding, border và margin.

25. Thuộc tính nào trong CSS được sử dụng để xác định khoảng cách giữa đường viền của một phần tử và các phần tử khác nằm bên ngoài nó?

A. Padding
B. Border
C. Margin
D. Content

5 / 25

Category: Trắc nghiệm Tin học ứng dụng 12 Cánh diều bài 11: Mô hình hộp, bố cục trang web

Tags: Bộ đề 1

5. Phần tử nào sau đây có display mặc định là block?

20 / 25

Category: Trắc nghiệm Tin học ứng dụng 12 Cánh diều bài 11: Mô hình hộp, bố cục trang web

Tags: Bộ đề 1

20. Trong ngữ cảnh thiết kế bố cục, một container thường có vai trò gì?

21 / 25

Category: Trắc nghiệm Tin học ứng dụng 12 Cánh diều bài 11: Mô hình hộp, bố cục trang web

Tags: Bộ đề 1

21. Trong bố cục trang web, display: inline có nghĩa là phần tử sẽ:

22 / 25

Category: Trắc nghiệm Tin học ứng dụng 12 Cánh diều bài 11: Mô hình hộp, bố cục trang web

Tags: Bộ đề 1

22. Khi một phần tử có position: absolute, nó sẽ được định vị tương đối với phần tử nào?

23 / 25

Category: Trắc nghiệm Tin học ứng dụng 12 Cánh diều bài 11: Mô hình hộp, bố cục trang web

Tags: Bộ đề 1

23. Đường viền (border) trong mô hình hộp của CSS có thể có những thuộc tính nào sau đây?

24 / 25

Category: Trắc nghiệm Tin học ứng dụng 12 Cánh diều bài 11: Mô hình hộp, bố cục trang web

Tags: Bộ đề 1

24. Trong mô hình hộp, thuộc tính width áp dụng cho phần tử có box-sizing: content-box sẽ chỉ bao gồm phần nào của hộp?

25 / 25

Category: Trắc nghiệm Tin học ứng dụng 12 Cánh diều bài 11: Mô hình hộp, bố cục trang web

Tags: Bộ đề 1

25. Thuộc tính nào trong CSS được sử dụng để xác định khoảng cách giữa đường viền của một phần tử và các phần tử khác nằm bên ngoài nó?