Bài 14: Tìm Hiểu Về Box Model Trong CSS

Có thể bạn quan tâm

Home » Web Development » Học CSS Cơ Bản

Trong bài này chúng ta sẽ cùng tìm hiểu xem Box Model nó là cái gì và làm việc với Box Model trong CSS như thế nào nhé !

Box Model là gì ?

Một trang HTML sẽ bao gồm rất rất nhiều phần tử, mỗi phần tử đó được xem như các khối (box). Và các box này được xác định bởi các thuộc tính: margins, borders, padding, content (nội dung).

Như vậy thuật ngữ Box Model là thuật ngữ chỉ cái phần tử box (khối) và các thuộc tính đi kèm của nó.

Hình dung về CSS Box Model

Làm việc với Box Model

Làm việc với Box Model là chúng ta sẻ đi thiết lập giá trị cho các thuộc tính như padding, margin, border và nội dung bên trong box.

Để tạo một Box Model thì chúng ta có thể sử dụng một số cặp thẻ như <p>, <div> hoặc class,….Các bạn tham khảo ví dụ về việc tạo một Box Model bằng thẻ div như sau:

<html> <head> <style> div { background: yellow; width: 400px; border: 25px solid green; padding: 25px; margin: 25px; } </style> </head> <body> <div>Đây là nội dung văn bản, đây là nội dung văn bản, đây là nội dung văn bản, đây là nội dung văn bản, đây là nội dung văn bản, đây là nội dung văn bản, đây là nội dung văn bản, đây là nội dung văn bản, đây là nội dung văn bản, đây là nội dung văn bản, đây là nội dung văn bản, đây là nội dung văn bản, đây là nội dung văn bản, đây là nội dung văn bản </div> </body> </html>

Đó, chỉ vậy thôi. Bài này nói chung là để chúng ta hình dung về khái niệm Box Model là chính, còn ví dụ về cái này chúng ta cũng đã thực hiện khá nhiều ở các bài trước rồi.

Bài học trước đó và tiếp theo

Bài 13: Chiều cao và chiều trộng – width & height trong CSS
Bài 15: Chia cột trong CSS với float và clear float

4.5/5 - (2 votes)

Share Tweet Telegram

About The Author

Tịnh Nguyễn

Mình thích tìm hiểu về WordPress, HTML & CSS. Là tác giả của nhiều bài viết trên blog này và các video trên Kênh YouTube Hocban.vn | Bạn thể xem thêm thông tin tại mục LIÊN HỆ và hồi nào có mua hàng gì nhớ ghé Linkmua để ủng hộ mình với nhen 😀