Độ lớn thực sự của Box

Ở 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:

  1. Mục đích tính toán độ lớn của Box?
  2. Làm sao để tính độ lớn của Box?

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(left) 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 widthheight 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 thực hành nhé.

Giả sử chúng ta có một thành phần <div class=”classbox”> và khai báo CSS cho thành phần này như sau:

Code CSS:

 11-26-2013 10-09-03

Thì Box này có độ lớn: rộng 250px và cao 150px.

Tại sao không phải là 200x100px 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:

250px(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.

Chúc các bạn thành công!

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Leave a Reply


*