CSS 07 – Mô hình hộp (BoxModel) và các thuộc tính

0
83

1. Mô hình hộp (BoxModel)

Mô hình hộp (Box model) là một kỹ thuật cơ bản trong CSS Layout được sử dụng để mô tả các khoảng cách mà mỗi phần tử sở hữu.
Mỗi Box model đều bao gồm các thành phần :

  • Content: Phần nội dung của phần tử
  • Padding: Khoảng cách tính từ bên trong phần tử
  • Border: Đường biên, hay đường viền của phần tử
  • Margin: Khoảng cách tính từ bên ngoài phần tử
Cấu trúc Box model

2. Thuộc tính padding

Padding chính là khoảng cách tính từ nội dung bên trong (content) tới đường viền (border) của phần tử. Giá trị của các thuộc tính padding là đơn vị độ dài.

a. Các thuộc tính padding
  • Padding-top: giá_trị;
  • Padding-right: giá_trị;
  • Padding-bottom: giá_trị;
  • Padding-left: giá_trị;
b. Khai báo rút gọn

Cách 1 : Khai báo rút gọn padding bốn phía với bốn giá trị

Cú pháp :

Trong đó :

  • giá_trị_1 tương ứng với giá trị của padding-top
  • giá_trị_2 tương ứng với giá trị của padding-right
  • giá_trị_3 tương ứng với giá trị của padding-bottom
  • giá_trị_4 tương ứng với giá trị của padding-left

Ví dụ:

See the Pen vp_css_padding_summ1_examp by Thien (@anhtomks) on CodePen.0

Cách 2 : Khai báo rút gọn padding 4 phía với hai giá trị

Cú pháp :

Trong đó :

  • giá_trị_1 tương ứng với giá trị của padding-top và padding-bottom (trên, dưới)
  • giá_trị_2 tương ứng với giá trị của padding-left và padding-right(trái, phải)

Ví dụ:

See the Pen vp_css_padding_summ2_examp by Thien (@anhtomks) on CodePen.0

Cách 3 : Khai báo rút gọn padding 4 phía với một giá trị

Cú pháp :

Trong đó :  giá_trị đại diện cho giá trị của padding bốn phía

Ví dụ:

See the Pen vp_css_padding_summ3_examp by Thien (@anhtomks) on CodePen.0

3. Thuộc tính border

Border là đường biên hay còn gọi là đường viền bao quanh nội dung của phần tử.

a. Border-width

Thuộc tính này dùng để thiết lập độ dày của đường viền. Giá trị của thuộc tính này là đơn vị độ dài.

Cú pháp :

b. Border-color

Thuộc tính này dùng để thiết lập màu  cho đường viền. Giá trị của nó là tên màu bằng tiếng anh hoặc mã màu.

Cú pháp:

c. Border-style

Thuộc tính này sử dụng để xác định kiểu đường viền. Giá trị của nó bao gồm 8 kiểu : solid, dashed, dotted, double, groove, ridge, inset, outset, none, hidden.

Cú pháp :

Với xu hướng thiết kế phẳng như hiện này, người ta thường sử dụng giá trị cho thuộc tính border-style là solid hoặc none. Thông thường khi làm việc với thuộc tính border, mọi người sẽ sử dụng cú pháp rút gọn để khai báo thông tin cho border.

d. Khai báo rút gọn

Cú pháp :

Trong đó: giá_trị_1 là độ dày của đường viền, giá_trị_2 là kiểu của đường viền và giá_trị_3 là màu của đường viền.

Ví dụ:

See the Pen vp_css_border_examp by Thien (@anhtomks) on CodePen.0

4. Thuộc tính margin

Margin chính là khoảng cách tính từ đường viền (border) với các phần tử bên ngoài. Giá trị của các thuộc tính margin là đơn vị độ dài.

a. Các thuộc tính margin
  • Margin-top: giá_trị;
  • Margin-right: giá_trị;
  • Margin-bottom: giá_trị;
  • Margin-left: giá_trị;
b. Khai báo rút gọn

Cách 1 : Khai báo rút gọn margin bốn phía với bốn giá trị

Cú pháp :

Trong đó :

  • giá_trị_1 tương ứng với giá trị của margin-top
  • giá_trị_2 tương ứng với giá trị của margin-right
  • giá_trị_3 tương ứng với giá trị của margin-bottom
  • giá_trị_4 tương ứng với giá trị của margin-left

Ví dụ:

See the Pen vp_css_margin_summ1_examp by Thien (@anhtomks) on CodePen.0

Cách 2 : Khai báo rút gọn margin 4 phía với hai giá trị

Cú pháp :

Trong đó :

  • giá_trị_1 tương ứng với giá trị của margin-top và margin-bottom (trên, dưới)
  • giá_trị_2 tương ứng với giá trị của margin-left và margin-right(trái, phải)

Ví dụ:

See the Pen vp_css_margin_summ2_examp by Thien (@anhtomks) on CodePen.0

Cách 3 : Khai báo rút gọn margin 4 phía với một giá trị

Cú pháp :

Trong đó :  giá_trị đại diện cho giá trị của margin bốn phía.

Ví dụ:

See the Pen vp_css_margin_summ3_examp by Thien (@anhtomks) on CodePen.0

 

Tác giả: Thiện Nguyễn

[Total: 0    Average: 0/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here