Đề Trắc nghiệm Tin học 12 - Bài 16: Định dạng khung (Kết Nối Tri Thức)

Đề Trắc nghiệm Tin học 12 – Bài 16: Định dạng khung (Kết Nối Tri Thức) tổng hợp câu hỏi trắc nghiệm chứa đựng nhiều dạng bài tập, bài thi, cũng như các câu hỏi trắc nghiệm và bài kiểm tra, trong bộ Trắc Nghiệm Môn Tin Học 12 – Kết Nối Tri Thức. Nội dung trắc nghiệm nhấn mạnh phần kiến thức nền tảng và chuyên môn sâu của học phần này. Mọi bộ đề trắc nghiệm đều cung cấp câu hỏi, đáp án cùng hướng dẫn giải cặn kẽ. Mời bạn thử sức làm bài nhằm ôn luyện và làm vững chắc kiến thức cũng như đánh giá năng lực bản thân!

Đề 01

Đề 02

Đề 03

Đề 04

Đề 05

Đề 06

Đề 07

Đề 08

Đề 09

Đề 10

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é!!!

Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung - Đề 01

1 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 1: Trong CSS, thuộc tính nào sau đây được sử dụng để kiểm soát cách một phần tử HTML được hiển thị (ví dụ: là phần tử khối hay phần tử nội tuyến)?

position

visibility

display

float

2 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 2: Bạn có một đoạn văn bản được đặt trong thẻ ``. Bạn muốn đặt chiều rộng (width) và chiều cao (height) cố định cho thẻ `` này. Theo mặc định, việc áp dụng thuộc tính `width` và `height` trực tiếp cho thẻ `` sẽ không có tác dụng. Để khắc phục điều này, bạn cần thay đổi thuộc tính `display` của thẻ `` thành giá trị nào?

block

inline-block

none

flex

3 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 3: Hãy phân tích sự khác biệt cơ bản về hành vi hiển thị giữa phần tử khối (block) và phần tử nội tuyến (inline) trong luồng tài liệu chuẩn của HTML.

Phần tử khối luôn bắt đầu trên dòng mới và chiếm hết chiều rộng; phần tử nội tuyến không bắt đầu trên dòng mới và chỉ chiếm không gian vừa đủ nội dung.

Phần tử khối chỉ có thể chứa phần tử nội tuyến; phần tử nội tuyến có thể chứa phần tử khối.

Phần tử khối không thể thiết lập chiều rộng và chiều cao; phần tử nội tuyến có thể thiết lập chiều rộng và chiều cao.

Phần tử khối được định dạng bằng ID; phần tử nội tuyến được định dạng bằng Class.

4 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 4: Bạn có một thẻ `

` với nội dung bên trong. Bạn muốn tạo một khoảng trống 15px giữa nội dung của thẻ `

` và đường viền (border) của nó. Thuộc tính CSS nào bạn cần sử dụng và áp dụng giá trị 15px?

margin

border-spacing

gap

padding

5 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 5: Bạn có hai thẻ `

` nằm liền kề nhau trong HTML. Bạn muốn tạo một khoảng trống 20px giữa hai thẻ `

` này. Thuộc tính CSS nào bạn cần sử dụng để đẩy một thẻ `

` cách xa thẻ còn lại?

margin

padding

border-width

space-between

6 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 6: Xét đoạn CSS sau:
```css
.box {
border: 2px solid blue;
padding: 10px;
margin: 15px;
}
```
Nếu một thẻ `

` có class `box`, hãy mô tả các thành phần của Box Model (Mô hình hộp) áp dụng cho thẻ `

` này dựa trên CSS đã cho.

Nội dung, 10px margin, 2px border, 15px padding.

Nội dung, 15px padding, 2px border, 10px margin.

Nội dung, 10px padding, 2px border, 15px margin.

Nội dung, 2px border, 10px margin, 15px padding.

