Độ 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. Tại sao phải tính toán độ lớn của Box?
  2. 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:

1 #mybox{
2     width150px;
3     height100px;
4     padding:10px;
5     border5px solid black;
6     margin:10px
7 }

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.
Advertisements

Posted on November 7, 2012, in HTML/CSS and tagged , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: