Bài 16. Định dạng khung – Tin học 12 · Kết nối tri thức · Chung, Khoa học máy tính và Tin học ứng dụng Kết nối tri thức

Mục tiêu bài học

Giải thích và vận dụng nội dung định dạng khung qua dữ kiện cụ thể.
Tạo hoặc đánh giá sản phẩm, nêu điều kiện đúng và kiểm tra kết quả bằng bằng chứng.

Bài giảng

Hiểu cách hoạt động

Mô hình hộp từ trong ra là nội dung, padding, border và margin. Với box-sizing: content-box mặc định, width đặt chiều rộng nội dung, không gồm padding/viền; border-box làm width bao cả nội dung, padding và viền nhưng không gồm margin. Phân biệt phần tử dạng khối thường chiếm một hàng với dạng nội tuyến nằm trong dòng; display có thể đổi cách tạo hộp nhưng không tự đổi ý nghĩa nội dung. Border đặt độ dày/kiểu/màu, padding cách nội dung với viền, margin cách hộp với phần xung quanh. Chiều cao/chiều rộng đặt cứng cần cân nhắc chữ dài và màn hình nhỏ; margin đứng có thể gộp trong một số bố cục, nên phép tính bài chỉ cho phương ngang nêu rõ.

Làm và tự kiểm tra

Mã mẫu tự biên soạn; lưu UTF-8 theo tên tệp trong nhiệm vụ.

<style>
.khung { width: 200px; padding: 10px; border: 2px solid navy; margin: 5px; }
.nhan { display: inline; padding: 2px; }
</style>
<div class="khung"><p>Chiều rộng nội dung 200px.</p><span class="nhan">Ngày 1</span></div>

Kết quả suy ra từ cấu trúc mã: content-box: hộp gồm nội dung rộng 200, padding hai bên 20, viền hai bên 4 nên bề ngang border box 224 px; tính cả hai margin 10 thì phần ngang dự kiến 234 px, giả thiết không có ràng buộc bố cục khác. Không coi mô tả này là ảnh chụp hay kết quả đã thao tác trên máy người học.

Ghi nhớ

Mô hình hộp từ trong ra là nội dung, padding, border và margin.

Bài tập

Đã đúng 0/6 câu

Câu 1Mức 2Trắc nghiệm 1 đáp án
Thứ tự từ nội dung ra ngoài là gì?
Câu 2Mức 2Trả lời ngắn
content-box width 100 px, padding trái/phải 8 px, border trái/phải 1 px. Bề ngang border box bao nhiêu pixel?
Câu 3Mức 2Đúng / Sai
margin là phần khoảng cách nằm giữa nội dung và viền.
Câu 4Mức 2Ghép nối
Ghép khai báo với tác dụng.
Chạm một ý bên trái rồi chạm ý tương ứng bên phải để ghép cặp.
Câu 5Mức 2Trả lời ngắn
border-box width 200 px, padding mỗi bên 10 px, border mỗi bên 2 px. Nội dung rộng bao nhiêu pixel?
Câu 6Mức 2Trắc nghiệm 1 đáp án
span có vai trò thông thường nào trước khi CSS đổi display?
Câu 7Mức 3Tự luận
Tạo khung như mẫu width 200 px, padding10 px, border2 px, margin5 px theo content-box; viết mã và tính bề ngang border box/cả margin.
0 từ
0/10 ảnh
Có thể chụp nhiều trang. Ảnh được lưu cùng bài làm và giáo viên sẽ chấm trên ảnh.
Vẽ bài làm
Ảnh bài làm
Cuộn chuột hoặc chụm hai ngón để phóng to · kéo để di chuyển · phím R để xoay
Câu 8Mức 3Tự luận
Khung phải vừa chiều ngang 300 px đã gồm padding20 px và border2 px mỗi bên, không tính margin. Đề xuất hai cách CSS hợp lệ và tính content width.
0 từ
0/10 ảnh
Có thể chụp nhiều trang. Ảnh được lưu cùng bài làm và giáo viên sẽ chấm trên ảnh.
Vẽ bài làm
Ảnh bài làm
Cuộn chuột hoặc chụm hai ngón để phóng to · kéo để di chuyển · phím R để xoay