CSS 15 – Mô hình hộp (Box Model) trong CSS

0
163

Xin chào các bạn, hôm nay chúng ta sẽ cùng đi tìm hiểu về Mô hình hộp Box Model trong CSS. Và vì các bạn đã học rất kỹ ở 3 bài trước các thuộc tính Border, Margin và Padding, nên chắc chắn, phần Box Model này sẽ rất dễ với các bạn, bởi nó được xây dựng dựa trên 3 thuộc tính đã học đó.

Mô hình hộp (Box Model)

Một phần tử HTML được gọi là 1 Box.

Mô hình hộp Box Model là 1 phần tử HTML bao gồm các thành phần: margin (canh lề), border (đường viền), padding (phần đệm) và content (nội dung của phần tử).

Mô hình hộp Box Model cho phép chúng ta thêm bo viền xung quanh phần tử, và xác định khoảng cách giữa các phần tử.

Dưới đây là hình ảnh minh họa của mô hình Box Model:

Kết quả hình ảnh cho box model

Trong đó:

  • Margin – là phần nằm bên ngoài của border. Margin trong suốt.
  • Border – là đường viền bao xung quanh của padding và content.
  • Padding – là phần bao xung quanh content (nội dung của phần tử), nằm giữa border và content.
  • Content – là nội dung thực tế của phần tử

Ví dụ:

Kích thước của 1 phần tử HTML

Để thiết lập chính xác width và height của một phần tử hiển thị đúng trên tất cả trình duyệt, trước hết bạn cần hiểu rõ về mô hình hộp (Box model).

Khi bạn thiết lập thuộc tính width và height của các phần tử bằng CSS, bạn cần thiết lập width và height của phần nội dung (Content). Để tính toàn kích thước đầy đủ của phần tử, bạn cần phải tính thêm cả padding, border và margin.

Dưới đây là công thức tính tổng Width (Height) của một phần tử HTML:

  • Tổng width = width + left margin + right margin + left border + right border + left padding + right padding;
  • Tổng height = height + top margin + bottom margin + top border + bottom border + top padding + bottom padding;

Ví dụ:

Chú ý: Tại sao việc xác định chính xác tổng width (height) lại quan trọng?

Bạn muốn tạo một cái hộp có chiều rộng là 300px với độ dày đường viền là 50px. Nhưng khi xác định width thì bạn cho 300px, vậy tức là sai rồi. Ở đây đường viền 50px, vậy 2 bên trái phải sẽ chiếm 100px đường viền, vậy content bây giờ chỉ có width là 200px đúng không nào. Các bạn nên lưu ý vấn đề này nhé.

Kết luận

Như vậy, chúng ta đã có cái nhìn cụ thể về Mô hình hộp Box Model và 1 số lưu ý trong quá trình thiết lập nó cho phần design layout. Rất quan trong đấy nhé.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây