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

1. Thuộc tính box-sizing trong CSS ảnh hưởng đến cách tính toán kích thước của phần tử. Nếu bạn đặt box-sizing: border-box;, điều gì sẽ xảy ra với kích thước phần tử?

A. Padding và border sẽ được bao gồm trong tổng chiều rộng và chiều cao đã xác định của phần tử.

B. Padding và border sẽ được cộng thêm vào tổng chiều rộng và chiều cao đã xác định của phần tử.

C. Chỉ padding được bao gồm, border thì không.

D. Padding và border sẽ bị ẩn đi.

2. Để tạo một bố cục lưới (grid layout) hiện đại và linh hoạt cho trang web, bạn nên sử dụng thuộc tính CSS nào?

A. display: grid;

B. display: flex;

C. float: left;

D. position: absolute;

3. 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 flex theo trục chính (main axis).

B. Căn chỉnh các mục flex theo trục chéo (cross axis).

C. Kiểm soát thứ tự của các mục flex.

D. Xác định khoảng cách giữa các mục flex.

4. Thuộc tính display trong CSS có vai trò gì trong việc định hình bố cục trang web?

A. Quyết định phần tử sẽ hiển thị như thế nào (ví dụ: block, inline, flex, grid) và cách nó tương tác với các phần tử khác.

B. Chỉ định màu sắc của phần tử.

C. Xác định kích thước của phần tử.

D. Tạo hiệu ứng chuyển động cho phần tử.

5. Khi một phần tử được áp dụng thuộc tính float, nó sẽ bị loại bỏ khỏi luồng văn bản (document flow) thông thường. Điều này có thể gây ra vấn đề gì cho phần tử cha của nó?

A. Phần tử cha có thể không còn chứa các phần tử con đã float, dẫn đến chiều cao bằng 0.

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

C. Phần tử cha sẽ có viền dày hơn.

D. Phần tử cha sẽ bị đẩy xuống dưới.

6. Khi bạn đặt border-collapse: collapse; cho một bảng (table) trong CSS, điều gì sẽ xảy ra với các đường viền của các ô?

A. Các đường viền của các ô sẽ gộp lại thành một đường viền duy nhất.

B. Các đường viền của các ô sẽ cách nhau ra.

C. Các đường viền sẽ biến mất.

D. Độ dày của đường viền sẽ tăng gấp đôi.

7. Thuộc tính align-items trong Flexbox, khi áp dụng cho flex container, có chức năng gì?

A. Căn chỉnh các mục flex theo trục chéo (cross axis).

B. Căn chỉnh các mục flex theo trục chính (main axis).

C. Phân phối không gian giữa các mục flex.

D. Xác định chiều rộng của các mục flex.

8. Trong CSS Grid, grid-gap (hoặc gap) được sử dụng để:

A. Tạo khoảng trống giữa các hàng và các cột của lưới.

B. Xác định chiều rộng của các cột.

C. Căn chỉnh các mục trong lưới.

D. Xác định số lượng hàng.

9. Sự khác biệt chính giữa thuộc tính display: block; và display: inline; là gì?

A. block chiếm toàn bộ chiều rộng và bắt đầu trên một dòng mới, trong khi inline chỉ chiếm không gian cần thiết và nằm trên cùng một dòng.

B. block chỉ chiếm không gian cần thiết, còn inline chiếm toàn bộ chiều rộng.

C. block không thể có margin và padding, còn inline thì có.

D. block chỉ áp dụng cho văn bản, còn inline áp dụng cho hình ảnh.

10. Thuộc tính display: flex; (Flexbox) chủ yếu được thiết kế cho loại bố cục nào?

A. Bố cục một chiều (one-dimensional), có thể là một hàng hoặc một cột.

B. Bố cục hai chiều (two-dimensional), bao gồm cả hàng và cột.

C. Bố cục dạng lưới với các ô có kích thước cố định.

D. Bố cục tự động điều chỉnh theo nội dung.

11. Khi bạn muốn một 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, bạn sẽ sử dụng giá trị nào cho thuộc tính position?

A. position: fixed;

B. position: relative;

C. position: absolute;

D. position: static;

12. Phương pháp phổ biến nhất để clear (xóa bỏ) hiệu ứng float và khôi phục luồng văn bản cho phần tử cha là gì?

A. Sử dụng kỹ thuật clearfix hoặc áp dụng overflow: hidden; cho phần tử cha.

B. Sử dụng thuộc tính display: block; cho phần tử cha.

C. Đặt margin-top âm cho phần tử cha.

D. Xóa thuộc tính float khỏi các phần tử con.

13. Một trang web có thanh điều hướng (navigation bar) nằm ở trên cùng và luôn hiển thị khi người dùng cuộn trang. Thuộc tính CSS nào có khả năng được sử dụng để đạt được hiệu ứng này?

A. position: fixed;

B. position: sticky;

C. position: absolute;

D. position: relative;

14. Giá trị absolute của thuộc tính position làm cho phần tử:

A. Bị loại khỏi luồng văn bản và được định vị tương đối với phần tử cha gần nhất có thuộc tính position khác static.

