Tìm hiểu về Box CSS

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,969
Được Like
11,315
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

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom