HTML & CSS Lập trình web

Định dạng CSS – Phần 5: Box Group

This entry is part 10 of 24 in the series HTML & CSS cho người bắt đầu

Box Group là thành phần cơ bản trong CSS, nó có các thuộc tính để tùy chỉnh vị trí của nội dung bên trong box đó, tạo độ bóng cho box,…


Code HTML cần chuẩn bị:

 1/ Thuộc tính box-align: 

Box-align dùng để thay đổi vị trí của nội dung trong box

Cú pháp của box align:

box-align: <giá trị>;

Trong đó giá trị thường là:

+ Center (nội dung bên trong nằm ở giữa).

+ Start (nội dung bên trong nằm ở đầu).

+ End (nội dung bên trong nằm ở dưới).

Demo:

Định dạng CSS – Phần 5: Box Group

Code mẫu:

2/ Thuộc tính box-shadow:

Box-shadow trong CSS dùng để tạo độ bóng cho box.

Cú pháp của box-shadow:

box-shadow: xpx | ypx | zpx | tpx | #fff | inset;

Trong đó: 

+ x px: Độ dời (ngang) (bắt buộc phải có) (px, pt,…).

+ y px: Độ dời (dọc) (bắt buộc phải có) (px, pt,…).

+ z px: Độ mờ (px, pt,…).

+ t px: Độ lan rộng của bóng (px, pt,…).

+ #fff: Mã màu được tạo cho bóng đó, mặc định là màu đen.

+ inset: Thay đổi bóng từ ngoài tối vào trong sáng.

Demo:

Định dạng CSS – Phần 5: Box Group

Code mẫu:

3. Thuộc tính box-sizing:

Box-sizing dùng để định dạng chiều dài và chiều cao của box. Trong CSS, chiều dài và chiều cao của 1 phần tử nào đó bao gồm độ dài phần tử + margin + padding + border = độ dài thực sự của phần tử đó.

Box-sizing có 2 giá trị:

+ content-box (gồm độ lớn của nội dung, không gồm padding và margin và border)

+ border-box (gồm độ lớn + padding + border của nội dung, không gồm margin)

Code mẫu:

4. Thuộc tính box-direction:

Box-derection dùng để đảo trục, đảo vị trí các box trong CSS

Box- derection gồm 2 giá trị: none và reverse

Code mẫu:
Qua bài viết này, các bạn cần nắm rõ một số thuộc tính trong Box Group: cách tạo độ bóng, thiết lập vị trí trong box,… Đây cũng là thành phần chúng ta sẽ gặp thường xuyên trong thiết kế Website. Ngoài ra Box còn nhiều thuộc tính khác nữa, các bạn có thể nghiên cứu thêm ở một số trang lớn như w3school.com. Các bạn nên code lại và quan sát kết quả hiển thị để hiểu rõ ý nghĩa của thuộc tính hơn, chúc các bạn học tốt.

Series Navigation<< Định dạng CSS – Phần 4: Border GroupĐịnh dạng CSS – Phần 6: List Group >>