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

1. Giá trị nào của thuộc tính position sẽ làm cho phần tử luôn hiển thị ở một vị trí cố định trên màn hình, ngay cả khi người dùng cuộn trang?

A. fixed

B. absolute

C. relative

D. sticky

2. Khi thiết kế một trang web có nhiều khu vực nội dung khác nhau, việc sử dụng Grid Layout sẽ mang lại lợi ích gì so với việc chỉ dùng Float?

A. Cho phép tạo ra các bố cục lưới (grid) phức tạp, có thể căn chỉnh chính xác các khu vực nội dung theo hàng và cột.

B. Chỉ giúp các phần tử trôi dạt sang trái hoặc phải.

C. Làm cho các phần tử trở nên hoàn toàn tĩnh.

D. Yêu cầu ít mã CSS hơn.

3. Trong Grid Layout, để định nghĩa các hàng và cột của một lưới, bạn thường sử dụng những thuộc tính nào trên phần tử cha (container)?

A. `grid-template-rows` và `grid-template-columns`.

B. `flex-direction` và `justify-content`.

C. `display: block;` và `display: inline;`.

D. `float: left;` và `clear: both;`.

4. Trong thiết kế bố cục trang web, mô hình hộp (box model) là một khái niệm quan trọng. Khẳng định nào sau đây mô tả đúng nhất về cách mô hình hộp hoạt động?

A. Mỗi phần tử HTML được coi như một hình chữ nhật chứa nội dung, phần đệm (padding), đường viền (border) và khoảng lề (margin).

B. Mô hình hộp chỉ bao gồm nội dung và đường viền của phần tử.

C. Khoảng lề (margin) được tính vào kích thước hiển thị của phần tử trên trang web.

D. Phần đệm (padding) luôn có màu giống với màu nền của trang web.

5. Đâu là cách tốt nhất để đảm bảo trang web hiển thị tốt trên nhiều kích thước màn hình khác nhau (responsive design) khi sử dụng mô hình hộp và bố cục?

A. Sử dụng các đơn vị tương đối như %, em, rem, và các kỹ thuật bố cục linh hoạt như Flexbox, Grid.

B. Chỉ sử dụng các đơn vị cố định như px cho mọi kích thước.

C. Thiết kế chỉ cho một kích thước màn hình duy nhất.

D. Sử dụng các thuộc tính `float` và `position` một cách quá mức.

6. Để khắc phục tình trạng sụp đổ chiều cao của phần tử cha khi chứa các phần tử con đã float, phương pháp phổ biến nào được áp dụng?

A. Sử dụng thuộc tính clear: both; cho một phần tử con cuối cùng hoặc sử dụng kỹ thuật clearfix.

B. Đặt thuộc tính position: relative; cho phần tử cha.

C. Thay đổi `display` của phần tử con thành `inline`.

D. Tăng giá trị `margin` cho phần tử cha.

7. Giá trị display: inline; cho một phần tử có hành vi khác biệt như thế nào so với display: block;?

A. Phần tử sẽ nằm cùng dòng với các phần tử khác và chỉ chiếm không gian cần thiết cho nội dung.

B. Phần tử sẽ chiếm toàn bộ chiều rộng và bắt đầu trên một dòng mới.

C. Phần tử sẽ có thể áp dụng chiều rộng và chiều cao một cách tùy ý.

D. Phần tử sẽ tự động căn giữa trang.

8. Khi sử dụng thuộc tính float cho một phần tử, vấn đề phổ biến nào thường xảy ra với các phần tử cha hoặc phần tử đứng sau nó?

A. Phần tử cha có thể bị sụp đổ (collapse) chiều cao, không bao bọc các phần tử con đã float.

B. Các phần tử đứng sau sẽ tự động bị đẩy xuống dưới.

C. Khoảng lề của phần tử cha sẽ tăng lên gấp đôi.

D. Tất cả các phần tử trên trang sẽ bị float theo.

9. CSS Grid Layout được thiết kế để làm gì?

A. Tạo ra các bố cục hai chiều (hàng và cột) phức tạp một cách dễ dàng.

B. Chỉ sắp xếp các mục theo một hướng duy nhất (hàng hoặc cột).

C. Tạo hiệu ứng hoạt ảnh cho các phần tử.

D. Thay đổi font chữ của văn bản.

10. Khái niệm float trong CSS được sử dụng chủ yếu để làm gì trong việc tạo bố cục trang web?

A. Để kéo phần tử sang trái hoặc phải và cho phép văn bản hoặc các phần tử khác chảy xung quanh nó.

B. Để định vị tuyệt đối một phần tử trên trang web.

C. Để tạo ra các cột có chiều cao bằng nhau.

D. Để ẩn một phần tử khỏi trang web.

11. Trong bố cục trang web, khái niệm display thuộc tính có vai trò quan trọng. Giá trị display: block; cho một phần tử sẽ có hành vi phổ biến nào?

A. Phần tử sẽ 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. Phần tử sẽ chỉ chiếm không gian cần thiết cho nội dung của nó và nằm cùng dòng với các phần tử khác.

C. Phần tử sẽ được định vị tuyệt đối so với phần tử cha.

D. Phần tử sẽ trở nên vô hình trên trang web.

12. Thuộc tính padding trong CSS có chức năng chính là gì đối với một phần tử HTML?

A. Tạo khoảng trống giữa đường viền của phần tử và các phần tử lân cận.

B. Tạo khoảng trống giữa nội dung của phần tử và đường viền của chính phần tử đó.

C. Xác định độ dày của đường viền cho phần tử.

D. Thiết lập màu sắc cho nền của phần tử.

