Bộ 30+ câu hỏi trắc nghiệm Mô hình hộp (Box Model) và Bố cục trong CSS. Cùng rèn luyện kiến thức CSS online ngay nhé.
1. Thuộc tính CSS nào được sử dụng để kiểm soát khoảng cách giữa các dòng văn bản trong một phần tử?
A. word-spacing
B. letter-spacing
C. line-height
D. text-spacing
2. Thuộc tính CSS nào được sử dụng để kiểm soát khoảng cách giữa các ký tự trong một phần tử?
A. word-spacing
B. line-height
C. letter-spacing
D. text-indent
3. Thuộc tính 'position: fixed' có nghĩa là gì?
A. Phần tử được định vị liên quan đến vị trí ban đầu của nó.
B. Phần tử được định vị liên quan đến phần tử cha gần nhất có thuộc tính position khác static.
C. Phần tử được định vị tĩnh.
D. Phần tử được định vị liên quan đến cửa sổ trình duyệt và không di chuyển khi cuộn trang.
4. Thuộc tính CSS nào được sử dụng để kiểm soát 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. Width
5. Nếu một phần tử có 'margin: auto', điều gì sẽ xảy ra?
A. Phần tử sẽ được căn trái.
B. Phần tử sẽ được căn phải.
C. Phần tử sẽ được căn giữa theo chiều ngang.
D. Phần tử sẽ không thay đổi vị trí.
6. Thuộc tính 'z-index' có tác dụng gì?
A. Xác định kích thước của phần tử.
B. Xác định thứ tự xếp chồng của các phần tử.
C. Xác định vị trí của phần tử.
D. Xác định màu sắc của phần tử.
7. Thuộc tính CSS nào xác định độ dày và kiểu của đường viền xung quanh một phần tử?
A. Margin
B. Border
C. Padding
D. Width
8. Thuộc tính CSS nào được sử dụng để thêm khoảng trống xung quanh bên ngoài một phần tử?
A. Padding
B. Border
C. Margin
D. Content
9. Trong CSS Flexbox, thuộc tính nào được sử dụng để căn chỉnh các mục theo chiều ngang trên trục chính?
A. align-items
B. justify-content
C. align-content
D. justify-items
10. Trong mô hình hộp CSS, phần nào luôn luôn hiển thị, ngay cả khi giá trị của nó được đặt thành 0?
A. Margin
B. Padding
C. Border
D. Content
11. Tại sao đôi khi margin của hai phần tử liền kề lại bị 'gộp' (collapsing margins)?
A. Do trình duyệt tự động tối ưu hóa bố cục.
B. Do thuộc tính 'box-sizing' được đặt thành 'border-box'.
C. Do cả hai margin đều có giá trị 'auto'.
D. Hiện tượng này xảy ra khi margin trên và dưới của các phần tử liền kề (không có border hoặc padding giữa chúng) gặp nhau, và margin lớn hơn sẽ được áp dụng.
12. Khi nào thì sử dụng 'position: sticky'?
A. Khi muốn phần tử luôn ở trên cùng của trang.
B. Khi muốn phần tử luôn ở một vị trí cố định trên màn hình.
C. Khi muốn phần tử ban đầu di chuyển theo luồng tài liệu, nhưng sau đó dính vào một vị trí khi cuộn đến.
D. Khi muốn phần tử được định vị tương đối so với phần tử cha.
13. Thuộc tính 'position: relative' có nghĩa là gì?
A. Phần tử được định vị liên quan đến cửa sổ trình duyệt.
B. Phần tử được định vị liên quan đến phần tử cha gần nhất có thuộc tính position khác static.
C. Phần tử được định vị liên quan đến vị trí ban đầu của nó.
D. Phần tử được định vị tĩnh.
14. Thuộc tính 'position: absolute' có nghĩa là gì?
A. Phần tử được định vị liên quan đến vị trí ban đầu của nó.
B. Phần tử được định vị tĩnh.
C. Phần tử được định vị liên quan đến cửa sổ trình duyệt.
D. Phần tử được định vị liên quan đến phần tử cha gần nhất có thuộc tính position khác static.
15. Trong CSS Flexbox, thuộc tính nào được sử dụng để căn chỉnh các mục theo chiều dọc trên trục phụ?
A. justify-content
B. align-items
C. align-content
D. justify-items
16. Sự khác biệt giữa 'visibility: hidden' và 'display: none' là gì?
A. 'visibility: hidden' ẩn phần tử nhưng vẫn giữ chỗ của nó trong bố cục, còn 'display: none' ẩn phần tử và loại bỏ nó khỏi bố cục.
B. 'display: none' ẩn phần tử nhưng vẫn giữ chỗ của nó trong bố cục, còn 'visibility: hidden' ẩn phần tử và loại bỏ nó khỏi bố cục.
C. Cả hai đều có tác dụng giống nhau.
D. 'visibility: hidden' chỉ hoạt động trên các phần tử 'inline', còn 'display: none' chỉ hoạt động trên các phần tử 'block'.
17. Khi nào nên sử dụng Flexbox thay vì Grid Layout, và ngược lại?
A. Flexbox tốt hơn cho bố cục hai chiều, còn Grid Layout tốt hơn cho bố cục một chiều.
B. Flexbox tốt hơn cho bố cục một chiều, còn Grid Layout tốt hơn cho bố cục hai chiều.
C. Flexbox luôn tốt hơn Grid Layout.
D. Grid Layout luôn tốt hơn Flexbox.
18. Thuộc tính 'display: inline' có tác dụng gì đối với một phần tử?
A. Phần tử chiếm toàn bộ chiều rộng của dòng.
B. Phần tử hiển thị như một phần tử cấp khối.
C. Phần tử hiển thị như một phần tử nội tuyến.
D. Phần tử bị ẩn.
19. Khi sử dụng 'float', làm thế nào để ngăn phần tử cha bị 'sụp đổ' (collapse) chiều cao?
A. Đặt 'overflow: hidden' cho phần tử cha.
B. Đặt 'position: absolute' cho phần tử cha.
C. Đặt 'display: inline-block' cho phần tử cha.
D. Không cần làm gì cả, phần tử cha sẽ tự động điều chỉnh.
20. Thuộc tính CSS nào được sử dụng để kiểm soát khoảng cách giữa các từ trong một phần tử?
A. letter-spacing
B. line-height
C. word-spacing
D. text-indent
21. Sự khác biệt chính giữa 'display: inline-block' và 'display: inline' là gì?
A. 'inline-block' không thể có margin hoặc padding.
B. 'inline-block' có thể có chiều rộng và chiều cao được chỉ định, trong khi 'inline' thì không.
C. 'inline' tạo ra một khối (block), còn 'inline-block' thì không.
D. Không có sự khác biệt.
22. Thuộc tính 'display: block' có tác dụng gì đối với một phần tử?
A. Phần tử hiển thị như một phần tử nội tuyến.
B. Phần tử bị ẩn.
C. Phần tử hiển thị như một phần tử cấp khối.
D. Phần tử không chiếm không gian.
23. Giá trị nào của thuộc tính 'box-sizing' khiến cho chiều rộng và chiều cao của một phần tử bao gồm cả padding và border?
A. content-box
B. border-box
C. padding-box
D. margin-box
24. Thuộc tính CSS nào được sử dụng để làm cho một phần tử nổi (float) sang trái hoặc phải?
A. position
B. float
C. clear
D. display
25. Bạn có một phần tử với 'width: 50%' và 'box-sizing: border-box'. Nếu bạn thêm 'padding: 20px' và 'border: 5px solid black', tổng chiều rộng hiển thị của phần tử sẽ là bao nhiêu so với phần tử cha?
A. Lớn hơn 50% vì padding và border được thêm vào.
B. Nhỏ hơn 50% vì padding và border được trừ đi.
C. Vẫn là 50% vì 'box-sizing: border-box' bao gồm padding và border vào tổng chiều rộng.
D. Không thể xác định nếu không biết chiều rộng của phần tử cha.
26. Giá trị mặc định của thuộc tính 'position' là gì?
A. relative
B. absolute
C. fixed
D. static
27. Trong CSS Grid Layout, thuộc tính nào được sử dụng để xác định số lượng cột trong lưới?
A. grid-template-rows
B. grid-template-columns
C. grid-auto-rows
D. grid-auto-columns
28. Thuộc tính CSS nào được sử dụng để ngăn các phần tử khác bao quanh một phần tử nổi?
A. float
B. position
C. clear
D. display
29. Đâu là thứ tự các lớp (layers) trong mô hình hộp CSS từ trong ra ngoài?
A. Content, Padding, Border, Margin
B. Content, Margin, Border, Padding
C. Content, Border, Padding, Margin
D. Content, Padding, Margin, Border
30. Điều gì xảy ra nếu bạn đặt 'overflow: hidden' cho một phần tử?
A. Nội dung của phần tử sẽ tự động điều chỉnh để vừa với kích thước của phần tử.
B. Nội dung của phần tử sẽ bị cắt nếu nó vượt quá kích thước của phần tử.
C. Một thanh cuộn sẽ được thêm vào phần tử.
D. Phần tử sẽ trở nên trong suốt.
Võ Việt Hoàng SEO
Võ Việt Hoàng SEO