Ở bài viết về
Box Model trong CSS, mình đã giới thiệu với các bạn về các thành phần của Box Model, nhưng đó chỉ là những khái niệm cơ bản. Bài viết này chúng ta sẽ cùng tìm hiểu về độ lớn thực sực sự của Box (ta có thể gọi là các tính toán trong Box model). Vậy:
- Tại sao phải tính toán độ lớn của Box?
- Cách tính độ lớn của Box như thế nào?
Trong thiết kế giao diện chúng ta luôn phải biết được thành phần bên trái rộng bao nhiêu px hay bao nhiêu %, rồi header, footer, right. . . Lúc đó chúng ta phải biết được độ lớn của các thành phần này để bố trí chúng cho hợp lý.
Khi chúng ta khai báo thuộc tính width và height của một thành phần nào đó trong CSS. Thì đó là độ lớn của vùng hiển thị dữ liệu (content area – là phần nằm trong cùng trong mô hình Box Model) chứ không phải độ lớn của Box. Chúng ta hãy cùng đi trả lời câu hỏi thứ 2 để biết được độ lớn của Box (độ lớn thực sự).
Giả sử chúng ta có một thành phần <div id=”mybox”> và khai báo CSS cho thành phần này như sau:
#mybox{
width: 150px;
height: 100px;
padding:10px;
border: 5px solid black;
margin:10px
}
Thì Box này có độ lớn: rộng 200px và cao 150px.
Tại sao không phải là 150x100px như ta đã khai báo width và height. Như đã nói thì đây chỉ là độ lớn của vùng hiển thị dữ liệu mà thôi. Chúng ta đã biết mô hình Box Model gồm có padding, border, margin và vùng hiển thị dữ liệu. Do đó độ lớn của Box phải là tổng các giá trị này.
Như vậy thì ví dụ trên được tính toán như sau:
150px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 20px (left + right margin)
= 200px (chiều rộng)
Tương tự thế ta tính được chiều cao là 150px.
Công thức chung để tính độ lớn của Box như sau:
Rộng = width + left padding + right padding + left border + right border + left margin + right margin
Cao = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
KẾT LUẬN
Vậy là chúng ta đã trả lời được 2 câu hỏi đã đưa ra, qua bài này chúng ta đã biết được:
- Cách tính toán độ lớn của Box (độ lớn thực sự của một thành phần nào đó).
- Thuộc tính width và height trong CSS.