B. Được cố định tại một vị trí nhất định trên cửa sổ trình duyệt.

C. Nằm trên cùng một dòng với các phần tử khác.

D. Có thể sử dụng z-index để chồng lên các phần tử khác.

15. Thuộc tính grid-column trong CSS Grid được áp dụng cho phần tử con (grid item) để làm gì?

A. Xác định phần tử con sẽ chiếm bao nhiêu cột và bắt đầu/kết thúc ở cột nào.

B. Xác định phần tử con sẽ chiếm bao nhiêu hàng và bắt đầu/kết thúc ở hàng nào.

C. Tạo khoảng trống giữa các phần tử con.

D. Căn chỉnh phần tử con theo chiều ngang.

16. Nếu bạn muốn các mục flex của bạn tự động xuống dòng khi không còn đủ không gian trên một dòng, bạn nên sử dụng thuộc tính nào của flex container?

A. flex-wrap: wrap;

B. flex-direction: column;

C. justify-content: space-between;

D. align-items: stretch;

17. Câu hỏi này kiểm tra sự hiểu biết về cách các thuộc tính CSS ảnh hưởng đến mô hình hộp. Nếu bạn muốn nội dung bên trong một phần tử có thêm 20px đệm ở trên, 10px ở bên phải, 15px ở dưới cùng và 5px ở bên trái, bạn sẽ sử dụng thuộc tính padding như thế nào?

A. padding: 20px 10px 15px 5px;

B. padding: 5px 10px 15px 20px;

C. padding: 20px 5px 15px 10px;

D. padding: 10px 20px 5px 15px;

18. Trong thiết kế web, khái niệm mô hình hộp (box model) mô tả cách các phần tử HTML được hiển thị trên trang như thế nào? Nó bao gồm những thành phần cơ bản nào?

A. Nội dung (content), viền (border), đệm trong (padding), và lề ngoài (margin).

B. Chỉ bao gồm nội dung (content) và viền (border).

C. Nội dung (content), đệm trong (padding), và bóng đổ (box-shadow).

D. Nội dung (content), viền (border), và khoảng cách giữa các phần tử.

19. Khi thiết kế bố cục trang web, bạn muốn tạo một menu bên trái (sidebar) và nội dung chính bên phải. Phương pháp CSS nào sau đây thường được sử dụng để đạt được điều này (trước khi Flexbox và Grid trở nên phổ biến)?

A. Sử dụng float: left; cho sidebar và float: right; cho phần nội dung chính (hoặc float: left; và clear: both; cho phần tử bao).

B. Sử dụng display: inline-block; cho cả hai phần.

C. Sử dụng position: absolute; cho cả hai phần.

D. Sử dụng display: block; và căn lề cho cả hai phần.

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

A. Kiểm soát thứ tự xếp chồng của các phần tử được định vị (positioned elements) trên trục Z (chiều sâu).

B. Xác định khoảng cách giữa các phần tử.

C. Thay đổi độ trong suốt của phần tử.

D. Căn chỉnh văn bản trong phần tử.

21. Thuộc tính position trong CSS cung cấp các giá trị khác nhau để kiểm soát vị trí của phần tử. Giá trị relative có ý nghĩa gì?

A. Phần tử được định vị tương đối so với vị trí ban đầu của nó trong luồng văn bản, và các thuộc tính top, bottom, left, right sẽ dịch chuyển nó khỏi vị trí đó.

B. Phần tử được cố định tại một vị trí trên màn hình, không bị cuộn theo trang.

C. Phần tử được loại bỏ khỏi luồng văn bản và định vị dựa trên phần tử cha gần nhất có thuộc tính position khác static.

D. Phần tử sẽ tự động căn giữa theo chiều ngang.

22. Trong CSS Grid, để định nghĩa các cột của lưới, bạn sẽ sử dụng thuộc tính nào trên phần tử cha (grid container)?

A. grid-template-columns;

B. grid-column;

C. grid-row;

D. grid-gap;

23. Thuộc tính margin trong CSS được sử dụng để làm gì trong mô hình hộp?

A. Tạo khoảng trống bên ngoài viền của phần tử, cách ly nó với các phần tử khác.

B. Tạo khoảng trống bên trong viền, giữa nội dung và viền.

C. Xác định kích thước của nội dung hiển thị.

D. Tạo đường viền cho phần tử.

24. Trong thiết kế bố cục trang web, float là một thuộc tính CSS quan trọng. Mục đích chính của việc sử dụng float là gì?

A. Cho phép các phần tử trôi nổi (float) sang trái hoặc phải, và văn bản sẽ bao quanh chúng.

B. Căn giữa một phần tử trên trang.

C. Tạo các cột cho bố cục trang.

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

25. Thuộc tính padding trong CSS có vai trò gì trong mô hình hộp?

A. Tạo khoảng trống giữa nội dung và viền của phần tử.

B. Tạo khoảng trống giữa phần tử và các phần tử khác trên trang.

C. Xác định chiều rộng của đường viền.

D. Căn chỉnh nội dung bên trong phần tử.