1. Vấn đề phổ biến khi sử dụng thuộc tính "float" mà không có giải pháp khắc phục là gì?
A. Các phần tử con sẽ chồng lên nhau.
B. Container cha chứa các phần tử float có thể bị "sập" (collapse) và không bao bọc hết các con.
C. Màu sắc của phần tử bị thay đổi.
D. Khoảng cách giữa các phần tử trở nên quá lớn.
2. Để tạo khoảng cách giữa các hàng và cột trong CSS Grid, bạn sẽ sử dụng thuộc tính nào?
A. padding
B. margin
C. gap (hoặc grid-gap)
D. spacing
3. Nếu bạn muốn phần tử giữ nguyên kích thước tổng thể là 200px ngay cả khi thêm padding, bạn nên sử dụng thuộc tính CSS nào?
A. box-sizing: content-box;
B. box-sizing: border-box;
C. outline-style: dashed;
D. display: inline-block;
4. Thuộc tính "align-items" trong CSS Flexbox được dùng để căn chỉnh các mục flex theo chiều nào?
A. Chiều ngang (trục chính).
B. Chiều dọc (trục chéo).
C. Chiều dọc (trục phụ).
D. Chiều sâu.
5. Một trong những phương pháp phổ biến để khắc phục vấn đề "sập" container khi sử dụng float là gì?
A. Sử dụng thuộc tính "position: absolute;" cho container.
B. Sử dụng kỹ thuật "clearfix" hoặc đặt "overflow: hidden;" cho container cha.
C. Đặt "display: inline;" cho các phần tử con.
D. Tăng margin cho container.
6. Trong thiết kế web, khái niệm "mô hình hộp" (box model) mô tả cách thức hiển thị các phần tử trên trang web. Yếu tố nào sau đây KHÔNG phải là thành phần cấu tạo nên mô hình hộp?
A. Margin
B. Padding
C. Border
D. Content (Nội dung)
7. Thuộc tính "padding" trong CSS được sử dụng để làm gì?
A. Tạo khoảng trống bên ngoài phần tử, cách ly phần tử với các phần tử khác.
B. Tạo khoảng trống bên trong phần tử, giữa viền và nội dung.
C. Xác định kiểu dáng và độ dày của đường viền.
D. Căn chỉnh nội dung bên trong phần tử.
8. Thuộc tính "flex-direction: column;" trong Flexbox sẽ làm gì?
A. Sắp xếp các mục flex theo chiều ngang.
B. Sắp xếp các mục flex theo chiều dọc.
C. Cho phép các mục flex xuống dòng.
D. Căn giữa các mục flex.
9. Thuộc tính "display: inline-block;" kết hợp ưu điểm của cả "inline" và "block" bằng cách nào?
A. Chỉ cho phép căn chỉnh theo chiều dọc.
B. Chiếm toàn bộ chiều rộng và bắt đầu trên dòng mới.
C. Nằm trên cùng một dòng và cho phép đặt kích thước, margin, padding.
D. Không tương tác được với các thuộc tính khác.
10. Trong thiết kế web, khái niệm "Responsive Web Design" (Thiết kế Web Đáp ứng) đề cập đến việc gì?
A. Thiết kế trang web chỉ dành cho máy tính để bàn.
B. Thiết kế trang web sao cho giao diện tự động điều chỉnh phù hợp với nhiều kích thước màn hình và thiết bị khác nhau.
C. Sử dụng các hình ảnh có dung lượng lớn để trang web trông đẹp mắt.
D. Tập trung vào việc tối ưu hóa tốc độ tải trang bằng cách nén tất cả tài nguyên.
11. Khi nói về bố cục trang web, "sidebar" (thanh bên) thường được sử dụng để làm gì?
A. Hiển thị nội dung chính của trang.
B. Chứa các liên kết điều hướng phụ, quảng cáo, hoặc thông tin liên quan.
C. Đóng vai trò là header của trang.
D. Là phần chân trang.
12. Khi bạn đặt "width: 200px;" và "padding: 10px;" cho một phần tử, kích thước tổng thể của nội dung sẽ là bao nhiêu nếu không sử dụng "box-sizing: border-box;"?
A. 200px
B. 210px
C. 220px
D. 190px
13. Phần "footer" của một trang web thường chứa thông tin gì?
A. Logo và menu chính.
B. Nội dung bài viết.
C. Bản quyền, liên kết mạng xã hội, thông tin liên hệ phụ.
D. Thanh tìm kiếm.
14. Nếu bạn muốn các mục flex tự động xuống dòng khi không còn đủ chỗ trên một dòng, bạn sẽ sử dụng thuộc tính nào trên container flex?
A. flex-direction: row;
B. flex-wrap: nowrap;
C. flex-wrap: wrap;
D. justify-content: center;
15. Trong CSS Grid Layout, "display: grid;" áp dụng cho phần tử nào?
A. Các mục con bên trong một container.
B. Chính container đó, để nó trở thành một grid container.
C. Đường viền của các phần tử.
D. Khoảng cách giữa các phần tử.
16. Thuộc tính "border" trong CSS được sử dụng để làm gì?
A. Tạo khoảng trống bên trong phần tử.
B. Tạo khoảng trống bên ngoài phần tử.
C. Vẽ một đường bao quanh phần tử.
D. Xác định kích thước của nội dung.
17. Trong CSS Flexbox, thuộc tính "justify-content" dùng để làm gì?
A. Căn chỉnh các mục flex theo chiều dọc.
B. Căn chỉnh các mục flex theo chiều ngang.
C. Xác định hướng của trục chính.
D. Cho phép các mục flex xuống dòng.
18. Phần tử có thuộc tính "display: inline;" sẽ hoạt động như thế nào?
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à nằm trên cùng một dòng với các phần tử khác.
C. Cho phép sử dụng flexbox hoặc grid để sắp xếp.
D. Không áp dụng được các thuộc tính về margin, padding, width, height.
19. Thuộc tính "margin" trong CSS được sử dụng để làm gì?
A. Tạo khoảng trống bên trong phần tử, giữa viền và nội dung.
B. Tạo khoảng trống bên ngoài phần tử, cách ly phần tử với các phần tử khác.
C. Xác định chiều rộng và chiều cao của nội dung.
D. Áp dụng kiểu dáng cho đường viền của phần tử.
20. Media queries trong CSS là gì và được sử dụng để làm gì?
A. Để định nghĩa màu sắc và font chữ cho trang web.
B. Để áp dụng các kiểu CSS khác nhau dựa trên các thuộc tính của thiết bị hiển thị (như chiều rộng màn hình, hướng).
C. Để tạo hiệu ứng chuyển động cho các phần tử.
D. Để nhúng mã JavaScript vào trang web.
21. Thuộc tính "grid-template-columns" trong CSS Grid dùng để xác định điều gì?
A. Số lượng hàng trong lưới.
B. Số lượng cột và chiều rộng của chúng trong lưới.
C. Khoảng cách giữa các hàng.
D. Kiểu đường viền của lưới.
22. Trong CSS, "position: relative;" được áp dụng cho một phần tử để làm gì?
A. Làm cho phần tử đó chiếm toàn bộ không gian trang.
B. Cho phép sử dụng các thuộc tính "top", "bottom", "left", "right" để dịch chuyển phần tử so với vị trí ban đầu của nó, và làm cơ sở định vị cho các phần tử con có "position: absolute;" bên trong.
C. Buộc phần tử phải nằm trên một dòng mới.
D. Ẩn hoàn toàn phần tử khỏi trang.
23. Thuộc tính "float" trong CSS được sử dụng chủ yếu để làm gì trong các kỹ thuật bố cục cũ?
A. Căn giữa phần tử theo chiều ngang.
B. Buộc phần tử xuống dòng mới.
C. Cho phép phần tử nổi lên và cho phép văn bản bao quanh nó.
D. Tạo hiệu ứng ẩn/hiện phần tử.
24. Trong thiết kế bố cục trang web, "header" thường chứa những thành phần nào?
A. Nội dung chính của trang, bài viết.
B. Logo, tên trang web, menu điều hướng chính.
C. Thông tin liên hệ, địa chỉ.
D. Chân trang, bản quyền.
25. Trong bố cục trang web, "display: block;" có đặc điểm gì nổi bật?
A. Phần tử chỉ chiếm không gian cần thiết và nằm trên cùng một dòng với các phần tử khác.
B. Phần tử chiếm toàn bộ chiều rộng có sẵn và bắt đầu trên một dòng mới.
C. Phần tử có thể được sắp xếp linh hoạt theo lưới hoặc theo hàng/cột.
D. Phần tử chỉ hiển thị khi được yêu cầu, không chiếm không gian mặc định.
