Mô hình hộp – The box model
Mô hình hộp được mô tả như một chiếc hộp được tạo ra bởi CSS trên các phần tử HTML. Chiếc hộp này chứa những tham số liên quan đến lề – margin , đường biên – border, vùng đệm – padding và nội dung cho mỗi phần tử. Các hình minh họa bên dưới sẽ giúp bạn hình dung dễ dàng hơn
The box model – mô hình hộp trong CSS
Ảnh minh họa trên cho ta hình dung một cách lý thuyết về mô hình hộp, chúng ta cùng thực hành thêm để hiểu rõ về nó qua đoạn văn bản bên dưới:
<h1>Article 1:</h1> <p>All human beings are born free and equal in dignity and rights.They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood</p>
Giả sử bạn muốn định dạng đoạn văn bản trên như hình sau:
Mẫu trên có hai phần tử: <h1> and <p>. Mô hình hộp có hai phần tử sẽ được minh họa như sau:
Mặc dù hình minh họa có thể nhìn hơi phức tạp, nhưng nó cho ta hình dung được 2 phần tử được bao quanh bởi những chiếc hộp lồng vào nhau, và những chiếc hộp này có thể được kiểm soát bởi CSS.
Các đặc tính của hộp được quy định bằng các thuộc tính: padding, margin and border. để hiểu rõ các thuộc tính này, chúng ta sẽ được trong hai bài kế tiếp:
Sau khi kết thúc qua hai bài học này, bạn sẽ hoàn toàn làm chủ các sử dụng mô hình hộp và có thể dàn trang web theo ý đồ chi tiết và chính xác hơn so với cách dàn trang bằng table như kiểu cũ trước đây
Tổng kết
Trong bài học này, bạn đã làm quen với mô hình hộp, bài tiếp theo sẽ giúp bạn đào sâu hơn nữa các kiến thức cần biết để tạo ra các phần tử và kiểm soát nó dựa trê mô hình hộp.
