Bài 18. CSS: bố cục trang cơ bản
Bài học này giới thiệu hai kiểu cư xử cơ bản của một phần tử HTML - khối và nội tuyến - cùng thuộc tính display, từ đó chỉ ra cách xếp nhiều khối cạnh nhau bằng display: flex và cách chia một trang web thành các vùng lớn bằng những thẻ <div> đơn giản.
- Cánh DiềuTin học 12 (Khoa học máy tính) - Chủ đề F · Bài 11. Mô hình hộp, bố cục trang webtr. 83
- Cánh DiềuTin học 12 (Tin học ứng dụng) - Chủ đề F · Bài 11. Mô hình hộp, bố cục trang webtr. 83
- Chân trời sáng tạoTin học 12 (Khoa học máy tính) - Bài F11. Định kiểu CSS cho bảng và phần tử <div>tr. 129
- Chân trời sáng tạoTin học 12 (Tin học ứng dụng) - Bài F11. Định kiểu CSS cho bảng và phần tử <div>tr. 162
Bắt đầu bằng một hình dung
Hãy tưởng tượng bạn vừa dọn vào một căn phòng còn trống và cần sắp xếp đồ đạc: một chiếc giường, một kệ sách, một bàn làm việc cùng chiếc ghế. Có những món bạn để chiếm trọn một bức tường - chiếc giường kê sát tường, chẳng có gì đứng chung hàng với nó, cả khoảng tường đó coi như dành riêng cho nó. Nhưng có những món nhỏ hơn, bạn lại muốn đặt cạnh nhau thành một hàng ngang - chẳng hạn bàn làm việc và chiếc ghế kê sát nhau để tiện với tay, hoặc vài chiếc ghế xếp thành một dãy dọc theo bức tường đối diện.
Một trang web cũng được dựng lên theo cách tương tự. Có phần tử luôn tự chiếm trọn cả một dòng, có phần tử chỉ nằm gọn trong dòng chữ, và nhiều lúc ta muốn vài khối đứng cạnh nhau thành một hàng thay vì xếp chồng lên nhau từ trên xuống dưới. Bài này sẽ chỉ ra cách trình duyệt tự quyết định cách cư xử đó, và cách bạn chủ động sắp đặt các khối trên trang theo đúng ý mình.
Nội dung bài học
- Phần tử khối (block) và phần tử nội tuyến (inline)
- Thuộc tính
display - Xếp các khối cạnh nhau bằng
display: flex - Chia trang thành các vùng bằng
<div>
Tóm tắt lý thuyết cần nhớ
- Phần tử khối (
block) chiếm trọn cả dòng và luôn đẩy phần tử phía sau xuống dòng mới (<div>,<p>,<h1>,…); phần tử nội tuyến (inline) chỉ chiếm đúng phần nội dung và nằm lọt trong dòng chữ (<a>,<span>,…). - Thuộc tính
displayquyết định kiểu hiển thị của một phần tử và có thể thay đổi bằng CSS, với các giá trị thường gặp:block,inline,flex,none. - Đặt
display: flexcho phần tử cha khiến các phần tử con trực tiếp tự động xếp thành một hàng ngang;justify-contentcăn vị trí cả hàng, còngaptạo khoảng cách đều giữa các khối. - Có thể chia một trang web thành các vùng (đầu trang, nội dung, chân trang) bằng nhiều
<div>riêng biệt, mỗi vùng tự định dạng độc lập.
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. |
| 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. |
| block | blóc | phần tử khối Là phần tử chiếm trọn cả một dòng và đẩy phần tử phía sau xuống dòng mới, như <div>, <p>, <h1>. |
| inline | IN-lain | phần tử nội tuyến Là phần tử chỉ chiếm đúng bề rộng nội dung của nó nên nhiều phần tử nằm chung một dòng được, như <a>, <span>, <strong>. |
| flex (flexbox) | phlếch | hộp linh hoạt Đặt display: flex cho phần tử cha thì các phần tử con trực tiếp tự xếp thành một hàng ngang. |
| justify-content | JÂX-ti-phai CON-ten | căn vị trí cả hàng Là thuộc tính quyết định các phần tử con trong hộp flex dồn về đâu theo chiều ngang: sát trái, vào giữa, sát phải hay dàn đều khoảng cách. |
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ó đủ 23 câu, chấm điểm tự động và giải thích từng câu sai.
<div><p><span><h1>
<span> mặc định là phần tử nội tuyến, chỉ chiếm đúng phần nội dung bên trong nó. <div>, <p> và <h1> đều mặc định là phần tử khối, luôn chiếm trọn cả dòng.- Luôn chiếm trọn cả chiều ngang có thể có và đẩy phần tử phía sau xuống dòng mới
- Chỉ chiếm đúng phần nội dung bên trong nó và không tự đẩy phần tử sau xuống dòng
- Luôn ẩn khỏi trang cho đến khi được người dùng nhấp vào thì mới hiện nội dung ra
- Không thể chứa bất kỳ phần tử nào khác bên trong, kể cả một đoạn văn bản ngắn
display: flex, phát biểu nào sau đây là đúng?- Chỉ phần tử con đầu tiên bị ảnh hưởng, các con còn lại giữ nguyên vị trí cũ
- Mọi phần tử con trực tiếp bên trong tự động xếp thành một hàng ngang, cạnh nhau
- Phần tử cha sẽ bị ẩn khỏi trang cho đến khi được nhấp vào
- Từng phần tử con phải tự khai báo thêm
display: blockthì mới hiển thị được
display: flex khai báo trên phần tử cha khiến mọi phần tử con trực tiếp bên trong tự động xếp thành một hàng ngang, cạnh nhau, mà không cần khai báo gì thêm cho từng con. Ba phương án còn lại đều mô tả sai tác dụng của display: flex.- a)Thẻ
<a>mặc định là phần tử nội tuyến (inline).Đúng - b)
display: flexkhai báo trên phần tử cha sẽ tự động ảnh hưởng đến mọi phần tử cháu ở bên trong, kể cả những phần tử nằm sâu bên trong các thẻ con.Sai - c)Có thể chia một trang web thành các vùng như đầu trang, nội dung, chân trang bằng nhiều thẻ
<div>riêng biệt.Đúng - d)Thuộc tính
justify-contentdùng để thay đổi màu nền của các khối con.Sai
- (a) Đúng -
<a>mặc định là phần tử nội tuyến, nằm lọt trong dòng chữ xung quanh. - (b) Sai -
display: flexchỉ sắp xếp các phần tử con trực tiếp bên trong phần tử cha; các phần tử cháu ở cấp sâu hơn không tự động bị ảnh hưởng. - (c) Đúng - chia trang thành nhiều vùng bằng các
<div>riêng biệt là cách bố cục cơ bản và rất phổ biến. - (d) Sai -
justify-contentdùng để căn vị trí các khối con trên hàng ngang của flex, không liên quan đến màu nền; màu nền được đặt bằng thuộc tính khác nhưbackground-color.
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 đủ, 23 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.