Bài 16. CSS: kích thước khung, đường viền và khoảng cách
Bạn đã biết mỗi phần tử trên trang web là một chiếc khung có nội dung, đệm, viền và lề. Bài học này đi vào những con số cụ thể: đặt bề rộng bằng width, vẽ viền bằng border, bo tròn góc bằng border-radius, viết gọn padding và margin, và hiểu vì sao một khung khai báo 300 px lại chiếm chỗ rộng hơn 300 px trên trang.
- Chân trời sáng tạoTin học 12 (Khoa học máy tính) - Bài F12. Định kiểu CSS cho biểu mẫutr. 137
- Chân trời sáng tạoTin học 12 (Tin học ứng dụng) - Bài F12. Định kiểu CSS cho biểu mẫutr. 170
- Kết nối tri thứcTin học 12 (Khoa học máy tính) - Bài 16. Định dạng khungtr. 89–95
- Kết nối tri thứcTin học 12 (Tin học ứng dụng) - Bài 16. Định dạng khungtr. 89
Bắt đầu bằng một hình dung
Cuối năm học, lớp 12A5 làm một bảng tin mang tên ‘Góc kỉ niệm’ treo ở cuối lớp. Mỗi bạn được phát một tấm bìa nhỏ để viết lời nhắn, trang trí rồi dán lên bảng. Nghe thì đơn giản, nhưng khi bắt tay vào làm mới lộ ra đủ chuyện rắc rối.
Nam cắt tấm bìa của mình đúng 10 xăng-ti-mét mỗi cạnh, theo đúng kích thước cả nhóm đã thống nhất. Nhưng rồi bạn ấy dán thêm một nẹp giấy màu chạy quanh mép cho đẹp, lại chừa một khoảng trắng khá rộng bên trong để chữ không bị sát mép. Lúc mang lên bảng, tấm bìa ấy chiếm chỗ rộng hơn 10 xăng-ti-mét kha khá. Kế hoạch xếp sáu tấm một hàng thế là đổ bể: đến tấm thứ sáu thì thò hẳn ra khỏi bảng.
Lan làm theo cách khác. Bạn ấy đo chiều ngang tấm bảng trước, chia thành sáu phần bằng nhau, rồi cắt bìa của mình đúng bằng một phần sáu đó. Sang năm nhà trường có đổi sang bảng to hơn hay nhỏ hơn thì cách chia ấy vẫn đúng, chỉ cần đo lại rồi chia lại là xong.
Còn Minh thì gặp rắc rối kiểu khác: bạn ấy viết quá nhiều chữ, viết đến gần hết tấm bìa vẫn chưa hết ý, chữ cuối cùng lấn cả ra ngoài mép giấy trông rất lôi thôi. Ba tình huống nho nhỏ ấy - khung to hơn dự tính, khung đo theo tỉ lệ, và nội dung tràn ra ngoài khung - chính là ba câu chuyện chúng ta sẽ gặp lại trong bài học hôm nay, chỉ khác là trên màn hình thay vì trên tấm bảng gỗ.
Nội dung bài học
- 1) Kích thước khung: width, height và chuyện chọn đơn vị
- 2) Đường viền và bo tròn góc khung
- 3) Viết gọn padding, margin và canh giữa khối bằng margin: auto
- 4) box-sizing: vì sao khung phình to hơn con số bạn đặt
- 5) Nội dung tràn khung và bóng đổ nhẹ cho khung
Tóm tắt lý thuyết cần nhớ
widthvàheightđặt kích thước khung; nên ưu tiên đơn vị tương đối (%,em) thay vìpxđể trang co giãn vừa vặn trên mọi cỡ màn hình.- Đường viền gồm
border-width,border-stylevàborder-color, viết gộp thànhborder: 1px solid #333;; thiếuborder-stylethì viền không hiện, cònborder-radiusbo tròn góc và đủ lớn (50%) sẽ biến khung vuông thành hình tròn. paddingvàmarginviết gọn với 1 giá trị (cả bốn phía), 2 giá trị (trên-dưới rồi trái-phải) hoặc 4 giá trị theo thứ tự trên - phải - dưới - trái;margin: 0 autocanh giữa một khối theo chiều ngang.- Mặc định
widthchỉ tính vùng nội dung nên đệm và viền làm khung phình to; đặtbox-sizing: border-boxđểwidthtính cả đệm và viền, đồng thời dùngoverflow(hidden,auto,scroll) để xử lí nội dung tràn khung.
Thuật ngữ tiếng Anh trong bài
| Tiếng Anh | Đọc là | Nghĩa |
|---|---|---|
| display | đis-plây | cách hiển thị Thuộc tính CSS để chọn cách một khối hiện ra trên trang. |
| width | uít | chiều rộng Thuộc tính CSS để đặt chiều rộng cho một khối. |
| height | hai | chiều cao Thuộc tính CSS để đặt chiều cao cho một khối. |
| div | đíp | thẻ chia khối Giống một cái hộp trong suốt để gom các thứ trên trang web lại thành một nhóm, cho dễ sắp xếp. |
Câu hỏi trắc nghiệm có đáp án
Mấy câu mẫu để bạn tự kiểm tra ngay. Trong ứng dụng, bài này có đủ 24 câu, chấm điểm tự động và giải thích từng câu sai.
- width: 80%;
- width: 80px;
- width: 80em;
- height: 80%;
width: 80%; vì % là đơn vị tương đối, tính theo bề rộng của phần tử cha, nên khung tự co giãn theo màn hình. width: 80px; sai vì px là đơn vị tuyệt đối - khung luôn rộng đúng 80 điểm ảnh, không liên quan gì đến kích thước màn hình. width: 80em; sai vì em tính theo cỡ chữ hiện hành chứ không theo bề rộng phần tử cha, và 80em là một con số rất lớn. height: 80%; sai vì đó là chiều cao, không phải bề rộng.border-radius: 50%; cho một khung vuông kích thước 80 px × 80 px thì kết quả hiển thị sẽ là gì?- Khung vẫn vuông nhưng thu nhỏ lại còn một nửa, tức 40 px × 40 px.
- Khung biến thành một hình tròn.
- Khung chỉ được bo tròn hai góc phía trên, hai góc dưới vẫn vuông.
- Khung không thay đổi gì vì
border-radiuschỉ nhận giá trị theopx.
border-radius bo tròn cả bốn góc, giá trị càng lớn góc càng tròn, và với khung vuông thì 50% là mức đủ để bốn góc gặp nhau tạo thành đường tròn hoàn chỉnh. Phương án thu nhỏ còn 40 px sai vì border-radius chỉ bo góc chứ không hề đổi kích thước khung. Phương án bo hai góc trên sai vì khi viết một giá trị duy nhất thì cả bốn góc đều được bo như nhau. Phương án cuối sai vì border-radius nhận được cả px lẫn %.padding: 8px 20px; cho một nút bấm có ý nghĩa gì?- Đệm trên 8 px, đệm phải 20 px, còn đệm dưới và đệm trái bằng 0.
- Đệm trên và đệm dưới đều 8 px, đệm trái và đệm phải đều 20 px.
- Đệm trên 8 px, ba phía còn lại đều 20 px.
- Đệm trái 8 px, đệm phải 20 px, còn đệm trên và đệm dưới bằng 0.
- a)Nếu chỉ khai báo
border-width: 2px;vàborder-color: #333;mà không khai báoborder-stylethì đường viền vẫn không hiện ra trên trang.Đúng - b)Khai báo
margin: 12px 8px;đặt lề trên 12 px, lề phải 8 px, còn lề dưới và lề trái bằng 0.Sai - c)Khi đặt
box-sizing: border-box;, giá trị củawidthđược hiểu là đã bao gồm cả phần đệm và đường viền.Đúng - d)Giá trị
overflow: scrollchỉ hiện thanh cuộn khi nội dung dài hơn khung, cònoverflow: autothì luôn hiện sẵn thanh cuộn.Sai
- (a) Đúng -
border-stylemặc định lànone, nên thiếu nó thì dù đã có độ dày và màu, trình duyệt vẫn không vẽ đường viền nào; đây là lỗi rất hay gặp khi mới học. - (b) Sai - cách viết gọn hai giá trị nghĩa là giá trị đầu áp cho cặp trên - dưới (12 px) và giá trị sau áp cho cặp trái - phải (8 px), không có phía nào bằng 0.
- (c) Đúng - đó chính là điểm khác biệt của
border-box:widthtính cho cả chiếc khung nên phần nội dung tự co lại, giúp kiểm soát kích thước dễ dàng hơn. - (d) Sai - hai giá trị bị mô tả ngược:
automới là giá trị chỉ hiện thanh cuộn khi thật sự cần, cònscrollluôn chừa sẵn thanh cuộn kể cả khi nội dung ngắn.
Thử ngay: minh hoạ từng bước
Bấm từng bước để tự xem cơ chế hoạt động, hoặc bấm “Tự chạy” cho nó tiến mỗi giây một lần. Đổi được dữ liệu đầu vào - không cần đăng nhập.
Học trọn bài này trong ứng dụng
Bài giảng đầy đủ, 24 câu luyện tập chấm tự động, thi thử đúng cấu trúc đề tốt nghiệp (24 trắc nghiệm + 4 Đúng/Sai), bài thực hành máy tự chấm và gia sư AI giải thích chỗ sai.
Phần học miễn phí, không cần tạo tài khoản.
Bài liên quan - Ứng dụng tin học & Thiết kế web
Cùng mạch kiến thức với bài này, học nối tiếp cho chắc phần lí thuyết.