7 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 7: Bạn muốn áp dụng một kiểu định dạng (ví dụ: màu nền) cho *một* phần tử duy nhất trên trang web của bạn, chẳng hạn như tiêu đề chính. Bộ chọn CSS nào là phù hợp nhất để sử dụng trong trường hợp này?

Bộ chọn ID (#)

Bộ chọn lớp (Class - .)

Bộ chọn thẻ (Element - ví dụ: div, p)

Bộ chọn thuộc tính ([attribute])

8 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 8: Bạn có nhiều thẻ `` trên trang web, một số thẻ hiển thị ảnh sản phẩm, một số hiển thị ảnh avatar người dùng. Bạn muốn tất cả ảnh sản phẩm có cùng một kiểu đường viền và bóng đổ. Bộ chọn CSS nào là phù hợp nhất để định dạng nhóm ảnh sản phẩm này một cách hiệu quả?

Bộ chọn ID (#)

Bộ chọn lớp (Class - .)

Bộ chọn thẻ (Element - ví dụ: img)

Bộ chọn con (Child selector - >)

9 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 9: Một thẻ HTML có thể có bao nhiêu mã định danh (ID) duy nhất?

Một ID

Nhiều ID, cách nhau bằng dấu phẩy

Nhiều ID, cách nhau bằng dấu cách

Không giới hạn số lượng ID

10 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 10: Một thẻ HTML có thể thuộc về bao nhiêu lớp (class)?

Chỉ một lớp

Tối đa hai lớp

Tối đa ba lớp

Không giới hạn số lượng lớp

11 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 11: Bạn muốn tạo một đường viền màu xanh nét đứt (dashed) dày 1px cho tất cả các thẻ `

`. Cú pháp CSS chính xác để thực hiện điều này là gì?

h2 { border-color: blue; border-style: dotted; border-width: 1px; }

h2 { border: 1px dashed blue; }

h2 { border-style: dashed; color: blue; size: 1px; }

h2 { border: blue dashed 1px; }

12 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 12: Xét đoạn CSS sau:
```css
.card {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}
```
Nếu sử dụng cú pháp rút gọn cho thuộc tính `padding`, đoạn CSS trên có thể được viết lại như thế nào?

.card { padding: 10px 20px 30px 40px 10px; }

.card { padding: 10px 40px 30px 20px; }

.card { padding: 10px 20px 30px 40px; }

.card { padding: 10px 30px 20px 40px; }

13 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 13: Xét đoạn CSS sau:
```css
.container {
margin: 10px 20px;
}
```
Thuộc tính `margin` này sẽ áp dụng khoảng trống (margin) như thế nào cho phần tử có class `container`?

10px cho tất cả các cạnh.

10px cho trên và dưới, 20px cho trái và phải.

20px cho trên và dưới, 10px cho trái và phải.

10px cho trên và dưới, 20px cho trái và phải.

14 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 14: Thuộc tính CSS nào được sử dụng để làm ẩn hoàn toàn một phần tử trên trang web, đồng thời loại bỏ nó khỏi luồng tài liệu, khiến nó không chiếm bất kỳ không gian nào?

display: none;

visibility: hidden;

opacity: 0;

hidden: true;

15 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 15: Bạn đang thiết kế một trang web và muốn tạo một khung viền đặc biệt cho một phần tử `` duy nhất có `id="avatar"`. Cú pháp bộ chọn CSS chính xác để chỉ định kiểu cho phần tử này là gì?

.avatar { ... }

img.avatar { ... }

#avatar { ... }

img#avatar { ... } (Cũng đúng, nhưng #avatar là đủ)

16 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 16: Bạn có nhiều phần tử `

` trên trang web, một số dùng để chứa nội dung chính (`class="content"`), một số dùng cho thanh bên (`class="sidebar"`). Bạn muốn tất cả các thẻ `div` dùng cho nội dung chính có cùng màu nền xám nhạt. Cú pháp bộ chọn CSS nào là phù hợp nhất?

.content { ... }

#content { ... }

div#content { ... }

div .content { ... }

17 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 17: Hãy phân tích tình huống sau: Bạn áp dụng thuộc tính `width: 200px;` và `height: 100px;` cho một thẻ `` (một phần tử nội tuyến theo mặc định). Tuy nhiên, khi xem trên trình duyệt, kích thước của thẻ `` không thay đổi theo các giá trị bạn đã đặt. Nguyên nhân chính là gì?

Thẻ `<a>` không hỗ trợ thuộc tính `width` và `height`.

Kích thước của thẻ `<a>` luôn được xác định bởi nội dung của nó.

Bạn cần thêm thuộc tính `display: block;` cho thẻ `<a>` để `width` và `height` có tác dụng.

Phần tử nội tuyến (như `<a>` mặc định) bỏ qua các thuộc tính `width` và `height`.

18 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 18: Bạn muốn tạo một khoảng trống 10px ở phía trên và dưới, và 20px ở phía trái và phải cho một phần tử. Cú pháp rút gọn nào cho thuộc tính `padding` sẽ đạt được hiệu quả này?

padding: 10px 20px 10px 20px;

padding: 10px 20px;

padding: 20px 10px;

padding: 10px; margin: 20px;

19 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 19: Bạn muốn tạo một khoảng trống 5px ở phía trên, 10px ở phía phải, 15px ở phía dưới, và 20px ở phía trái cho một phần tử. Cú pháp rút gọn nào cho thuộc tính `margin` sẽ đạt được hiệu quả này?

margin: 5px 10px 15px;

margin: 5px 20px 15px 10px;

margin: 5px 10px 15px 20px;

margin: 5px; margin-right: 10px; margin-bottom: 15px; margin-left: 20px;

20 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 20: Trong Box Model, thành phần nào nằm *giữa* đường viền (border) và khoảng trống bên ngoài (margin)?

21 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 21: Thuộc tính `border-style` trong CSS được sử dụng để làm gì?

Đặt màu cho đường viền.

Đặt độ dày cho đường viền.

Đặt khoảng cách giữa nội dung và đường viền.

Đặt kiểu hiển thị cho đường viền (nét liền, nét đứt, v.v.).

22 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 22: Bạn có một thẻ `div` và áp dụng CSS sau:
```css
div {
border: 5px solid black;
padding: 20px;
width: 100px; /* Chiều rộng nội dung */
}
```
Nếu sử dụng Box Model chuẩn (content-box), tổng chiều rộng thực tế mà thẻ `div` này chiếm trên trang là bao nhiêu?

23 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 23: Bạn muốn tạo một khoảng cách đều 10px xung quanh tất cả các cạnh bên trong của một phần tử. Cú pháp nào sau đây là cách ngắn gọn nhất để viết CSS cho thuộc tính `padding`?

padding: 10px;

padding: 10px 10px 10px 10px;

padding: 10;

padding-all: 10px;

24 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 24: Bạn muốn tạo một khoảng cách đều 10px xung quanh tất cả các cạnh bên ngoài của một phần tử. Cú pháp nào sau đây là cách ngắn gọn nhất để viết CSS cho thuộc tính `margin`?

margin-all: 10px;

margin: 10px 10px 10px 10px;

margin: 10;

margin: 10px;

25 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 25: Trong HTML, thẻ `

` được sử dụng để tạo bảng. Các hàng trong bảng được tạo bằng thẻ nào?

<td>

<th>

<tr>

` (table row) được sử dụng để định nghĩa một hàng trong bảng HTML.

26 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 26: Trong bảng HTML, thẻ `

` được sử dụng để tạo các ô dữ liệu thông thường. Thẻ nào được sử dụng để tạo các ô tiêu đề (thường được căn giữa và in đậm theo mặc định)?

<td>

<th>

<tr>

` (table header) được sử dụng để định nghĩa một ô tiêu đề trong bảng, thường là ô đầu tiên của một cột hoặc hàng.

27 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 27: Bạn muốn căn giữa một phần tử khối (ví dụ: một thẻ `div` có chiều rộng cố định) theo chiều ngang trong phần tử chứa nó. Thuộc tính `margin` nào sau đây giúp thực hiện điều này?

margin-left: auto; margin-right: auto;

margin: center;

align: center;

margin: 0 auto;

28 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 28: Giả sử bạn có một phần tử với CSS `border-width: 2px 4px 6px 8px;`. Độ dày đường viền ở phía dưới (bottom) của phần tử này là bao nhiêu?

29 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 29: Thuộc tính CSS nào sau đây được sử dụng để đặt màu cho đường viền của một phần tử?

30 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 01

Câu 30: Bạn có một thẻ `p` và muốn nó hiển thị như một phần tử khối, nhưng vẫn nằm trên cùng một dòng với các phần tử khác nếu có đủ không gian. Bạn nên sử dụng thuộc tính `display` với giá trị nào?

Xem kết quả

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é!!!

Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung - Đề 04

1 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 04

Câu 1: Trong mô hình hộp (Box Model) của CSS, thành phần nào tạo ra khoảng trống bên trong đường viền (border) của một phần tử và giữa đường viền với nội dung?

2 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 04

Câu 2: Bạn muốn thiết lập một kiểu định dạng chung (ví dụ: màu nền, font chữ) cho nhiều đoạn văn bản và một số hình ảnh trên trang web của mình, nhưng không phải áp dụng cho tất cả các đoạn văn bản hoặc hình ảnh. Bộ chọn CSS nào phù hợp nhất để sử dụng trong trường hợp này?

Bộ chọn ID (#idname)

Bộ chọn lớp (Class Selector - .classname)

Bộ chọn phần tử (Element Selector - tagname)

Bộ chọn thuộc tính ([attribute=value])

3 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 04

Câu 3: Cho đoạn mã HTML sau:

Đây là một đoạn văn bản.

Đây là đoạn văn bản được định dạng inline.

Khi hiển thị trên trình duyệt, hai đoạn văn bản này sẽ xuất hiện như thế nào?

Cả hai đoạn văn bản sẽ nằm trên cùng một dòng.

Đoạn văn bản thứ nhất sẽ nằm trên một dòng, đoạn thứ hai sẽ bắt đầu trên dòng mới và kéo dài hết chiều rộng.

Đoạn văn bản thứ nhất sẽ nằm trên một dòng, đoạn thứ hai sẽ bắt đầu trên dòng mới và chỉ chiếm không gian vừa đủ nội dung.

Đoạn văn bản thứ nhất sẽ nằm trên một dòng riêng, đoạn văn bản thứ hai sẽ nằm trên dòng tiếp theo và chỉ chiếm không gian vừa đủ nội dung.

4 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 04

Câu 4: Thuộc tính CSS nào khi áp dụng cho một phần tử sẽ khiến nó hoàn toàn không hiển thị trên trang web và cũng không chiếm bất kỳ không gian nào trong bố cục?

5 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 04

Câu 5: Bạn đang thiết kế một thanh điều hướng (navigation bar) và muốn các mục (list items - `

`) nằm cạnh nhau trên cùng một dòng thay vì mỗi mục một dòng như mặc định của thẻ `

`. Bạn nên sử dụng thuộc tính `display` với giá trị nào cho các thẻ `

display: block;

display: flex;

display: grid;

display: inline-block;

6 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 04

Câu 6: Thành phần nào trong mô hình hộp (Box Model) tạo ra khoảng trống bên ngoài đường viền (border) của một phần tử, ngăn cách nó với các phần tử lân cận?

7 / 30

Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung

Tags: Bộ đề 04

Câu 7: Đặc điểm nào sau đây là đúng đối với phần tử khối (block-level element) mặc định trong HTML?

Không thể thiết lập chiều rộng và chiều cao.

Nằm cạnh các phần tử khác trên cùng một dòng nếu có đủ không gian.

Luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng khả dụng.

Chỉ chiếm không gian vừa đủ cho nội dung bên trong.