15+ Đề 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

Đề 01

Đề 02

Đề 03

Đề 04

Đề 05

Đề 06

Đề 07

Đề 08

Đề 09

Đề 10

0

Bạn đã sẵn sàng chưa? 45 phút làm bài bắt đầu!!!

Bạn đã hết giờ làm bài! Xem kết quả các câu hỏi đã làm nhé!!!

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

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 - Đề 01

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 - Đề 01 bao gồm nhiều câu hỏi hay, bám sát chương trình. Cùng làm bài tập trắc nghiệm ngay.

Câu 1: Thành phần nào của mô hình hộp CSS quyết định khoảng cách giữa nội dung thực tế của phần tử và đường viền của chính nó?

  • A. Margin (Lề)
  • B. Padding (Đệm)
  • C. Border (Viền)
  • D. Content (Nội dung)

Câu 2: Thuộc tính CSS `display: inline-block;` kết hợp đặc điểm của cả hai kiểu hiển thị `inline` và `block`. Phát biểu nào sau đây mô tả đúng nhất hành vi của phần tử khi sử dụng `display: inline-block;`?

  • A. Phần tử chiếm toàn bộ chiều rộng dòng và không cho phép phần tử khác xuất hiện bên cạnh.
  • B. Phần tử chỉ chiếm vừa đủ chiều rộng nội dung và luôn nằm trên dòng mới.
  • C. Phần tử hiển thị trên cùng dòng với các phần tử khác nhưng vẫn có thể thiết lập chiều rộng và chiều cao.
  • D. Phần tử hoàn toàn ẩn khỏi trang và không chiếm bất kỳ không gian nào.

Câu 3: Trong CSS, thuộc tính `margin` với giá trị `auto` thường được sử dụng để căn giữa phần tử theo chiều ngang. Điều kiện nào là bắt buộc để `margin: auto;` hoạt động hiệu quả trên một phần tử?

  • A. Phần tử phải có thuộc tính `display: block;` hoặc `display: inline-block;` và có chiều rộng (width) được xác định.
  • B. Phần tử phải là phần tử `inline` và nằm trong một phần tử cha có thuộc tính `text-align: center;`.
  • C. Thuộc tính `margin: auto;` chỉ hoạt động với các phần tử có vị trí tuyệt đối (absolute positioning).
  • D. Không có điều kiện đặc biệt nào, `margin: auto;` luôn tự động căn giữa mọi phần tử.

