Bài Tập Trắc nghiệm Tin học 12 - Cánh diều - Bài 11: Mô hình hộp, bố cục trang web - Đề 07
Bài Tập Trắc nghiệm Tin học 12 - Cánh diều - Bài 11: Mô hình hộp, bố cục trang web - Đề 07 được xây dựng với nhiều câu hỏi chất lượng, sát với nội dung chương trình học, giúp bạn dễ dàng ôn tập và kiểm tra kiến thức hiệu quả. Hãy cùng bắt đầu làm bài tập trắc nghiệm ngay để nâng cao hiểu biết và chuẩn bị tốt cho kỳ thi sắp tới!
Câu 1: Trong mô hình hộp chuẩn (content-box), thuộc tính CSS nào sau đây không ảnh hưởng trực tiếp đến kích thước (width/height) của vùng nội dung (content area)?
- A. padding
- B. border
- C. width
- D. margin
Câu 2: Một phần tử `div` có CSS sau: `width: 150px; padding: 10px; border: 5px solid black; margin: 20px;`. Nếu `box-sizing` sử dụng giá trị mặc định (content-box), tổng chiều rộng thực tế mà phần tử này chiếm trên trang (bao gồm cả margin) là bao nhiêu pixel?
- A. 150px
- B. 180px
- C. 200px
- D. 220px
Câu 3: Cho một phần tử `div` có CSS sau: `width: 200px; height: 100px; padding: 15px; border: 5px solid red; box-sizing: border-box;`. Kích thước thực tế của vùng nội dung (content area) của phần tử này là bao nhiêu?
- A. 160px x 60px
- B. 200px x 100px
- C. 170px x 70px
- D. 230px x 130px
Câu 4: Điểm khác biệt cơ bản giữa `padding` và `margin` trong mô hình hộp CSS là gì?
- A. `padding` tạo khoảng trống bên ngoài đường viền, `margin` tạo khoảng trống bên trong đường viền.
- B. `padding` chỉ áp dụng cho văn bản, `margin` áp dụng cho mọi loại nội dung.
- C. `padding` nằm giữa nội dung và đường viền, `margin` nằm bên ngoài đường viền.
- D. `padding` chỉ có thể là số dương, `margin` có thể là số âm.
Câu 5: Thuộc tính CSS nào sau đây được sử dụng để thiết lập khoảng cách riêng biệt cho lề trên, lề phải, lề dưới và lề trái của một phần tử theo thứ tự đó?
- A. margin: top right bottom left;
- B. margin: 10px 5px 15px 20px;
- C. margin-top: 10px; margin-right: 5px; margin-bottom: 15px; margin-left: 20px;
- D. margin: 10px 20px;
Câu 6: Vùng nào trong mô hình hộp CSS mặc định là trong suốt và không hiển thị màu nền của chính phần tử đó?
- A. Vùng nội dung (content)
- B. Vùng đệm (padding)
- C. Vùng đường viền (border)
- D. Vùng lề (margin)
Câu 7: Cho đoạn HTML `
Đoạn 1
Đoạn 2`. Mặc định, các phần tử này sẽ hiển thị trên trang web như thế nào?
- A. Cả hai phần tử nằm trên cùng một dòng.
- B. Phần tử `
` nằm trên một dòng riêng, phần tử `` nằm trên dòng tiếp theo.
- C. Phần tử `` nằm trên một dòng riêng, phần tử `
` nằm trên dòng tiếp theo.
- D. Cả hai phần tử đều bị ẩn đi theo mặc định.
Câu 9: Thuộc tính CSS `display: inline-block;` khác gì so với `display: inline;`?
- A. `inline-block` bắt đầu trên dòng mới, còn `inline` thì không.
- B. `inline-block` chiếm toàn bộ chiều rộng của dòng, còn `inline` thì không.
- C. `inline-block` cho phép thiết lập width/height và padding/margin trên dưới, còn `inline` thì không.
- D. `inline-block` làm cho phần tử bị ẩn đi, còn `inline` thì hiển thị.
Câu 10: Khi áp dụng CSS `display: none;` cho một phần tử, điều gì xảy ra với phần tử đó và không gian mà nó chiếm trên trang?
- A. Phần tử bị ẩn và không chiếm bất kỳ không gian nào trong bố cục.
- B. Phần tử bị ẩn nhưng vẫn chiếm không gian trong bố cục.
- C. Chỉ nội dung của phần tử bị ẩn, đường viền và lề vẫn hiển thị.
- D. Phần tử trở nên trong suốt nhưng vẫn tương tác được.
Câu 11: Để tạo một bố cục trang web đơn giản với một thanh sidebar cố định ở bên trái và nội dung chính ở bên phải, kỹ thuật CSS truyền thống nào thường được sử dụng kết hợp với thuộc tính `width`?
- A. display: flex;
- B. float;
- C. position: absolute;
- D. display: grid;
Câu 12: Bạn có một container (`div`) chứa ba phần tử con (`div` con). Bạn muốn sử dụng Flexbox để các phần tử con này nằm trên một hàng và được căn đều khoảng trống giữa chúng. Thuộc tính CSS nào bạn cần áp dụng cho phần tử container?
- A. display: block; justify-content: center;
- B. display: flex; align-items: center;
- C. display: flex; justify-content: space-between;
- D. display: inline; justify-content: flex-end;
Câu 13: Trong Flexbox, trục chính (main axis) và trục phụ (cross axis) được xác định bởi thuộc tính nào trên container?
- A. flex-direction
- B. justify-content
- C. align-items
- D. flex-wrap
Câu 14: Bạn có một container sử dụng CSS Grid (`display: grid;`). Bạn muốn chia container thành ba cột có chiều rộng bằng nhau. Cú pháp CSS nào sau đây trên container là đúng để đạt được điều này?
- A. grid-columns: 3;
- B. grid-template-rows: 1fr 1fr 1fr;
- C. grid-template-columns: 33.33% 33.33% 33.33%;
- D. grid-template-columns: repeat(3, 1fr);
Câu 15: Kỹ thuật CSS Layout nào được xem là mạnh mẽ nhất cho việc tạo bố cục hai chiều (hàng và cột) phức tạp và không phụ thuộc vào thứ tự phần tử trong HTML?
- A. CSS Float
- B. CSS Grid
- C. CSS Flexbox
- D. CSS Positioning (absolute/relative)
Câu 16: Bạn muốn căn giữa một phần tử khối (ví dụ: một `div` với `width` xác định) theo chiều ngang trong phần tử cha. Thuộc tính CSS nào sau đây là cách phổ biến nhất để làm điều này?
- A. text-align: center;
- B. align-items: center;
- C. margin: 0 auto;
- D. justify-content: center;
Câu 17: Trong bố cục trang web, phần tử HTML ngữ nghĩa (`semantic element`) nào thường được sử dụng để bao bọc các liên kết điều hướng chính của trang?
Câu 18: Cho đoạn CSS sau: `.element { position: absolute; top: 50px; left: 100px; }`. Vị trí của phần tử `.element` sẽ được xác định dựa trên điểm tham chiếu nào theo mặc định?
- A. Vị trí ban đầu của chính phần tử đó trong luồng tài liệu.
- B. Góc trên bên trái của phần tử cha trực tiếp.
- C. Góc trên bên trái của phần tử cha trực tiếp nếu phần tử cha có `position: relative;`.
- D. Phần tử tổ tiên được định vị (positioned ancestor) gần nhất, hoặc cửa sổ trình duyệt nếu không có tổ tiên nào được định vị.
Câu 19: Bạn có hai phần tử chồng lên nhau. Phần tử A có `z-index: 1;` và phần tử B có `z-index: 2;`. Phần tử nào sẽ hiển thị ở phía trên?
- A. Phần tử A
- B. Phần tử B
- C. Phần tử nào xuất hiện sau trong mã HTML
- D. Không thể xác định chỉ với thông tin này
Câu 20: Để tạo một bố cục đáp ứng (responsive layout) trong đó các cột hiển thị cạnh nhau trên màn hình lớn nhưng xếp chồng lên nhau theo chiều dọc trên màn hình nhỏ, kỹ thuật CSS nào sau đây là cách tiếp cận hiện đại và hiệu quả?
- A. Chỉ sử dụng thuộc tính `width` với các giá trị phần trăm.
- B. Chỉ sử dụng thuộc tính `float` và điều chỉnh `width` bằng media query.
- C. Sử dụng `position: absolute;` và điều chỉnh `top`/`left` bằng media query.
- D. Sử dụng Flexbox hoặc CSS Grid kết hợp với Media Queries.
Câu 21: Bạn có một container Flexbox và muốn các mục con co lại khi không đủ không gian. Thuộc tính nào trên các mục con (`flex item`) kiểm soát khả năng co lại này?
- A. flex-grow
- B. flex-basis
- C. flex-shrink
- D. order
Câu 22: Khi sử dụng CSS Grid, thuộc tính `grid-gap` (hoặc `gap`) được sử dụng để làm gì?
- A. Tạo khoảng trống giữa các mục lưới (grid items).
- B. Tạo khoảng trống bên ngoài container Grid.
- C. Tạo khoảng trống bên trong các mục lưới (padding).
- D. Kiểm soát thứ tự hiển thị của các mục lưới.
Câu 23: Trong bố cục trang web, phần tử HTML ngữ nghĩa nào thường chứa nội dung chính, độc lập và có thể phân phối lại của tài liệu (ví dụ: một bài viết blog, một tin tức)?
Câu 25: Cho đoạn CSS sau: `.box { margin: 10px 5px; }`. Điều này có nghĩa là gì?
- A. Lề trên và lề trái là 10px, lề dưới và lề phải là 5px.
- B. Lề trên và lề dưới là 5px, lề trái và lề phải là 10px.
- C. Lề trên và lề dưới là 10px, lề trái và lề phải là 5px.
- D. Tất cả bốn lề đều là 10px ở trên và 5px ở dưới.
Câu 26: Trong thiết kế responsive, việc sử dụng đơn vị đo lường tương đối (ví dụ: %, vw, vh, em, rem) thay vì đơn vị tuyệt đối (px) cho kích thước và khoảng cách trong mô hình hộp và bố cục mang lại lợi ích gì chính?
- A. Giúp bố cục linh hoạt và thích ứng tốt hơn với các kích thước màn hình khác nhau.
- B. Đảm bảo kích thước phần tử luôn cố định bất kể kích thước màn hình.
- C. Làm cho mã CSS ngắn gọn hơn.
- D. Cải thiện tốc độ tải trang.
Câu 27: Bạn có một container Flexbox (`display: flex;`). Các mục con (`flex item`) bên trong mặc định sẽ hiển thị như thế nào?
- A. Xếp chồng lên nhau theo chiều dọc, mỗi mục trên một dòng mới.
- B. Xếp cạnh nhau theo chiều ngang, mỗi mục chiếm toàn bộ chiều rộng của container.
- C. Xếp cạnh nhau theo chiều ngang, chỉ chiếm không gian cần thiết và cố gắng nằm trên một dòng.
- D. Bị ẩn đi cho đến khi có đủ không gian.
Câu 28: Trong CSS Grid, thuộc tính `grid-area` trên một Grid item có thể được sử dụng để làm gì?
- A. Kiểm soát kích thước font chữ bên trong mục Grid.
- B. Định vị mục Grid bằng cách chỉ định hàng/cột bắt đầu/kết thúc hoặc tên khu vực.
- C. Tạo hiệu ứng di chuột qua mục Grid.
- D. Đặt màu nền cho mục Grid.
Câu 29: Bạn cần tạo một thanh footer cố định ở cuối cửa sổ trình duyệt, luôn hiển thị ngay cả khi cuộn trang. Thuộc tính `position` nào là phù hợp nhất cho thanh footer này?
- A. position: fixed;
- B. position: relative;
- C. position: absolute;
- D. position: static;
Câu 30: Khi xây dựng bố cục trang web, việc sử dụng các phần tử ngữ nghĩa như `