13. Trong các giá trị của thuộc tính position, giá trị nào làm cho phần tử được định vị tương đối với vị trí ban đầu của nó trong luồng tài liệu thông thường?

A. relative

B. absolute

C. fixed

D. static

14. Trong thiết kế bố cục, tại sao việc sử dụng display: inline-block; lại hữu ích hơn display: inline; trong nhiều trường hợp?

A. Nó cho phép áp dụng thuộc tính `width`, `height`, `margin` và `padding` như một phần tử block, đồng thời vẫn giữ được đặc tính nằm cùng dòng.

B. Nó tự động tạo ra một khoảng cách đều giữa các phần tử inline.

C. Nó đảm bảo tất cả các phần tử inline-block có cùng chiều cao.

D. Nó làm cho phần tử chiếm toàn bộ chiều rộng của vùng chứa.

15. Đâu là thuộc tính chính của Flexbox để định hướng sắp xếp các mục bên trong một container?

A. `flex-direction`

B. `justify-content`

C. `align-items`

D. `flex-wrap`

16. Trong thiết kế bố cục hiện đại, ngoài float và position, phương pháp nào đang trở nên phổ biến để quản lý bố cục phức tạp và linh hoạt hơn?

A. CSS Flexbox và CSS Grid.

B. Sử dụng chỉ thuộc tính `margin` và `padding`.

C. Chỉ dùng các thẻ HTML cơ bản mà không có CSS.

D. Áp dụng `text-align: center;` cho toàn bộ trang.

17. Nếu một phần tử có width: 100px;, padding: 10px;, và border: 1px solid black;, thì kích thước tổng thể của phần tử khi hiển thị (theo content-box model) sẽ là bao nhiêu?

A. 100px (chỉ tính nội dung).

B. 122px (100px nội dung + 20px padding + 2px border).

C. 120px (100px nội dung + 20px padding).

D. 102px (100px nội dung + 2px border).

18. Khi bạn đặt thuộc tính margin-left: 20px; cho một phần tử, điều này sẽ ảnh hưởng như thế nào đến bố cục của trang web?

A. Tạo ra một khoảng trống 20px ở phía bên trái của phần tử, đẩy nó ra xa phần tử bên trái.

B. Tạo ra một khoảng trống 20px ở phía bên phải của phần tử, đẩy nó ra xa phần tử bên phải.

C. Tạo ra một khoảng trống 20px bên trong phần tử, cách ly nội dung khỏi đường viền.

D. Thay đổi kích thước chiều rộng của phần tử xuống 20px.

19. CSS Flexbox được thiết kế để giải quyết vấn đề gì trong bố cục trang web?

A. Phân phối các mục trong một container theo một hướng nhất định (hàng hoặc cột) và cung cấp khả năng căn chỉnh linh hoạt.

B. Tạo ra các lưới (grid) hai chiều với các hàng và cột.

C. Định vị tuyệt đối các phần tử.

D. Tạo hiệu ứng cuộn mượt mà cho trang web.

20. Nếu bạn muốn tạo một menu điều hướng ngang mà các mục menu nằm cạnh nhau và có khoảng cách đều, phương pháp nào sau đây là hiệu quả nhất?

A. Sử dụng CSS Flexbox với `display: flex;` trên container menu và `justify-content: space-around;` hoặc `space-between;` trên các mục.

B. Sử dụng `float: left;` cho từng mục menu.

C. Đặt `display: block;` cho từng mục menu.

D. Sử dụng thuộc tính `position: absolute;` cho các mục menu.

21. Thuộc tính box-sizing: border-box; trong CSS có tác dụng gì?

A. Tính cả padding và border vào chiều rộng và chiều cao đã định của phần tử.

B. Chỉ tính padding vào chiều rộng và chiều cao đã định của phần tử.

C. Loại bỏ hoàn toàn thuộc tính margin của phần tử.

D. Đặt kích thước mặc định cho tất cả các phần tử là 100%.

22. Khái niệm position trong CSS cho phép bạn làm gì với một phần tử HTML?

A. Kiểm soát cách một phần tử được định vị trong luồng tài liệu hoặc so với các yếu tố khác.

B. Thay đổi kích thước của phần tử.

C. Chỉ định màu sắc cho phần tử.

D. Xác định cách phần tử hiển thị trên các thiết bị khác nhau.

23. Trong ngữ cảnh của mô hình hộp, khi nào bạn nên cân nhắc sử dụng `box-sizing: border-box;`?

A. Khi bạn muốn chiều rộng và chiều cao bao gồm cả padding và border, giúp việc quản lý kích thước dễ dàng hơn.

B. Khi bạn chỉ muốn áp dụng padding cho phần tử.

C. Khi bạn muốn loại bỏ hoàn toàn khoảng lề của phần tử.

D. Khi bạn muốn phần tử luôn chiếm toàn bộ chiều rộng trang.

24. Khi một phần tử có `position: absolute;`, nó sẽ được định vị dựa trên phần tử nào?

A. Phần tử cha gần nhất có thuộc tính `position` khác `static`.

B. Luôn luôn là thẻ ``.

C. Phần tử đứng ngay trước nó trong mã HTML.

D. Nó sẽ tự động căn giữa trang.

25. Trong mô hình hộp CSS, thuộc tính border có thể được sử dụng để xác định những yếu tố nào của một phần tử?

A. Độ dày, kiểu dáng và màu sắc của đường viền.

B. Khoảng trống giữa nội dung và đường viền.

C. Khoảng trống giữa đường viền và các phần tử khác.

D. Kích thước chiều rộng và chiều cao của phần tử.