Câu 4: Xét đoạn mã HTML sau: `

  • A. Chiều rộng của cửa sổ trình duyệt.
  • B. Chiều rộng của phần tử cha (`#cha`).
  • C. Chiều rộng mặc định của phần tử `div` (thường là 100%).
  • D. Chiều rộng được tính toán dựa trên nội dung bên trong phần tử `con`.

    • Câu 5: Trong bố cục trang web, phần "header" thường chứa những thành phần quan trọng nào để nhận diện và điều hướng trang web?

    • A. Logo trang web và tiêu đề chính.
    • B. Nội dung bài viết và hình ảnh minh họa.
    • C. Thông tin liên hệ và bản quyền trang web.
    • D. Thanh điều hướng phụ và các liên kết mạng xã hội.

    Câu 6: Sự khác biệt chính giữa `padding` và `margin` trong mô hình hộp là gì?

    • A. `Padding` tạo khoảng cách bên ngoài phần tử, còn `margin` tạo khoảng cách bên trong.
    • B. `Padding` ảnh hưởng đến kích thước phần tử, còn `margin` thì không.
    • C. `Padding` tạo khoảng trắng bên trong đường viền của phần tử, còn `margin` tạo khoảng trắng bên ngoài đường viền.
    • D. `Padding` chỉ áp dụng cho phần tử `block`, còn `margin` chỉ áp dụng cho phần tử `inline`.

    Câu 7: Thanh điều hướng (navigation menu) thường được đặt ở vị trí nào trong bố cục trang web và chứa những loại liên kết nào?

    • A. Thường ở cuối trang (footer), chứa liên kết đến các trang mạng xã hội.
    • B. Thường ở đầu trang (header) hoặc bên cạnh (sidebar), chứa liên kết đến các phần chính của trang web.
    • C. Luôn nằm ở giữa trang (content), chứa liên kết quảng cáo.
    • D. Không có vị trí cố định, chứa liên kết ngẫu nhiên.

    Câu 8: Phần "footer" của trang web thường được sử dụng để hiển thị thông tin gì?

    • A. Tiêu đề trang web và logo.
    • B. Nội dung chính của trang.
    • C. Thanh điều hướng chính.
    • D. Thông tin bản quyền, liên kết nhanh, thông tin liên hệ.

    Câu 9: Thuộc tính CSS `box-sizing: border-box;` có tác dụng gì trong mô hình hộp?

    • A. Tính cả `padding` và `border` vào tổng chiều rộng và chiều cao của phần tử.
    • B. Loại bỏ hoàn toàn `padding` và `border` khỏi kích thước phần tử.
    • C. Chỉ tính `padding` vào kích thước phần tử, không tính `border`.
    • D. Chỉ tính `border` vào kích thước phần tử, không tính `padding`.

    Câu 10: Khi thiết kế bố cục trang web linh hoạt (responsive), đơn vị đo kích thước nào thường được ưu tiên sử dụng hơn để đảm bảo khả năng thích ứng với nhiều kích thước màn hình khác nhau?

    • A. Pixel (px)
    • B. Centimet (cm)
    • C. Phần trăm (%) và em
    • D. Point (pt)

    Câu 11: Giả sử bạn có một phần tử `

    ` với `width: 200px; padding: 20px; border: 5px solid black; margin: 10px;`. Tổng chiều rộng mà phần tử này chiếm trên trang web là bao nhiêu?

    • A. 200px
    • B. 270px
    • C. 240px
    • D. 230px

    Câu 12: Trong CSS, thuộc tính `float` thường được sử dụng để tạo bố cục đa cột. Tuy nhiên, việc lạm dụng `float` có thể gây ra vấn đề gì?

    • A. Làm chậm tốc độ tải trang.
    • B. Gây ra lỗi bảo mật.
    • C. Ảnh hưởng đến khả năng tương thích với các trình duyệt cũ.
    • D. Gây ra hiện tượng "clearfix" (phần tử cha không bao bọc được phần tử con float) và bố cục bị phá vỡ.

    Câu 13: Để tạo khoảng cách giữa các dòng chữ trong một đoạn văn bản (phần tử `

    `), thuộc tính CSS nào được sử dụng?

    • A. letter-spacing
    • B. word-spacing
    • C. line-height
    • D. text-indent

    Câu 14: Phần tử HTML `

    ` và `

    ` đều được sử dụng để cấu trúc nội dung. Sự khác biệt chính giữa chúng là gì?

    • A. `
      ` chứa nội dung độc lập, còn `

      ` chứa các phần nội dung liên quan.
    • B. `
      ` đại diện cho một nội dung độc lập, có thể tự đứng một mình (ví dụ: bài viết, blog post), còn `

      ` dùng để nhóm các phần nội dung liên quan theo chủ đề.
    • C. `
      ` chỉ dùng cho phần đầu trang, còn `

      ` dùng cho phần nội dung chính.
    • D. Không có sự khác biệt, chúng có thể thay thế cho nhau.

    Câu 15: Khi sử dụng Flexbox để bố cục, thuộc tính `justify-content` dùng để làm gì?

    • A. Căn chỉnh các phần tử con theo trục chính (thường là trục ngang).
    • B. Căn chỉnh các phần tử con theo trục phụ (thường là trục dọc).
    • C. Thay đổi hướng của trục chính.
    • D. Thiết lập kích thước của các phần tử con.

    Câu 16: Thuộc tính CSS `position: fixed;` có đặc điểm gì khác biệt so với `position: absolute;`?

    • A. `position: fixed;` định vị phần tử so với phần tử cha gần nhất, còn `position: absolute;` định vị so với cửa sổ trình duyệt.
    • B. `position: fixed;` định vị phần tử cố định trên màn hình ngay cả khi cuộn trang, còn `position: absolute;` định vị so với phần tử cha đã định vị vị trí (relative hoặc absolute).
    • C. `position: fixed;` chỉ áp dụng cho phần tử `inline`, còn `position: absolute;` chỉ áp dụng cho phần tử `block`.
    • D. `position: fixed;` không thể di chuyển phần tử, còn `position: absolute;` có thể di chuyển tự do.

    Câu 17: Trong CSS Grid Layout, "grid container" và "grid item" là gì?

    • A. "Grid container" là phần tử chứa nội dung chính, "grid item" là thanh điều hướng.
    • B. "Grid container" và "grid item" là hai tên gọi khác nhau của cùng một loại phần tử.
    • C. "Grid container" là phần tử cha được thiết lập `display: grid;`, còn "grid item" là các phần tử con trực tiếp của container đó.
    • D. "Grid container" là toàn bộ trang web, "grid item" là các phần header, footer, content, sidebar.

    Câu 18: Để tạo hiệu ứng "sticky footer" (footer luôn dính dưới cùng màn hình ngay cả khi nội dung trang ngắn), kỹ thuật CSS nào thường được sử dụng?

    • A. Sử dụng `position: fixed;` cho phần tử `footer`.
    • B. Sử dụng `margin-bottom: -Xpx;` với giá trị âm cho phần tử `body`.
    • C. Sử dụng Flexbox với `justify-content: space-between;` cho phần tử `body`.
    • D. Kết hợp Flexbox hoặc Grid Layout trên phần tử body và thiết lập chiều cao tối thiểu cho nội dung.

    Câu 19: Trong CSS, bạn có thể sử dụng giá trị nào cho thuộc tính `border-style` để tạo đường viền dạng đường chấm chấm?

    • A. dashed
    • B. dotted
    • C. groove
    • D. ridge

    Câu 20: Khi kiểm tra bố cục trang web bằng công cụ Inspect của trình duyệt, bạn thấy một phần tử có vùng margin màu cam. Vùng màu cam này đại diện cho thành phần nào của mô hình hộp?

    • A. Margin (Lề)
    • B. Padding (Đệm)
    • C. Border (Viền)
    • D. Content (Nội dung)

    Câu 21: Để thay đổi thứ tự hiển thị của các phần tử Flexbox mà không thay đổi cấu trúc HTML, thuộc tính CSS nào được sử dụng?

    • A. flex-direction
    • B. order-group
    • C. order
    • D. flex-wrap

    Câu 22: Trong thiết kế web responsive, "viewport" là gì và tại sao nó quan trọng?

    • A. Viewport là kích thước của logo trang web; quan trọng để logo hiển thị đẹp trên mọi thiết bị.
    • B. Viewport là tốc độ tải trang; quan trọng để trang web tải nhanh hơn trên thiết bị di động.
    • C. Viewport là kích thước phông chữ mặc định; quan trọng để chữ dễ đọc trên mọi thiết bị.
    • D. Viewport là vùng hiển thị của trang web trên thiết bị; quan trọng để trang web hiển thị đúng tỷ lệ và bố cục trên các kích thước màn hình khác nhau.

    Câu 23: Khi sử dụng CSS Grid, thuộc tính `grid-template-columns: repeat(3, 1fr);` có ý nghĩa gì?

    • A. Tạo 3 cột với chiều rộng cố định là 1 pixel.
    • B. Tạo 3 cột có chiều rộng bằng nhau, mỗi cột chiếm 1 phần tỷ lệ còn lại của container.
    • C. Lặp lại cột đầu tiên 3 lần.
    • D. Tạo 1 cột duy nhất rộng gấp 3 lần container.

    Câu 24: Để làm cho một hình ảnh (phần tử ``) trở thành phần tử hiển thị theo khối, bạn cần sử dụng thuộc tính CSS nào?

    • A. display: block;
    • B. display: inline;
    • C. float: left;
    • D. position: absolute;

    Câu 25: Giả sử bạn muốn tạo một khoảng cách 20px giữa phần nội dung của một nút bấm và đường viền của nó. Bạn sẽ sử dụng thuộc tính CSS nào?

    • A. margin: 20px;
    • B. padding: 20px;
    • C. border-spacing: 20px;
    • D. line-height: 20px;

    Câu 26: Phần tử HTML `

    Câu 27: Để đảm bảo rằng chiều rộng của một phần tử luôn là 300px, bất kể nội dung bên trong nhiều hay ít, bạn nên thiết lập thuộc tính CSS nào?

    • A. width: 300px;
    • B. min-width: 300px;
    • C. max-width: 300px;
    • D. height: 300px;

    Câu 28: Trong CSS, giá trị `inherit` của một thuộc tính có nghĩa là gì?

    • A. Đặt thuộc tính về giá trị mặc định của trình duyệt.
    • B. Ngăn không cho thuộc tính được áp dụng.
    • C. Áp dụng giá trị của thuộc tính cho tất cả các phần tử con.
    • D. Phần tử sẽ kế thừa giá trị của thuộc tính từ phần tử cha gần nhất của nó.

    Câu 29: Khi thiết kế bố cục trang web, việc sử dụng các phần tử semantic HTML5 (như `

    `, `

    Câu 30: Bạn cần tạo một bố cục trang web gồm hai cột: một cột bên trái rộng 25% chiều rộng trang web và một cột bên phải rộng 75%. Phương pháp CSS Grid Layout nào sau đây là phù hợp nhất?

    • A. grid-template-columns: 1fr 1fr;
    • B. grid-template-columns: repeat(2, 1fr);
    • C. grid-template-columns: 25% 75%;
    • D. grid-template-columns: auto auto;

    1 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 1: Thành phần nào của mô hình hộp CSS quyết định khoảng cách giữa nội dung thực tế của phần tử và đường viền của chính nó?

    2 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 2: Thuộc tính CSS `display: inline-block;` kết hợp đặc điểm của cả hai kiểu hiển thị `inline` và `block`. Phát biểu nào sau đây mô tả đúng nhất hành vi của phần tử khi sử dụng `display: inline-block;`?

    3 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 3: Trong CSS, thuộc tính `margin` với giá trị `auto` thường được sử dụng để căn giữa phần tử theo chiều ngang. Điều kiện nào là *bắt buộc* để `margin: auto;` hoạt động hiệu quả trên một phần tử?

    4 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 4: Xét đoạn mã HTML sau: `

    `. Nếu phần tử `con` có `width: 50%;` và phần tử `cha` không có thuộc tính chiều rộng nào, chiều rộng hiển thị của phần tử `con` sẽ được tính dựa trên yếu tố nào?

    5 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 5: Trong bố cục trang web, phần 'header' thường chứa những thành phần quan trọng nào để nhận diện và điều hướng trang web?

    6 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 6: Sự khác biệt chính giữa `padding` và `margin` trong mô hình hộp là gì?

    7 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 7: Thanh điều hướng (navigation menu) thường được đặt ở vị trí nào trong bố cục trang web và chứa những loại liên kết nào?

    8 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 8: Phần 'footer' của trang web thường được sử dụng để hiển thị thông tin gì?

    9 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 9: Thuộc tính CSS `box-sizing: border-box;` có tác dụng gì trong mô hình hộp?

    10 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 10: Khi thiết kế bố cục trang web linh hoạt (responsive), đơn vị đo kích thước nào thường được ưu tiên sử dụng hơn để đảm bảo khả năng thích ứng với nhiều kích thước màn hình khác nhau?

    11 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 11: Giả sử bạn có một phần tử `

    ` với `width: 200px; padding: 20px; border: 5px solid black; margin: 10px;`. Tổng chiều rộng mà phần tử này chiếm trên trang web là bao nhiêu?

    12 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 12: Trong CSS, thuộc tính `float` thường được sử dụng để tạo bố cục đa cột. Tuy nhiên, việc lạm dụng `float` có thể gây ra vấn đề gì?

    13 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 13: Để tạo khoảng cách giữa các dòng chữ trong một đoạn văn bản (phần tử `

    `), thuộc tính CSS nào được sử dụng?

    14 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 14: Phần tử HTML `

    ` và `

    ` đều được sử dụng để cấu trúc nội dung. Sự khác biệt chính giữa chúng là gì?

    15 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 15: Khi sử dụng Flexbox để bố cục, thuộc tính `justify-content` dùng để làm gì?

    16 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 16: Thuộc tính CSS `position: fixed;` có đặc điểm gì khác biệt so với `position: absolute;`?

    17 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 17: Trong CSS Grid Layout, 'grid container' và 'grid item' là gì?

    18 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 18: Để tạo hiệu ứng 'sticky footer' (footer luôn dính dưới cùng màn hình ngay cả khi nội dung trang ngắn), kỹ thuật CSS nào thường được sử dụng?

    19 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 19: Trong CSS, bạn có thể sử dụng giá trị nào cho thuộc tính `border-style` để tạo đường viền dạng đường chấm chấm?

    20 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 20: Khi kiểm tra bố cục trang web bằng công cụ Inspect của trình duyệt, bạn thấy một phần tử có vùng margin màu cam. Vùng màu cam này đại diện cho thành phần nào của mô hình hộp?

    21 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 21: Để thay đổi thứ tự hiển thị của các phần tử Flexbox mà không thay đổi cấu trúc HTML, thuộc tính CSS nào được sử dụng?

    22 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 22: Trong thiết kế web responsive, 'viewport' là gì và tại sao nó quan trọng?

    23 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 23: Khi sử dụng CSS Grid, thuộc tính `grid-template-columns: repeat(3, 1fr);` có ý nghĩa gì?

    24 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 24: Để làm cho một hình ảnh (phần tử ``) trở thành phần tử hiển thị theo khối, bạn cần sử dụng thuộc tính CSS nào?

    25 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 25: Giả sử bạn muốn tạo một khoảng cách 20px giữa phần nội dung của một nút bấm và đường viền của nó. Bạn sẽ sử dụng thuộc tính CSS nào?

    26 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 26: Phần tử HTML `

    27 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 27: Để đảm bảo rằng chiều rộng của một phần tử luôn là 300px, bất kể nội dung bên trong nhiều hay ít, bạn nên thiết lập thuộc tính CSS nào?

    28 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 28: Trong CSS, giá trị `inherit` của một thuộc tính có nghĩa là gì?

    29 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 29: Khi thiết kế bố cục trang web, việc sử dụng các phần tử semantic HTML5 (như `

    `, `

    30 / 30

    Category: 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

    Tags: Bộ đề 1

    Câu 30: Bạn cần tạo một bố cục trang web gồm hai cột: một cột bên trái rộng 25% chiều rộng trang web và một cột bên phải rộng 75%. Phương pháp CSS Grid Layout nào sau đây là phù hợp nhất?

    Xem kết quả

    By Wordpress Quiz plugin
    0

    Bạn đã sẵn sàng chưa? 45 phút làm bài bắt đầu!!!

    Bạn đã hết giờ làm bài! Xem kết quả các câu hỏi đã làm nhé!!!

    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

    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 - Đề 02

    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 - Đề 02 bao gồm nhiều câu hỏi hay, bám sát chương trình. Cùng làm bài tập trắc nghiệm ngay.

    Câu 1: Mô hình hộp CSS là một khái niệm cơ bản trong thiết kế web. Thành phần nào sau đây không thuộc mô hình hộp?

    • A. Đường viền (Border)
    • B. Vùng đệm (Padding)
    • C. Vùng nội dung (Content)
    • D. Nền (Background)

    Câu 2: Thuộc tính CSS `display` với giá trị `inline-block` có tác dụng gì?

    • A. Ẩn hoàn toàn phần tử khỏi trang web.
    • B. Hiển thị phần tử thành một khối chiếm toàn bộ chiều rộng dòng.
    • C. Hiển thị phần tử trên một dòng và cho phép thiết lập kích thước (chiều rộng, chiều cao).
    • D. Sắp xếp các phần tử con theo dạng lưới.

    Câu 3: Trong CSS, thuộc tính nào được sử dụng để thiết lập khoảng cách bên trong phần tử, giữa nội dung và đường viền?

    • A. margin
    • B. padding
    • C. border
    • D. width

    Câu 4: Cho đoạn mã CSS sau:

    ```css
    .container {
    width: 300px;
    border: 1px solid black;
    margin: 20px;
    }
    ```

    Đoạn mã này sẽ tạo ra một vùng chứa (container) có đặc điểm gì?

    • A. Một vùng chứa rộng 300px, có đường viền đen và cách các phần tử xung quanh 20px.
    • B. Một vùng chứa rộng 300px, có đường viền đen và khoảng cách 20px giữa đường viền và nội dung.
    • C. Một vùng chứa rộng 322px (300px + 2border + 2margin), có đường viền đen.
    • D. Một vùng chứa rộng 280px (300px - 2*margin), có đường viền đen và lề 20px.

    Câu 5: Trong bố cục trang web, phần `

    ` thường được dùng để chứa thông tin gì?

    • A. Nội dung chính của trang web.
    • B. Các liên kết điều hướng thứ cấp.
    • C. Logo và tiêu đề trang web.
    • D. Thông tin bản quyền và liên hệ.

    Câu 6: Phần tử HTML nào sau đây là phần tử khối (block-level element) theo mặc định?

    Câu 7: Để tạo bố cục trang web linh hoạt, tự động điều chỉnh theo kích thước màn hình, kỹ thuật CSS nào thường được sử dụng?

    • A. CSS Reset
    • B. CSS Animation
    • C. CSS Transitions
    • D. Media Queries

    Câu 8: Thuộc tính CSS `float` thường được dùng để làm gì trong bố cục trang web?

    • A. Thay đổi màu nền của phần tử.
    • B. Dịch chuyển phần tử sang trái hoặc phải và cho phép các phần tử khác bao quanh.
    • C. Tạo hiệu ứng động cho phần tử.
    • D. Căn giữa phần tử theo chiều ngang.

    Câu 9: Trong mô hình hộp, thứ tự các lớp từ trong ra ngoài (từ nội dung đến ngoài cùng) là:

    • A. Nội dung - Đường viền - Vùng đệm - Lề
    • B. Nội dung - Lề - Vùng đệm - Đường viền
    • C. Nội dung - Vùng đệm - Đường viền - Lề
    • D. Đường viền - Vùng đệm - Nội dung - Lề

    Câu 10: Phần `

    Câu 11: Giả sử bạn có một phần tử `

    ` với `width: 200px; padding: 10px; border: 5px solid black;`. Tổng chiều rộng thực tế mà phần tử này chiếm trên trang web là bao nhiêu?

    • A. 200px
    • B. 215px
    • C. 230px
    • D. 240px

    Câu 12: Thuộc tính CSS nào dùng để thiết lập khoảng cách bên ngoài phần tử, phân tách nó với các phần tử khác?

    • A. margin
    • B. padding
    • C. border
    • D. outline

    Câu 13: Để tạo một bố cục trang web với hai cột, một cột nội dung chính rộng hơn và một cột bên hẹp hơn (sidebar), phương pháp CSS nào sau đây thường được sử dụng?

    • A. CSS Reset
    • B. Flexbox
    • C. CSS Animation
    • D. Transitions

    Câu 14: Trong CSS, giá trị `auto` của thuộc tính `margin` thường được sử dụng để làm gì?

    • A. Tự động điều chỉnh chiều cao của phần tử.
    • B. Tự động thiết lập màu nền cho phần tử.
    • C. Tự động tạo đường viền cho phần tử.
    • D. Căn giữa phần tử theo chiều ngang trong vùng chứa của nó.

    Câu 15: Phần tử HTML `

    ` thường được dùng để chứa loại nội dung nào?

    • A. Menu điều hướng.
    • B. Thông tin bản quyền.
    • C. Bài viết hoặc nội dung độc lập, khép kín.
    • D. Quảng cáo và banner.

    Câu 16: Thuộc tính CSS `box-sizing: border-box;` có tác dụng gì?

    • A. Làm cho đường viền của phần tử hiển thị bên ngoài nội dung.
    • B. Tính cả padding và border vào tổng chiều rộng và chiều cao của phần tử.
    • C. Loại bỏ đường viền của phần tử.
    • D. Tạo bóng đổ cho phần tử.

    Câu 17: Để tạo khoảng cách giữa các dòng chữ trong một đoạn văn bản, thuộc tính CSS nào được sử dụng?

    • A. letter-spacing
    • B. word-spacing
    • C. line-height
    • D. text-indent

    Câu 18: Trong bố cục trang web, phần `

    Câu 19: Kiểu bố cục trang web nào mà tất cả nội dung được sắp xếp trong một cột duy nhất?

    • A. Bố cục lưới (Grid layout)
    • B. Bố cục nhiều cột (Multi-column layout)
    • C. Bố cục chân trang cố định (Fixed footer layout)
    • D. Bố cục một cột (Single-column layout)

    Câu 20: Phần `

    ` trong HTML5 thường được sử dụng để chứa thông tin gì ở cuối trang web?

    • A. Menu điều hướng chính.
    • B. Thông tin bản quyền, liên hệ, và các liên kết phụ.
    • C. Tiêu đề trang web.
    • D. Nội dung quảng cáo nổi bật.

    Câu 21: Để đảm bảo trang web hiển thị tốt trên nhiều thiết bị (máy tính, điện thoại, máy tính bảng), cần áp dụng nguyên tắc thiết kế nào?

    • A. Thiết kế đáp ứng (Responsive Design)
    • B. Thiết kế phẳng (Flat Design)
    • C. Thiết kế tối giản (Minimalist Design)
    • D. Thiết kế cố định (Fixed Design)

    Câu 22: Thuộc tính CSS `position: fixed;` có tác dụng gì?

    • A. Đặt phần tử theo vị trí tương đối so với vị trí ban đầu của nó.
    • B. Đặt phần tử theo vị trí tuyệt đối so với phần tử cha gần nhất đã định vị.
    • C. Cố định phần tử tại một vị trí trên màn hình, không bị cuộn theo trang.
    • D. Đặt phần tử tĩnh, theo luồng tài liệu thông thường.

    Câu 23: Trong mô hình hộp, vùng nào có thể trong suốt và cho phép nhìn thấy màu nền hoặc hình nền của phần tử cha?

    • A. Vùng đường viền (Border)
    • B. Vùng đệm (Padding) và Vùng lề (Margin)
    • C. Vùng nội dung (Content)
    • D. Tất cả các vùng đều không trong suốt

    Câu 24: Để tạo hiệu ứng đổ bóng cho một phần tử, thuộc tính CSS nào được sử dụng?

    • A. text-shadow
    • B. outline-shadow
    • C. border-shadow
    • D. box-shadow

    Câu 25: Bố cục trang web "dạng lỏng" (fluid layout) có đặc điểm gì?

    • A. Sử dụng đơn vị phần trăm (%) cho chiều rộng, co giãn theo kích thước màn hình.
    • B. Sử dụng đơn vị pixel (px) cố định, không thay đổi theo kích thước màn hình.
    • C. Chỉ hiển thị tốt trên màn hình máy tính để bàn.
    • D. Luôn có số lượng cột cố định, không đổi.

    Câu 26: Thuộc tính CSS `overflow: hidden;` thường được sử dụng để làm gì?

    • A. Tạo thanh cuộn khi nội dung vượt quá kích thước vùng chứa.
    • B. Ẩn phần nội dung bị tràn ra ngoài vùng chứa.
    • C. Hiển thị phần nội dung tràn ra ngoài vùng chứa.
    • D. Thay đổi màu nền của vùng chứa khi nội dung tràn.

    Câu 27: Để căn chỉnh nội dung của một phần tử theo chiều dọc (ví dụ, căn giữa theo chiều dọc), phương pháp CSS nào sau đây thường được sử dụng với Flexbox?

    • A. justify-content: center;
    • B. text-align: center;
    • C. align-items: center;
    • D. vertical-align: middle;

    Câu 28: Phần tử HTML `

    ` thường được dùng để nhóm các nội dung có liên quan theo chủ đề. Điều gì phân biệt `

    ` với `

    `?

    • A. `
      ` có thể chứa nhiều `

      ` nhưng ngược lại thì không.
    • B. `
      ` mang ý nghĩa ngữ nghĩa (semantic) rõ ràng hơn, dùng để nhóm nội dung theo chủ đề, còn `

      ` là phần tử container chung.
    • C. `
      ` luôn hiển thị theo khối, còn `

      ` thì hiển thị theo dòng.
    • D. `
      ` chỉ dùng cho phần nội dung chính, còn `

      ` dùng cho các phần khác của trang.

    Câu 29: Khi thiết kế web đáp ứng, "viewport" là gì?

    • A. Thanh địa chỉ của trình duyệt web.
    • B. Khu vực chứa mã nguồn HTML của trang web.
    • C. Phần chân trang của website.
    • D. Vùng hiển thị trang web của người dùng, thay đổi tùy theo thiết bị.

    Câu 30: Trong CSS Grid Layout, thuộc tính nào được sử dụng để định nghĩa số lượng cột của lưới?

    • A. grid-template-columns
    • B. grid-template-rows
    • C. grid-column-gap
    • D. grid-row-gap

    1 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 1: Mô hình hộp CSS là một khái niệm cơ bản trong thiết kế web. Thành phần nào sau đây *không* thuộc mô hình hộp?

    2 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 2: Thuộc tính CSS `display` với giá trị `inline-block` có tác dụng gì?

    3 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 3: Trong CSS, thuộc tính nào được sử dụng để thiết lập khoảng cách *bên trong* phần tử, giữa nội dung và đường viền?

    4 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 4: Cho đoạn mã CSS sau:

    ```css
    .container {
    width: 300px;
    border: 1px solid black;
    margin: 20px;
    }
    ```

    Đoạn mã này sẽ tạo ra một vùng chứa (container) có đặc điểm gì?

    5 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 5: Trong bố cục trang web, phần `

    ` thường được dùng để chứa thông tin gì?

    6 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 6: Phần tử HTML nào sau đây là phần tử *khối* (block-level element) theo mặc định?

    7 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 7: Để tạo bố cục trang web linh hoạt, tự động điều chỉnh theo kích thước màn hình, kỹ thuật CSS nào thường được sử dụng?

    8 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 8: Thuộc tính CSS `float` thường được dùng để làm gì trong bố cục trang web?

    9 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 9: Trong mô hình hộp, thứ tự các lớp từ trong ra ngoài (từ nội dung đến ngoài cùng) là:

    10 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 10: Phần `

    11 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 11: Giả sử bạn có một phần tử `

    ` với `width: 200px; padding: 10px; border: 5px solid black;`. Tổng chiều rộng thực tế mà phần tử này chiếm trên trang web là bao nhiêu?

    12 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 12: Thuộc tính CSS nào dùng để thiết lập khoảng cách *bên ngoài* phần tử, phân tách nó với các phần tử khác?

    13 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 13: Để tạo một bố cục trang web với hai cột, một cột nội dung chính rộng hơn và một cột bên hẹp hơn (sidebar), phương pháp CSS nào sau đây thường được sử dụng?

    14 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 14: Trong CSS, giá trị `auto` của thuộc tính `margin` thường được sử dụng để làm gì?

    15 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 15: Phần tử HTML `

    ` thường được dùng để chứa loại nội dung nào?

    16 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 16: Thuộc tính CSS `box-sizing: border-box;` có tác dụng gì?

    17 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 17: Để tạo khoảng cách giữa các dòng chữ trong một đoạn văn bản, thuộc tính CSS nào được sử dụng?

    18 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 18: Trong bố cục trang web, phần `

    19 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 19: Kiểu bố cục trang web nào mà tất cả nội dung được sắp xếp trong một cột duy nhất?

    20 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 20: Phần `

    ` trong HTML5 thường được sử dụng để chứa thông tin gì ở cuối trang web?

    21 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 21: Để đảm bảo trang web hiển thị tốt trên nhiều thiết bị (máy tính, điện thoại, máy tính bảng), cần áp dụng nguyên tắc thiết kế nào?

    22 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 22: Thuộc tính CSS `position: fixed;` có tác dụng gì?

    23 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 23: Trong mô hình hộp, vùng nào có thể trong suốt và cho phép nhìn thấy màu nền hoặc hình nền của phần tử cha?

    24 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 24: Để tạo hiệu ứng đổ bóng cho một phần tử, thuộc tính CSS nào được sử dụng?

    25 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 25: Bố cục trang web 'dạng lỏng' (fluid layout) có đặc điểm gì?

    26 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 26: Thuộc tính CSS `overflow: hidden;` thường được sử dụng để làm gì?

    27 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 27: Để căn chỉnh nội dung của một phần tử theo chiều dọc (ví dụ, căn giữa theo chiều dọc), phương pháp CSS nào sau đây thường được sử dụng với Flexbox?

    28 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 28: Phần tử HTML `

    ` thường được dùng để nhóm các nội dung có liên quan theo chủ đề. Điều gì phân biệt `

    ` với `

    `?

    29 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 29: Khi thiết kế web đáp ứng, 'viewport' là gì?

    30 / 30

    Category: 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

    Tags: Bộ đề 2

    Câu 30: Trong CSS Grid Layout, thuộc tính nào được sử dụng để định nghĩa số lượng cột của lưới?

    Xem kết quả

    By Wordpress Quiz plugin
    0

    Bạn đã sẵn sàng chưa? 45 phút làm bài bắt đầu!!!

    Bạn đã hết giờ làm bài! Xem kết quả các câu hỏi đã làm nhé!!!

    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

    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 - Đề 03

    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 - Đề 03 bao gồm nhiều câu hỏi hay, bám sát chương trình. Cùng làm bài tập trắc nghiệm ngay.

    Câu 1: Theo mô hình hộp trong CSS, tổng chiều rộng thực tế của một phần tử bao gồm những thành phần nào được tính toán mặc định khi bạn thiết lập thuộc tính `width`?

    • A. Chỉ vùng nội dung (content).
    • B. Vùng nội dung (content), vùng đệm (padding), và vùng đường viền (border).
    • C. Vùng nội dung (content), vùng đệm (padding), vùng đường viền (border), và vùng lề (margin).
    • D. Chỉ vùng nội dung (content) và vùng đệm (padding).

    Câu 2: Bạn có một phần tử `div` với CSS sau: `width: 200px; padding: 20px; border: 5px solid black; margin: 10px;`. Nếu `box-sizing` được thiết lập mặc định là `content-box`, tổng chiều rộng hiển thị của phần tử này trên trang (bao gồm cả lề) là bao nhiêu pixel?

    • A. 200px
    • B. 250px
    • C. 270px
    • D. 290px

    Câu 3: Thuộc tính CSS nào được sử dụng để tạo khoảng trống bên trong đường viền (border) và xung quanh nội dung (content) của một phần tử?

    • A. margin
    • B. border
    • C. padding
    • D. outline

    Câu 4: Hai phần tử `div` được đặt liền kề nhau theo chiều dọc. Cả hai đều có `margin-bottom: 20px;` và `margin-top: 30px;` tương ứng. Theo quy tắc gộp lề (margin collapse) mặc định trong CSS, khoảng cách thực tế giữa hai phần tử này sẽ là bao nhiêu pixel?

    • A. 50px
    • B. 30px
    • C. 20px
    • D. 0px

    Câu 5: Bạn muốn một phần tử `img` và một phần tử `span` hiển thị trên cùng một dòng và chỉ chiếm không gian cần thiết. Kiểu hiển thị mặc định của chúng là gì và bạn có cần thay đổi nó không?

    • A. Cả hai đều là inline, không cần thay đổi.
    • B. `img` là block, `span` là inline, cần thay đổi `img` thành inline.
    • C. Cả hai đều là block, cần thay đổi cả hai thành inline.
    • D. `img` là inline, `span` là block, cần thay đổi `span` thành inline.

    Câu 6: Phần tử HTML nào sau đây thường có kiểu hiển thị mặc định là `block`?

    • D.

    Câu 7: Bạn sử dụng thuộc tính CSS `display: inline-block;` cho một phần tử. Điều này mang lại những đặc điểm kết hợp nào?

    • A. Hiển thị trên một dòng riêng và không chấp nhận thuộc tính `width` hoặc `height`.
    • B. Hiển thị trên cùng một dòng và không chấp nhận thuộc tính `width` hoặc `height`.
    • C. Hiển thị trên cùng một dòng nhưng chấp nhận thuộc tính `width` và `height`.
    • D. Hiển thị trên một dòng riêng nhưng chấp nhận thuộc tính `width` và `height`.

    Câu 8: Để căn giữa một phần tử `div` theo chiều ngang bên trong phần tử cha của nó, bạn thường sử dụng kết hợp các thuộc tính nào?

    • A. `display: block; width: [giá trị]; margin: 0 auto;`
    • B. `display: inline; text-align: center;`
    • C. `display: block; text-align: center;`
    • D. `display: inline-block; margin: auto;`

    Câu 9: Thuộc tính CSS `box-sizing: border-box;` thay đổi cách tính toán kích thước của phần tử như thế nào?

    • A. Thuộc tính `width` và `height` chỉ áp dụng cho vùng nội dung.
    • B. Thuộc tính `width` và `height` bao gồm cả vùng nội dung, vùng đệm và vùng đường viền.
    • C. Thuộc tính `width` và `height` bao gồm cả vùng nội dung, vùng đệm, vùng đường viền và vùng lề.
    • D. Thuộc tính `width` và `height` chỉ áp dụng cho vùng đệm và đường viền.

    Câu 10: Trong bố cục trang web truyền thống, phần tử HTML nào thường được sử dụng như một "thùng chứa" chung để nhóm các phần tử khác lại và áp dụng CSS định dạng cho một khu vực lớn?

    • A.

    Câu 11: Bạn có một đoạn CSS: `.box { padding: 10px 20px; }`. Điều này có nghĩa là gì?

    • A. Đệm trên và dưới là 10px, đệm trái và phải là 20px.
    • B. Đệm trên và trái là 10px, đệm dưới và phải là 20px.
    • C. Đệm trên và dưới là 10px, đệm trái và phải là 20px.
    • D. Đệm trên là 10px, đệm phải là 20px, đệm dưới và trái là 10px.

    Câu 12: Bạn muốn tạo một bố cục trang web với một thanh điều hướng ở trên cùng, phần nội dung chính ở giữa và chân trang ở dưới cùng. Các phần tử HTML `header`, `main` (hoặc `div` cho nội dung), và `footer` thường được sử dụng với kiểu hiển thị mặc định nào để đạt được cấu trúc này?

    • A. Block
    • B. Inline
    • C. Inline-block
    • D. None

    Câu 13: Xét đoạn CSS sau: `.element { margin: 5px 15px 10px; }`. Vùng lề (margin) của phần tử này sẽ được áp dụng như thế nào?

    • A. Lề trên 5px, lề phải 15px, lề dưới 10px, lề trái 10px.
    • B. Lề trên 5px, lề phải 15px, lề dưới 10px, lề trái 15px.
    • C. Lề trên 5px, lề phải 15px, lề dưới 10px, lề trái 5px.
    • D. Lề trên 5px, lề phải 15px, lề dưới 10px, lề trái 15px.

    Câu 14: Khi nào thuộc tính `width` và `height` không có tác dụng hoặc có tác dụng không như mong đợi trên một phần tử?

    • A. Khi phần tử có thuộc tính `display: block;`.
    • B. Khi phần tử có thuộc tính `display: inline;`.
    • C. Khi phần tử có thuộc tính `display: inline-block;`.
    • D. Khi phần tử có thuộc tính `box-sizing: border-box;`.

    Câu 15: Bạn muốn tạo một khoảng trống giữa nội dung và đường viền của một nút bấm. Thuộc tính nào trong mô hình hộp là phù hợp nhất để điều chỉnh khoảng trống này?

    • A. margin
    • B. border
    • C. padding
    • D. outline

    Câu 16: Mô hình hộp (Box Model) là một khái niệm cốt lõi trong CSS giải thích điều gì?

    • A. Cách các phần tử được định vị trên trang.
    • B. Cách các phần tử tương tác khi di chuột qua.
    • C. Cách màu sắc và phông chữ được áp dụng cho các phần tử.
    • D. Cách các phần tử HTML được hiển thị dưới dạng các hộp hình chữ nhật với các lớp (layer) khác nhau.

    Câu 17: Bạn có một phần tử với CSS sau: `.item { width: 100px; height: 100px; padding: 10px; border: 2px solid red; box-sizing: border-box; }`. Chiều rộng thực tế (không tính margin) của phần tử này là bao nhiêu pixel?

    • A. 100px
    • B. 112px
    • C. 120px
    • D. 124px

    Câu 18: Trong bố cục trang web, phần nào thường chứa các liên kết điều hướng chính (navigation links) để người dùng di chuyển giữa các trang?

    • A. Header
    • B. Navigation (Nav)
    • C. Footer
    • D. Aside

    Câu 19: Thuộc tính `display: none;` có tác dụng gì đối với một phần tử?

    • A. Ẩn phần tử nhưng vẫn giữ chỗ trống của nó trên bố cục.
    • B. Hiển thị phần tử dưới dạng inline.
    • C. Làm cho phần tử nổi (float) sang trái.
    • D. Ẩn hoàn toàn phần tử và loại bỏ nó khỏi luồng bố cục, không giữ chỗ trống.

    Câu 20: Để tạo một bố cục hai cột đơn giản, bạn có thể sử dụng thuộc tính `float`. Khi một phần tử được thiết lập `float: left;`, điều gì thường xảy ra với các phần tử khối (block) theo sau nó?

    • A. Chúng sẽ tự động nằm bên phải của phần tử nổi.
    • B. Chúng sẽ nằm dưới phần tử nổi và không bị ảnh hưởng.
    • C. Chúng sẽ trôi lên và nằm cạnh phần tử nổi, văn bản có thể bao quanh nó.
    • D. Chúng sẽ bị ẩn đi.

    Câu 21: Thuộc tính `clear: both;` được sử dụng phổ biến nhất để làm gì trong bố cục sử dụng `float`?

    • A. Ngăn không cho phần tử nằm cạnh các phần tử nổi (float) đã được khai báo trước đó.
    • B. Làm cho phần tử nổi sang cả hai bên (trái và phải).
    • C. Xóa bỏ tất cả các thuộc tính float trên phần tử.
    • D. Ẩn phần tử khỏi trang.

    Câu 22: Giả sử bạn có một `div` cha chứa hai `div` con. Bạn muốn hai `div` con này nằm cạnh nhau trên cùng một hàng. Phương pháp nào sau đây là cách tiếp cận cơ bản sử dụng thuộc tính `display` hoặc `float`?

    • A. Thiết lập `display: block;` cho cả hai `div` con.
    • B. Thiết lập `display: inline-block;` hoặc `float: left;` cho cả hai `div` con.
    • C. Thiết lập `display: inline;` cho cả hai `div` con.
    • D. Thiết lập `margin: auto;` cho cả hai `div` con.

    Câu 23: Trong mô hình hộp, vùng nào có màu nền mặc định là trong suốt và thường được sử dụng để tạo khoảng cách giữa các phần tử khác?

    • A. Content
    • B. Padding
    • C. Border
    • D. Margin

    Câu 24: Thuộc tính CSS nào được sử dụng để thiết lập kiểu, độ rộng và màu sắc của đường viền xung quanh một phần tử?

    • A. border
    • B. outline
    • C. border-radius
    • D. text-decoration

    Câu 25: Khi sử dụng thuộc tính `margin`, giá trị `auto` có ý nghĩa đặc biệt gì khi được áp dụng cho lề trái và lề phải của một phần tử có kiểu hiển thị `block` và có `width` cố định?

    • A. Tự động điều chỉnh lề để phần tử tràn ra toàn bộ chiều rộng của phần tử cha.
    • B. Thiết lập lề bằng 0.
    • C. Tự động tính toán lề để căn giữa phần tử theo chiều ngang trong phần tử cha.
    • D. Chỉ có tác dụng khi phần tử có thuộc tính `float`.

    Câu 26: Bạn có một phần tử `p` và muốn thêm khoảng trống 15 pixel xung quanh toàn bộ nội dung bên trong đường viền. Cú pháp CSS đúng là gì?

    • A. `margin: 15px;`
    • B. `padding: 15px;`
    • C. `border: 15px;`
    • D. `space: 15px;`

    Câu 27: Phần nào trong bố cục trang web thường chứa thông tin bản quyền, liên hệ hoặc các liên kết phụ?

    • A. Header
    • B. Main content
    • C. Sidebar
    • D. Footer

    Câu 28: Bạn muốn tạo một khoảng cách 20 pixel giữa phần tử `header` và phần tử `main` (nội dung chính) ngay bên dưới nó. Bạn có thể sử dụng thuộc tính nào trên phần tử `main` để đẩy nó xuống?

    • A. `margin-top: 20px;`
    • B. `padding-bottom: 20px;`
    • C. `border-top: 20px;`
    • D. `height: 20px;`

    Câu 29: Thuộc tính nào trong mô hình hộp không đóng góp vào kích thước thực tế (width/height) của phần tử khi `box-sizing` được đặt thành `content-box` mặc định?

    • A. Content
    • B. Padding
    • C. Border
    • D. Margin

    Câu 30: Giả sử bạn có CSS sau: `.a { display: block; } .b { display: inline; } .c { display: inline-block; }`. Nếu bạn đặt ba phần tử `

  • A. Chỉ phần tử có class `a`.
  • B. Chỉ phần tử có class `b`.
  • C. Chỉ phần tử có class `c`.
  • D. Cả ba phần tử sẽ nằm trên cùng một dòng.

    • 1 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 1: Theo mô hình hộp trong CSS, tổng chiều rộng thực tế của một phần tử bao gồm những thành phần nào được tính toán mặc định khi bạn thiết lập thuộc tính `width`?

    2 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 2: Bạn có một phần tử `div` với CSS sau: `width: 200px; padding: 20px; border: 5px solid black; margin: 10px;`. Nếu `box-sizing` được thiết lập mặc định là `content-box`, tổng chiều rộng hiển thị của phần tử này trên trang (bao gồm cả lề) là bao nhiêu pixel?

    3 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 3: Thuộc tính CSS nào được sử dụng để tạo khoảng trống *bên trong* đường viền (border) và *xung quanh* nội dung (content) của một phần tử?

    4 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 4: Hai phần tử `div` được đặt liền kề nhau theo chiều dọc. Cả hai đều có `margin-bottom: 20px;` và `margin-top: 30px;` tương ứng. Theo quy tắc gộp lề (margin collapse) mặc định trong CSS, khoảng cách thực tế giữa hai phần tử này sẽ là bao nhiêu pixel?

    5 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 5: Bạn muốn một phần tử `img` và một phần tử `span` hiển thị trên cùng một dòng và chỉ chiếm không gian cần thiết. Kiểu hiển thị mặc định của chúng là gì và bạn có cần thay đổi nó không?

    6 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 6: Phần tử HTML nào sau đây thường có kiểu hiển thị mặc định là `block`?

    7 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 7: Bạn sử dụng thuộc tính CSS `display: inline-block;` cho một phần tử. Điều này mang lại những đặc điểm kết hợp nào?

    8 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 8: Để căn giữa một phần tử `div` theo chiều ngang bên trong phần tử cha của nó, bạn thường sử dụng kết hợp các thuộc tính nào?

    9 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 9: Thuộc tính CSS `box-sizing: border-box;` thay đổi cách tính toán kích thước của phần tử như thế nào?

    10 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 10: Trong bố cục trang web truyền thống, phần tử HTML nào thường được sử dụng như một 'thùng chứa' chung để nhóm các phần tử khác lại và áp dụng CSS định dạng cho một khu vực lớn?

    11 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 11: Bạn có một đoạn CSS: `.box { padding: 10px 20px; }`. Điều này có nghĩa là gì?

    12 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 12: Bạn muốn tạo một bố cục trang web với một thanh điều hướng ở trên cùng, phần nội dung chính ở giữa và chân trang ở dưới cùng. Các phần tử HTML `header`, `main` (hoặc `div` cho nội dung), và `footer` thường được sử dụng với kiểu hiển thị mặc định nào để đạt được cấu trúc này?

    13 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 13: Xét đoạn CSS sau: `.element { margin: 5px 15px 10px; }`. Vùng lề (margin) của phần tử này sẽ được áp dụng như thế nào?

    14 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 14: Khi nào thuộc tính `width` và `height` không có tác dụng hoặc có tác dụng không như mong đợi trên một phần tử?

    15 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 15: Bạn muốn tạo một khoảng trống giữa nội dung và đường viền của một nút bấm. Thuộc tính nào trong mô hình hộp là phù hợp nhất để điều chỉnh khoảng trống này?

    16 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 16: Mô hình hộp (Box Model) là một khái niệm cốt lõi trong CSS giải thích điều gì?

    17 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 17: Bạn có một phần tử với CSS sau: `.item { width: 100px; height: 100px; padding: 10px; border: 2px solid red; box-sizing: border-box; }`. Chiều rộng thực tế (không tính margin) của phần tử này là bao nhiêu pixel?

    18 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 18: Trong bố cục trang web, phần nào thường chứa các liên kết điều hướng chính (navigation links) để người dùng di chuyển giữa các trang?

    19 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 19: Thuộc tính `display: none;` có tác dụng gì đối với một phần tử?

    20 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 20: Để tạo một bố cục hai cột đơn giản, bạn có thể sử dụng thuộc tính `float`. Khi một phần tử được thiết lập `float: left;`, điều gì thường xảy ra với các phần tử khối (block) theo sau nó?

    21 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 21: Thuộc tính `clear: both;` được sử dụng phổ biến nhất để làm gì trong bố cục sử dụng `float`?

    22 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 22: Giả sử bạn có một `div` cha chứa hai `div` con. Bạn muốn hai `div` con này nằm cạnh nhau trên cùng một hàng. Phương pháp nào sau đây là cách tiếp cận cơ bản sử dụng thuộc tính `display` hoặc `float`?

    23 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 23: Trong mô hình hộp, vùng nào có màu nền mặc định là trong suốt và thường được sử dụng để tạo khoảng cách *giữa* các phần tử khác?

    24 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 24: Thuộc tính CSS nào được sử dụng để thiết lập kiểu, độ rộng và màu sắc của đường viền xung quanh một phần tử?

    25 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 25: Khi sử dụng thuộc tính `margin`, giá trị `auto` có ý nghĩa đặc biệt gì khi được áp dụng cho lề trái và lề phải của một phần tử có kiểu hiển thị `block` và có `width` cố định?

    26 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 26: Bạn có một phần tử `p` và muốn thêm khoảng trống 15 pixel xung quanh toàn bộ nội dung bên trong đường viền. Cú pháp CSS đúng là gì?

    27 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 27: Phần nào trong bố cục trang web thường chứa thông tin bản quyền, liên hệ hoặc các liên kết phụ?

    28 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 28: Bạn muốn tạo một khoảng cách 20 pixel giữa phần tử `header` và phần tử `main` (nội dung chính) ngay bên dưới nó. Bạn có thể sử dụng thuộc tính nào trên phần tử `main` để đẩy nó xuống?

    29 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 29: Thuộc tính nào trong mô hình hộp *không* đóng góp vào kích thước thực tế (width/height) của phần tử khi `box-sizing` được đặt thành `content-box` mặc định?

    30 / 30

    Category: 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

    Tags: Bộ đề 3

    Câu 30: Giả sử bạn có CSS sau: `.a { display: block; } .b { display: inline; } .c { display: inline-block; }`. Nếu bạn đặt ba phần tử `

    `, ``, `

    ` liên tiếp trong HTML, phần tử nào sẽ tự động bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn theo mặc định?

    Xem kết quả

    By Wordpress Quiz plugin
    0

    Bạn đã sẵn sàng chưa? 45 phút làm bài bắt đầu!!!

    Bạn đã hết giờ làm bài! Xem kết quả các câu hỏi đã làm nhé!!!

    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

    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 - Đề 04

    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 - Đề 04 bao gồm nhiều câu hỏi hay, bám sát chương trình. Cùng làm bài tập trắc nghiệm ngay.

    Câu 1: Trong mô hình hộp CSS, vùng nào nằm ngay bên ngoài đường viền của phần tử và tạo khoảng cách giữa phần tử đó với các phần tử lân cận?

    • 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 2: Một phần tử `div` được thiết lập CSS như sau: `width: 200px; padding: 15px; border: 5px solid black;`. Nếu thuộc tính `box-sizing` mặc định là `content-box`, tổng chiều rộng thực tế mà phần tử này chiếm trên trang là bao nhiêu pixel?

    • A. 200px
    • B. 215px
    • C. 240px
    • D. 230px

    Câu 3: Để biến các mục trong một danh sách (`

  • `) từ hiển thị mặc định theo khối (xuống dòng) sang hiển thị theo dòng (nằm ngang), bạn cần áp dụng thuộc tính CSS nào cho các phần tử `
  • `?
    • A. display: block;
    • B. display: inline-block;
    • C. display: flex;
    • D. float: left;

    • Câu 4: So sánh phần tử `` và `

    ` khi không có CSS bổ sung. Sự khác biệt cơ bản về kiểu hiển thị mặc định giữa chúng là gì?

    • A. `
      ` hiển thị theo khối (block), chiếm toàn bộ chiều rộng và xuống dòng; `` hiển thị theo dòng (inline), chỉ chiếm không gian cần thiết và không xuống dòng.
    • B. `
      ` hiển thị theo dòng (inline); `` hiển thị theo khối (block).
    • C. Cả hai đều hiển thị theo khối (block).
    • D. Cả hai đều hiển thị theo dòng (inline).

    Câu 5: Bạn muốn thêm một khoảng trống 10 pixel vào bên trong một nút bấm (`

    Câu 6: Trong cấu trúc bố cục trang web sử dụng các thẻ HTML5 ngữ nghĩa, thẻ `

    Câu 7: Một phần tử có CSS: `width: 300px; padding: 20px; border: 2px solid gray; box-sizing: border-box;`. Tổng chiều rộng thực tế của phần tử này (bao gồm nội dung, padding và border) là bao nhiêu pixel?

    • A. 300px
    • B. 322px
    • C. 340px
    • D. 344px

    Câu 8: Tại sao thuộc tính `box-sizing: border-box;` thường được ưa chuộng khi xây dựng bố cục trang web phức tạp?

    • A. Nó làm cho phần tử hiển thị nhanh hơn.
    • B. Nó giúp việc tính toán kích thước phần tử trở nên dễ dàng hơn vì `width` và `height` đã bao gồm cả `padding` và `border`.
    • C. Nó tự động căn giữa phần tử.
    • D. Nó loại bỏ vùng `margin` mặc định của phần tử.

    Câu 9: Phần tử `` (hình ảnh) thường hiển thị theo kiểu `inline`. Điều này ảnh hưởng như thế nào đến việc áp dụng các thuộc tính kích thước như `width` và `height` trực tiếp cho nó trong CSS, so với một phần tử `block` như `

    `?

    • A. Không thể áp dụng `width` và `height` cho `` khi nó là `inline`.
    • B. Có thể áp dụng `width` và `height` cho `` nhưng giá trị sẽ luôn bị bỏ qua.
    • C. Có thể áp dụng `width` và `height` cho `` khi nó là `inline`, nhưng các thuộc tính `margin-top` và `margin-bottom` sẽ không có tác dụng.
    • D. Các thuộc tính `width` và `height` chỉ có tác dụng khi `` được đặt trong một `
      `.

    Câu 10: Để căn giữa một phần tử `block` (có chiều rộng cố định) theo chiều ngang trong phần tử cha của nó, thuộc tính `margin` nào thường được sử dụng?

    • A. margin: auto;
    • B. margin-align: center;
    • C. text-align: center;
    • D. align-items: center;

    Câu 11: Trong HTML5, việc sử dụng các thẻ ngữ nghĩa như `

    `, `

    `, `