[CSS bài 12] Mô hình hộp (Box Model) trong CSS

Bài này thuộc phần 12 của 12 trong series Học CSS cơ bản

Mô hình hộp (Box Model) là kỹ thuật điều chỉnh khoảng cách hiển thị cho mỗi phần tử trên trang web.

1. Các khái niệm

Một phần tử HTML được coi là một Box Model. Tất cả các phần tử HTML có thể được coi là các box model.

Trong CSS, thuật ngữ “mô hình hộp (box model)” được sử dụng khi nói về thiết kế (design) và cách bố trí (layout).

Mô hình hộp (box model) bao gồm 04 thành phần:

+ Margin – là phần nằm bên ngoài của border. Margin là 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. Padding là trong suốt
+ Content – là nội dung trong phần tử. Nơi mà bạn viết văn bản và tải hình ảnh

Hình ảnh dưới đây minh họa cho mô hình hộp (Box model)

Và trong 4 thành phần trên thì phần content chúng ta sẽ không có thuộc tính CSS nào đại diện cả vì nó là nội dung trong phần tử. Còn 3 phần còn lại thì sẽ có các thuộc tính CSS đại diện mà tôi đã viết ở các bài trước.

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

2. Width và Height của một phần tử HTML

Để thiết lập chiều rộng và chiều cao của một phần tử một cách chính xác trong tất cả các trình duyệt, bạn cần phải biết mô hình hộp (box model) làm việc như thế nào.

Quan trọng: Khi bạn thiết lập thuộc tính chiều rộng (width) và chiều cao (height) của một phần tử bằng CSS, bạn chỉ thiết lập chiều rộng và chiều cao của vùng nội dung. Để tính toán kích thước đầy đủ của một phần tử, bạn cũng phải thêm padding, border và margin.

Giả sử chúng ta muốn thiết lập một phần tử <div> để có tổng chiều rộng là 350px:

Đây là tính toán chiều rộng của ví dụ trên:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

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;

3. Box Model trên trình duyệt Google Chrome và Firefox

Bước 1: Vào trang web cần xem box model

Bước 2: Bấm vào F12 trên bàn phím, sau đó ấn vào tab Computed (Google Chrome) hoặc Box Model (Firefox) như hình dưới

Bước 3: Tìm phần tử muốn xem thông tin về box model

Bước 4: Nhấp vào từng ô giá trị bên khung Box Model và thay đổi giá trị để xem sự thay đổi của nó (sẽ mất sau khi bạn refresh trình duyệt).

4. Lưu ý

Mô hình hộp (Box Model) là kỹ thuật quan trọng bạn cần phải nắm vững bởi vì giao diện sẽ không được như ý muốn nếu không hiểu cách vận dụng Box Model hợp lý.

5. Lời cuối bài

Đến đây là kết thúc bài viết về chủ đề mô hình hộp (box model) trong CSS. Ở bài sau tôi sẽ viết về các thuộc tính outline trong CSS.

The post [CSS bài 12] Mô hình hộp (Box Model) trong CSS appeared first on Học online.

from WordPress http://ift.tt/2eu0rAb
via IFTTT