Sử dụng box model.

Dùng border, background, padding, margin để định dạng kết quả như hình dưới đây:

Sử dụng box model

Lần lượt tiến hành theo các bước hướng dẫn sau đây:

Bước 1: Tạo tài liệu mới html gồm đầy đủ các phần head, body. Trong body có sử dụng các thẻ div, p như sau:

Kết quả hiển thị:

 

Bước 2: Nhúng CSS định dạng hiển thị của thẻ div

Tạo class có tên boxmodel cho thẻ div:

Và định nghĩa bộ chọn .boxmodel ở thẻ <style>:

Trong đó:

  • Thuộc tính width để quy định kích thước chiều rộng của div, giá trị là 800px
  • Thuộc tính border để quy định viền của div, có độ dày 10px
  • Thuộc tính border-color để quy định màu của viền (tuân thủ quy tắc chiều kim đồng hồ + quy tắc đối xứng)
  • Thuộc tính border-style để quy định kiểu của viền, nét liền solid
  • Thuộc tính padding để quy định khoảng cách từ nội dung đến viền 10px
  • Thuộc tính margin nhận giá trị “0 auto” để căn div ra giữa cửa sổ hiển thị

Lưu ý: Lần lượt thêm các thuộc tính trên và chạy thử trên trình duyệt để xem sự thay đổi và hiểu ý nghĩa các thuộc tính

Kết quả hiển thị:

Bước 3: Viết bộ chọn html quy định hiển thị cho các thẻ p

Kết quả hiển thị:

Sử dụng box model

Bước 4: Lần lượt viết các bộ chọn id cho các thẻ p để quy định hiển thị

Trong html:

Định nghĩa các bộ chọn id trong CSS:

Trong đó:

  • Thuộc tính margin-bottom để quy định khoảng cách lề dưới của các div, lần lượt là 20px, 40px, 60px

Kết quả hiển thị cuối cùng:

Trên đây CodeGym đã cùng với bạn thực hành sử dụng box model. Hãy chụp ảnh màn hình và nộp bài thực hành của bạn trên CodeGymX để cùng nhau luyện tập nhé!


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.