[Học CSS] Bài 14: Tìm hiểu về Box Model trong CSS

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

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

4.5/5 - (2 votes)




Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Ưu đãi Hosting, VPS lên đến 80% và tặng bộ theme, plugin bản quyền hơn 1.600$XEM CHI TIẾT
+