Tìm hiểu về Box CSS

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
Tìm hiểu về Box CSS

Các phần tử HTML được xem như các hộp chữ nhật (box), đây là mô hình để CSS dàn trang. Một box có các thành phần như: margin, border, padding, nội dung phần tử

CSS trình bày các thành phần margin, border, padding theo thứ tự top, right, bottom, left

Như vậy mọi phần tử trong web là các box, CSS sử dụng mô hình này để xác định độ lớn của box và box có vị trí như thế nào.

Các thuộc tính của Box - hộp trong CSS
  • Liên quan đến margin có các thuộc tính: margin-top, margin-right, margin-bottom, margin-left
  • Liên quan đến padding có các thuộc tính: padding-top, padding-right, padding-bottom, padding-left
  • Liên quan đến kích thước vùng nội dung: width, height
box-css.png

Khi bạn thiết lập thuộc tính width và height của phần tử CSS có nghĩa là bạn đang thiết lập chiều rộng và chiều cao cho vùng nội dung.
Khi thiết lập background-color, nó tác động nên vùng nội dung và cả vùng padding.

Khi làm việc với các box, điều quan trọng cần biết tính tổng rộng và cao của phần tử.

Ví dụ với box có padding:
tổng chiều rộng = width + padding-left + padding-right

Ví dụ với box có cả margin, border, padding:
Tổng rộng = margin-left + margin-right + padding-left + padding-right + border-left + boder-right + width

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


Nguồn: Internet​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom